javascript - 每次加载页面时如何执行内容脚本？

Question

我正在编写一个 Chrome 扩展，它为 GitHub 上的任何页面(即匹配 https://github.com/* 的任何 URL)提供内容脚本。

我只是想在每次加载 GitHub 上的页面时向控制台记录一些内容，如下所示:

window.onload = function() {
  console.log("LOAD");
};

此监听器函数在第一次加载 GitHub 页面时执行，但如果用户从那里导航到 GitHub 上的其他页面(通过单击链接或通过其他方式)，它不会触发。为什么？ :(

重现步骤:

1. 打开 GitHub 上的任何存储库页面 (example)。您应该会看到消息记录到控制台。
2. 单击该页面上的任何链接。加载新页面时，不会记录任何消息。 :(

我该如何解决？

Answer 1

GitHub 似乎使用 AJAX(连同 history.pushState)来加载网站的某些部分，因此 onload 只会在页面真正加载时触发，但是不是在通过 AJAX 加载内容时。

由于 GitHub 使用 pushState 在 AJAX 内容加载完成时更改 URL，因此您可以检测到何时发生并执行您的代码。现在实际上并没有在使用 pushState 时触发的 native 事件，但是有这个 little hack :

(function(history){
    var pushState = history.pushState;
    history.pushState = function(state) {
        if (typeof history.onpushstate == "function") {
            history.onpushstate({state: state});
        }
        return pushState.apply(history, arguments);
    }
})(window.history);

因此，运行它，然后，您可以执行以下操作，而不是 window.onload:

history.onpushstate = function () {
    console.log("LOAD");
};

并非所有 GitHub 页面都以这种方式加载(AJAX + pushState)，因此您必须同时使用 window.onload 和 history.onpushstate 。

此外，您应该使用 window.addEventListener('load', fn); 而不是 window.onload，因为您不知道 GitHub 的代码是否可以覆盖 window.onload。