扩展如何监听WebSocket?(如果WebSocket位于iframe中,该怎么办?) [英] How can an extension listen to a WebSocket? (and what if the WebSocket is within an iframe?)
问题描述
我正在编写一个Firefox扩展,它需要侦听浏览器和服务器之间的通信.对于HTTP通信,我在后台脚本中使用了webRequest库.但是根据此Mozilla错误报告,我无法使用webRequest来拦截WebSocket消息.我的扩展程序如何监听WebSocket通信?
I am writing a Firefox extension that needs to listen to communication between browser and server. For HTTP communication, I use the webRequest library in a background script. But according to this Mozilla bug report, I cannot use webRequest to intercept WebSocket messages. How can my extension listen in on WebSocket communication?
更新:
我已经注入了我的 WebSocket包装器,但是从来没有叫!我尝试听的WebSocket位于iframe中.那有关系吗?
I've injected my WebSocket wrapper, but it's never called! The WebSocket I am trying to listen to is inside an iframe. Does that matter?
推荐答案
监听WebSocket通信的唯一方法是 WebSocket包装器插入网站的代码中,然后将其中继给您.您的代码应如下所示:
The only way to listen to WebSocket communication is to inject a WebSocket wrapper into the site's code and have it relay the messages to you. You're code should look something like this:
manifest.json
manifest.json
{
...
"content_scripts": [
{
"matches": [
"<website-url>",
],
"js": ["content/syringe.js"]
}
],
"web_accessible_resources": ["lib/socket-sniffer.js"]
}
content/syringe.js
content/syringe.js
var s = document.createElement('script');
s.src = browser.runtime.getURL('lib/socket-sniffer.js');
s.onload = function() {
this.remove();
};
lib/socket-sniffer.js
lib/socket-sniffer.js
(function() {
var OrigWebSocket = window.WebSocket;
var callWebSocket = OrigWebSocket.apply.bind(OrigWebSocket);
var wsAddListener = OrigWebSocket.prototype.addEventListener;
wsAddListener = wsAddListener.call.bind(wsAddListener);
window.WebSocket = function WebSocket(url, protocols) {
var ws;
if (!(this instanceof WebSocket)) {
// Called without 'new' (browsers will throw an error).
ws = callWebSocket(this, arguments);
} else if (arguments.length === 1) {
ws = new OrigWebSocket(url);
} else if (arguments.length >= 2) {
ws = new OrigWebSocket(url, protocols);
} else { // No arguments (browsers will throw an error)
ws = new OrigWebSocket();
}
wsAddListener(ws, 'message', function(event) {
console.log("Received:", event);
});
return ws;
}.bind();
window.WebSocket.prototype = OrigWebSocket.prototype;
window.WebSocket.prototype.constructor = window.WebSocket;
var wsSend = OrigWebSocket.prototype.send;
wsSend = wsSend.apply.bind(wsSend);
OrigWebSocket.prototype.send = function(data) {
console.log("Sent:", data);
return wsSend(this, arguments);
};
})();
(document.head || document.documentElement).appendChild(s);
以上代码的所有功劳显然归功于上面链接的海报.为了方便起见,我仅在此处复制了tt.
All credit for the above code obviously goes to the posters linked above. I have only copied tt here for convenience' sake.
更新:
是的,WebSocket在iframe中确实很重要!默认情况下,扩展仅加载在最顶部的框架中.要将其加载到iframe中,您必须在 manifest.json
:
Yes, it does matter that the WebSocket is within an iframe! By default, extensions are only loaded in the top-most frame. For it to load into the iframe, you must add "all_frames": true
to your manifest.json
:
manifest.json
manifest.json
{
...
"content_scripts": [
{
"matches": [
"<website-url>",
],
"all_frames": true,
"js": ["content/syringe.js"]
}
],
"web_accessible_resources": ["lib/socket-sniffer.js"]
}
If you'd like to read more, here's the documentation for all_frames
.
这篇关于扩展如何监听WebSocket?(如果WebSocket位于iframe中,该怎么办?)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!