从浏览器扩展覆盖 JavaScript 功能

Question

我正在创建 a web extension 以帮助检测网站中的 postMessage activity。因此，我想在页面附加 message 事件侦听器时检测它，例如通过调用此代码：

window.addEventListener("message", ...)

显然无法获得事件侦听器列表。我的下一个想法是覆盖 addEventListener，这样我就可以检测到对它的调用：

window.addEventListener = function(type) {
    if (type == "message") {
        // do something
    }
}

我无法将此代码注入页面：

内容脚本可以访问每个页面的 DOM，但不能访问 window 对象。更改内容页面上的 window.addEventListener 对实际页面没有影响。
我可以通过修改 DOM 添加脚本元素，但我无法正确选择时间。我的脚本需要在任何其他脚本之前运行，并且此方法仅在已经存在 DOM.
像 chrome.tabs.executeScript 这样的功能在特定的选项卡上工作，我想在每个页面上运行编码。如果页面有 iframe，这会有所不同，我还想在其中覆盖 addEventListener。

如何从我的扩展中全局覆盖 window.addEventListener？或者，是否有另一种方法来检测 message 事件的事件侦听器？

Answer 1

要覆盖某个函数，您需要在页面加载前运行 JavaScript。您需要执行以下操作：

在 manifest.json 中，通过将 run_at 设置为 document_start，在加载文档之前指定内容脚本为运行。
从内容脚本中，将静态代码注入页面。不要使用 URL，而是创建一个包含代码的脚本标签。 IE。 script.textContent = actualCode 而不是 script.src = url.

Override JavaScript function from browser extension