☰

ClrCompactIntercept

Intercept WebSocket messages on StumbleChat and display them

// ==UserScript==
// @name         ClrCompactIntercept
// @namespace    http://tampermonkey.net/
// @version      1.2
// @description  Intercept WebSocket messages on StumbleChat and display them
// @author       MeKLiN
// @match        https://stumblechat.com/room/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=stumblechat.com
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // Your code starts here
    // ==============================================================

    // Method to create the div for displaying WebSocket messages
    function createWebSocketMessagesDiv() {
        const div = document.createElement("div");
        div.id = "webSocketMessages";
        div.style.position = "relative";
        div.style.height = "25%";
        div.style.paddingLeft = "2px";
        div.style.willChange = "transform";
        div.style.boxSizing = "border-box";
        div.style.overflowX = "hidden";
        div.style.overflowY = "auto";
        div.style.color = "#ffffff"; // Set font color to white
        div.style.padding = "10px"; // Example padding
        div.style.zIndex = "2"; // Set a higher z-index value

        // Additional styles for specific scenarios
        div.style.display = "flex";
        div.style.flexDirection = "column";
        div.style.justifyContent = "flex-end";
        div.style.fontSize = "12px";

        div.style.whiteSpace = "normal"; // Allow text to wrap within the container
        div.style.wordWrap = "break-word"; // Allow long words to break and wrap

        // Locate and append custom div the chat-position div
        const chatPositionDiv = document.getElementById("chat-position");
        if (chatPositionDiv) {
            chatPositionDiv.appendChild(div);
        } else {
            // If chat-position div not found, append to document body
            document.body.appendChild(div);
        }
    }
    // Call the function to create the WebSocket messages div
    createWebSocketMessagesDiv();
    // ==============================================================

    // Function to display WebSocket messages
    function displayWebSocketMessage(message) {
        const webSocketMessagesDiv = document.getElementById("webSocketMessages");
        if (webSocketMessagesDiv) {
            webSocketMessagesDiv.innerHTML += message + "<br>";
            webSocketMessagesDiv.scrollTop = webSocketMessagesDiv.scrollHeight;
        }
    }

    // Override WebSocket constructor to intercept WebSocket creation
    const originalWebSocket = window.WebSocket;
    window.WebSocket = function(url, protocols) {
        console.log('WebSocket URL:', url);

        // Call original WebSocket constructor
        const ws = new originalWebSocket(url, protocols);

        // Event listener for receiving messages
        ws.addEventListener('message', event => {
            displayWebSocketMessage(event.data);
        });

        return ws;
    };

    // Function to clear messages
    function clearMessages() {
        const webSocketMessagesDiv = document.getElementById("webSocketMessages");
        if (webSocketMessagesDiv) {
            webSocketMessagesDiv.innerHTML = "";
        }
    }

    // Function to toggle compact view
    function toggleCompactView() {
        const messages = document.querySelectorAll('.message .content');
        messages.forEach(message => {
            message.classList.toggle('compact');
        });
    }

    // Create top buttons
    function createTopButtons() {
        const topButtonsDiv = document.createElement("div");
        topButtonsDiv.id = "topButtons";
        topButtonsDiv.style.position = "fixed";
        topButtonsDiv.style.top = "10px";
        topButtonsDiv.style.left = "50%";
        topButtonsDiv.style.transform = "translateX(-50%)";
        topButtonsDiv.style.zIndex = "9999";

        // Clear button
        const clearButton = document.createElement("button");
        clearButton.textContent = "Clear";
        clearButton.style.background = "black";
        clearButton.style.color = "lime";
        clearButton.style.width = "50px";
        clearButton.style.height = "20px";
        clearButton.style.margin = "0 5px";
        clearButton.addEventListener("click", clearMessages);
        topButtonsDiv.appendChild(clearButton);

        // Compact button
        const compactButton = document.createElement("button");
        compactButton.textContent = "Compact";
        compactButton.style.background = "black";
        compactButton.style.color = "lime";
        compactButton.style.width = "60px";
        compactButton.style.height = "20px";
        compactButton.style.margin = "0 5px";
        compactButton.addEventListener("click", toggleCompactView);
        topButtonsDiv.appendChild(compactButton);

        // Append top buttons div to document body
        document.body.appendChild(topButtonsDiv);
    }

    // Call the function to create top buttons
    createTopButtons();

    // ==============================================================

})();

/* Additional compacting styles */
/* Ensure the following styles are properly appended to the end of your userscript */
/* without breaking the existing code structure */

/* Compact message styles */
/*@-moz-document url-prefix("https://stumblechat.com/room/") {*/
// Compact message styles
const compactStyles = `
.message .nickname ~ .content {
    display: inline-block;
    top: -7px;
    position: relative;
    margin-left: 2px;
    margin-right: 1em;
}
.content + .content {
    display: inline-block!important;
    margin-right: 1em;
}
.message .nickname ~ .content span {
    line-height: 1.5em;
}
`;

// Apply compact styles to the document
const style = document.createElement('style');
style.textContent = compactStyles;
document.head.appendChild(style);
/*}*/