javascript - 如何监听 XMLHttpRequests - 浏览器扩展

Question

我的脚本

var origOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function() {
    this.addEventListener('load', function() {
        //console.log(this.responseURL);        
        if(this.responseURL == "https://get.example.com/dashboard/summary")
        {
            // Run the function
            funMain();
        }
    });
    origOpen.apply(this, arguments);
};

function funMain() {
    // My codes
}

这是我的脚本，它按预期工作。它的作用是，监听 XMLHttpRequests 以及何时向“https://get.example.com/dashboard/summary”发出 XMLHttpRequest。 '，它调用 funMain 函数。由于这是一个事件，因此这不是一次性事件。这种情况可能会发生多次。这个 XMLHttpRequest 是由 https://example.com/dashboard 制作的网页。

处理:如果向“https://get.example.com/dashboard/summary”发出 XMLHttpRequest ' 作者 https://example.com/dashboard网页，然后调用 funMain 函数。

现在，我想使用这个工作脚本构建一个扩展。
这是我到目前为止所尝试过的...

内容脚本

function funMain() {
    // My codes
}

注意:我知道我必须使用 browser.runtime.sendMessage() 在后台脚本和内容脚本之间进行通信。但目前，我正在尝试让事件函数(在后台脚本中)正常工作。

后台脚本

console.log("Msg 01 - Background script is running.");
var origOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function() {
    this.addEventListener('load', function() {
        console.log("Msg 02 - " + this.responseURL);        
        if(this.responseURL == "https://get.example.com/dashboard/summary")
        {
            // Run the function
            // funMain();
            console.log("Msg 03 - Hello! I am working as expected.");
        }
    });
    origOpen.apply(this, arguments);
};

list

{
  "manifest_version": 2,
  "name": "Beastify",
  "version": "1.0",

  "description": "des",
  "icons": {
    "48": "icons/beasts-48.png"
  },

  "permissions": [
        "webRequest",
        "<all_urls>"
    ],

  "content_scripts": [{
        "matches": [
            "*://*.example.com/dashboard"
        ],
        "js": [
            "content-script.js"
        ]
    }],

    "background": {
    "scripts": ["background.js"]
  }
}

问题是，该事件没有按预期进行。因此，无法调用 funMain。当我检查后台页面时，我只能看到Msg 01。看不到Msg 02或Msg 03。

输出:background.js

Msg 01 - Background script is running.

我做错了什么以及如何解决这个问题？

Answer 1

一切以实际情况为准。以下是一些您可以实践的想法。

最好使用标准 JavaScript XMLHttpRequest而不是使用XMLHttpRequest.prototype。

内容脚本和浏览器具有不同的范围，为了安全起见，不直接交互。

你可以

• 在内容脚本中包含 XHR 并使用 webRequest后台脚本中的API用于监听HTTP请求
• 使用runtime.sendMessage()从内容脚本到后台脚本以在后台脚本中运行 XHR

然后从后台脚本

• 使用 tabs.sendMessage()将消息发送到内容脚本
• 使用tabs.executeScript()直接运行内容范围内的脚本或启动内容脚本中的函数