Question

我正在编写Chrome扩展程序，为GitHub上的任何页面提供内容脚本（即任何匹配https://github.com/*的网址）。

我每次加载GitHub上的页面时都会尝试将某些内容记录到控制台，如下所示：

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

这个监听器功能是在第一次加载GitHub页面时执行的，但是如果用户从那里导航到GitHub上的其他页面（通过点击链接或通过其他方式），它就不会被激活。为什么？：（

重现的步骤：

在GitHub上打开任何存储库页面（example）。您应该看到消息已记录到控制台。
点击该页面上的任何链接。加载新页面时，不会记录任何消息。：（

我该如何解决这个问题？

Answer 1

似乎GitHub使用AJAX（以及history.pushState）来加载网站的某些部分，因此onload仅在页面真正加载时触发，而不是在通过AJAX加载内容时触发。

由于GitHub在加载AJAX内容时使用pushState来更改URL，因此您可以检测到何时发生这种情况并执行代码。实际上现在没有使用pushState时触发的本机事件，但是这个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。

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

1 个答案: