从 Chrome 扩展中挂钩 Websocket

Question

我正在尝试创建一个可以挂钩特定页面的 WebSocket 的 Chrome 扩展内容脚本。当前，当页面被访问时，内容脚本会像这样将另一个脚本注入页面：

    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 包含 websocket 的 addEventListener。

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

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

Answer 1

您可以使用 wshook 覆盖原来的 WebSocket 类并添加可用于任务的回调

您可以直接复制脚本wsHookjs并粘贴到您的代码之前，或者像普通的javascript一样导入然后开始使用它。

导入库

<script src='wsHook.js'></script>

那么你可以只为之前或之后或两者添加回调来拦截 websocket 发送请求：

wsHook.before = function(data, url, wsObject) {
    console.log("Sending message to " + url + " : " + data);
}

// Make sure your program calls `wsClient.onmessage` event handler somewhere.
wsHook.after = function(messageEvent, url, wsObject) {
    console.log("Received message from " + url + " : " + messageEvent.data);
    return messageEvent;
}

注意：内容脚本可以在页面加载之前加载。有关如何在页面加载之前加载内容脚本的更多信息，您可以查看此post

Answer 2

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);

Answer 3

你可以试试这个吗？

s.onload = function () {
  this.parentNode.removeChild(this);
};