javascript - 从 Chrome 扩展中 Hook Websocket

Question

我正在尝试创建一个可以 Hook 特定页面的 WebSocket 的 Chrome 扩展内容脚本。当前，当访问页面时，内容脚本会向页面中注入(inject)另一个脚本，如下所示:

    var s = document.createElement('script');
    s.src = chrome.extension.getURL('Script.js');
    s.onload = function () {
        this.remove();
    };
    (document.head || document.documentElement).appendChild(s);

然后我的 Script.js 包含 websockets 的 addEventListener。

Window.WebSocket.addEventListener("message",function(event){
console.log("Websocket read");
})

但是当我运行扩展时，我收到一个错误，无法读取未定义的属性 addEventListener。所以我不完全确定这是否是正确的方法。我已经验证脚本确实被注入(inject)了页面，但是我将如何在页面的原始 onmessage WebSocket 之上覆盖或创建自己的监听器。可能吗？

Answer 1

WebSocket是一类。 addEventListener函数仅在类的实例中可用。因此，您必须找到网页创建的变量并将监听器添加到该变量中。例如:

var mySocket = new WebSocket("wss://127.0.0.1:8080");

你会做这样的事情:

mySocket.addEventListener("message", (e) => console.log(e));

但是，这将丢失所有初始消息，这取决于您能否访问变量，这在所有情况下都可能无法访问。
相反，你可以做的是用你自己的类覆盖这个类，这样当他们创建一个 WebSocket例如，它实际上是你的课。
这方面的一个例子是:

class MyWebSocket extends WebSocket
{
    __constructor()
    {
        super(...arguments);
    }

    addEventListener(name, callback)
    {
        // call the original event listener
        super.addEventListener(name, function()
        {
            console.log("Im sneakily listening in here", arguments);

            // call their callback
            callback(...arguments);
        });
    }
}

// Override the real web socket with your version
window.WebSocket = MyWebSocket;

请记住，上面的代码是伪代码且未经测试。
如果您只想查看套接字数据。您可以打开 chrome 开发工具，单击“ws”过滤器。然后单击列出的 Web 套接字并查看正在传输的原始数据。
这是一个应该在您的上下文脚本中工作的工作示例。

while(document == null || document.head == null);

var s = document.createElement("script");

function hookWebSocket()
{
    window.RealWebSocket = window.WebSocket;

    window.WebSocket = function()
    {
        var socket = new window.RealWebSocket(...arguments);

        socket.addEventListener("message", (e) =>
        {
            console.log("The message is: ", e);
        });

        return socket;
    }
}

s.innerHTML = `
    ${hookWebSocket.toString()}

    hookWebSocket();
`;

document.head.prepend(s);