Real Chat Overlay

Chat with your friends on local host
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         Real Chat Overlay
// @version      1.0
// @match        *://*/*
// @grant        none
// @namespace https://greasyfork.org/users/1594941
// @description Chat with your friends on local host
// ==/UserScript==

(function () {

    const ws = new WebSocket("ws://localhost:3000");

    const box = document.createElement("div");
    box.style = `
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 260px;
        height: 320px;
        background: rgba(0,0,0,0.85);
        color: white;
        z-index: 999999;
        font-family: Arial;
        display: flex;
        flex-direction: column;
        border-radius: 10px;
        padding: 8px;
    `;

    const log = document.createElement("div");
    log.style = `
        flex: 1;
        overflow-y: auto;
        font-size: 12px;
        margin-bottom: 6px;
    `;

    const input = document.createElement("input");
    input.placeholder = "Type message...";
    input.style = `
        padding: 6px;
        border: none;
        outline: none;
        border-radius: 5px;
    `;

    function addMsg(text) {
        const div = document.createElement("div");
        div.textContent = text;
        log.appendChild(div);
        log.scrollTop = log.scrollHeight;
    }

    ws.onmessage = (event) => {
        addMsg("Friend: " + event.data);
    };

    input.addEventListener("keydown", (e) => {
        if (e.key === "Enter" && input.value.trim()) {
            const msg = input.value;

            addMsg("You: " + msg);
            ws.send(msg);

            input.value = "";
        }
    });

    box.appendChild(log);
    box.appendChild(input);
    document.body.appendChild(box);

})();