从浏览器扩展覆盖 JavaScript 函数

Question

我正在创建一个网络扩展来帮助检测网站中的 postMessage 活动。因此，我想在页面附加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，而是创建一个包含代码的脚本标记。即script.textContent = actualCode而不是script.src = url。