WebSocket消息额外监听脚本

Greasy Fork is available in English.
WebSocket消息额外监听脚本

在网页已有WebSocket基础上额外监听消息
当前为 2024-12-06 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name WebSocket消息额外监听脚本
// @namespace http://yournamespace.com/
// @version 0.16
// @description 在网页已有WebSocket基础上额外监听消息
// @author Your Name
// @match https://www.milkywayidle.com/*
// @grant none
// @license MIT
// ==/UserScript==

(function () {
    'use strict';

    // 创建消息显示区域
    const createMessageDisplay = () => {
        const messageBox = document.createElement('div');
        messageBox.id = 'ws-message-box';
        messageBox.style.position = 'fixed';
        messageBox.style.top = '10px';
        messageBox.style.left = '10px';
        messageBox.style.width = '400px';
        messageBox.style.height = '200px';
        messageBox.style.resize = 'both';
        messageBox.style.overflow = 'auto';
        messageBox.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
        messageBox.style.color = '#fff';
        messageBox.style.zIndex = '9999';
        messageBox.style.padding = '10px';
        messageBox.style.fontSize = '14px';
        messageBox.style.fontFamily = 'monospace';
        messageBox.style.wordBreak = 'break-word';
        messageBox.style.border = '1px solid rgba(255, 255, 255, 0.5)';
        messageBox.style.borderRadius = '5px';
        messageBox.style.boxShadow = '0px 2px 5px rgba(0, 0, 0, 0.5)';
        messageBox.style.cursor = 'move'; // 添加鼠标拖动效果
        messageBox.innerHTML = `
            <div id="ws-controls" style="margin-bottom: 5px; display: flex; gap: 5px;">
                <button id="clear-messages" style="padding: 5px; font-size: 12px;">Clear</button>
                <input id="filter-keyword" type="text" placeholder="Filter by keyword" style="flex: 1; padding: 5px; font-size: 12px;"/>
            </div>
            <div id="ws-messages" style="max-height: 100%; overflow-y: auto;"></div>`;
        document.body.appendChild(messageBox);

        makeDraggable(messageBox); // 使消息框支持拖动
    };

    // 添加消息到显示区域
    const appendMessage = (message) => {
        const messagesContainer = document.getElementById('ws-messages');
        const filterKeyword = document.getElementById('filter-keyword').value.trim();
        if (messagesContainer) {
            if (!filterKeyword || message.includes(filterKeyword)) {
                const messageElement = document.createElement('div');
                messageElement.textContent = message;
                messagesContainer.appendChild(messageElement);
                messagesContainer.scrollTop = messagesContainer.scrollHeight; // 确保新消息可见
            }
        }
    };

    // 清除所有消息
    const clearMessages = () => {
        const messagesContainer = document.getElementById('ws-messages');
        if (messagesContainer) {
            messagesContainer.innerHTML = '';
        }
    };

    // 使消息框可拖动
    const makeDraggable = (element) => {
        let isDragging = false;
        let offsetX, offsetY;

        element.addEventListener('mousedown', (e) => {
            if (e.target.id === 'clear-messages' || e.target.id === 'filter-keyword') return; // 避免影响控件操作
            isDragging = true;
            offsetX = e.clientX - element.offsetLeft;
            offsetY = e.clientY - element.offsetTop;
            document.body.style.userSelect = 'none'; // 禁止选中文本
        });

        document.addEventListener('mousemove', (e) => {
            if (isDragging) {
                element.style.left = `${e.clientX - offsetX}px`;
                element.style.top = `${e.clientY - offsetY}px`;
            }
        });

        document.addEventListener('mouseup', () => {
            isDragging = false;
            document.body.style.userSelect = ''; // 恢复文本选择
        });
    };

    // 初始化消息显示区域
    createMessageDisplay();

    // 绑定按钮事件
    document.getElementById('clear-messages').addEventListener('click', clearMessages);

    // 绑定关键词筛选实时更新
    document.getElementById('filter-keyword').addEventListener('input', () => {
        const keyword = document.getElementById('filter-keyword').value.trim();
        const messagesContainer = document.getElementById('ws-messages');
        const allMessages = Array.from(messagesContainer.children);
        allMessages.forEach((msg) => {
            msg.style.display = keyword && !msg.textContent.includes(keyword) ? 'none' : 'block';
        });
    });

    // 保存原始的 WebSocket 构造函数
    const OriginalWebSocket = window.WebSocket;

    // 重写 WebSocket 构造函数
    window.WebSocket = function (...args) {
        const ws = new OriginalWebSocket(...args);

        // 监听消息事件
        ws.addEventListener('message', (event) => {
            console.log('WebSocket Message:', event.data);
            appendMessage(event.data); // 将消息显示在页面上
        });

        return ws;
    };

    // 保留 WebSocket 的其余属性和方法
    window.WebSocket.prototype = OriginalWebSocket.prototype;

    console.log('WebSocket hijacking initialized with draggable message display!');
})();