我正在尝试创建一个可以 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 之上覆盖或创建自己的监听器。可能吗?
最佳答案
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);
关于javascript - 从 Chrome 扩展中 Hook Websocket,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52650512/