浏览器端监听已建立的WebSocket并获取消息的问题求助

为什么你之前的方法无效 #

• 直接给window.WebSocket添加onmessage：window.WebSocket是构造函数，每个WebSocket实例的onmessage是独立绑定的，修改构造函数本身不会影响已创建的实例。
• 新建无参数的WebSocket连接：Bubble的notify.bubble.is需要携带应用ID、会话Token等认证参数，无参数连接会被服务器拒绝推送消息。
• 页面加载后重写WebSocket原型：如果页面在你的脚本执行前已经创建了WebSocket实例，后续修改原型不会回溯影响已存在的实例。
• document.onmessage：这个事件是用于跨窗口/iframe的postMessage通信，和WebSocket的消息机制完全无关。

可行解决方案 #

1. 提前注入WebSocket钩子（推荐） #

使用油猴脚本（如Tampermonkey）在页面加载初期就重写WebSocket构造函数，确保拦截所有后续创建的实例：

// ==UserScript==
// @name         Bubble WebSocket 消息监听
// @match        https://flusk-privacy-testing.bubbleapps.io/version-test
// @run-at       document-start
// @grant        none
// ==/UserScript==

(function() {
    const OriginalWebSocket = window.WebSocket;

    window.WebSocket = function(url, protocols) {
        const ws = new OriginalWebSocket(url, protocols);
        
        // 拦截直接赋值的onmessage
        const originalOnMessage = ws.onmessage;
        ws.onmessage = function(event) {
            console.log('[WebSocket 消息]', event.data);
            if (event.data.includes('has-last-change-flusk-privacy')) {
                console.log('[目标消息捕获]', event.data);
                // 这里添加你的自定义处理逻辑
            }
            originalOnMessage?.call(this, event);
        };

        // 拦截通过addEventListener绑定的message事件
        const originalAddEventListener = ws.addEventListener;
        ws.addEventListener = function(type, listener) {
            if (type === 'message') {
                const wrappedListener = function(event) {
                    console.log('[WebSocket 消息（addEventListener）]', event.data);
                    if (event.data.includes('has-last-change-flusk-privacy')) {
                        console.log('[目标消息捕获（addEventListener）]', event.data);
                    }
                    listener.call(this, event);
                };
                return originalAddEventListener.call(this, type, wrappedListener);
            }
            return originalAddEventListener.call(this, type, listener);
        };

        return ws;
    };

    // 复制原始WebSocket的静态属性
    Object.assign(window.WebSocket, OriginalWebSocket);
})();

2. 携带认证参数新建连接 #

从浏览器开发者工具中获取已认证的WebSocket完整URL，再创建连接：

1. 打开DevTools → Network → 筛选WS
2. 找到notify.bubble.is的连接，复制完整的Request URL（包含app_id、token等参数）
3. 用该URL创建WebSocket：

const authWsUrl = 'wss://notify.bubble.is/?app_id=xxx&token=yyy...'; // 替换为实际获取的URL
const ws = new WebSocket(authWsUrl);
ws.onmessage = (event) => {
    console.log(event.data);
    if (event.data.includes('has-last-change-flusk-privacy')) {
        console.log('目标消息:', event.data);
    }
};

注意：会话Token可能会过期，需要每次获取最新参数。

3. 用浏览器调试工具直接查看（临时需求） #

在DevTools的Network面板中，选中目标WebSocket连接，切换到Frames标签，即可实时查看所有收发的消息，无需编写脚本。

内容的提问来源于stack exchange，提问作者Wesley Wasielewski