5.5.9.1 事件定义

该popstate导航到会话历史记录条目时，事件在某些情况下被解雇。

据此，当您使用pushState. 但是这样的事件pushstate会派上用场。因为它history是一个宿主对象，所以你应该小心对待它，但在这种情况下 Firefox 似乎很好。这段代码工作得很好：

(function(history){
    var pushState = history.pushState;
    history.pushState = function(state) {
        if (typeof history.onpushstate == "function") {
            history.onpushstate({state: state});
        }
        // ... whatever else you want to do
        // maybe call onhashchange e.handler
        return pushState.apply(history, arguments);
    };
})(window.history);

你的 jsfiddle变成了：

window.onpopstate = history.onpushstate = function(e) { ... }

你可以window.history.replaceState用同样的方式进行猴子补丁。

注意：当然你可以onpushstate简单地添加到全局对象中，你甚至可以通过add/removeListener

终于找到了“正确”的方法来做到这一点！它需要为您的扩展程序添加权限并使用后台页面（不仅仅是内容脚本），但它确实有效。

您想要的事件是browser.webNavigation.onHistoryStateUpdated，当页面使用historyAPI 更改 URL时会触发该事件。它只针对您有权访问的站点触发，如果需要，您还可以使用 URL 过滤器进一步减少垃圾邮件。它需要webNavigation权限（当然还有相关域的主机权限）。

事件回调获取选项卡 ID、正在“导航”到的 URL 以及其他此类详细信息。如果您需要在事件触发时在该页面上的内容脚本中执行操作，请直接从后台页面注入相关脚本，或者让内容脚本port在加载时打开一个到后台页面，让后台页面保存由选项卡 ID 索引的集合中的该端口，并在事件触发时通过相关端口（从后台脚本到内容脚本）发送消息。

我用简单的代理来做到这一点。这是原型的替代品

window.history.pushState = new Proxy(window.history.pushState, {
  apply: (target: any, thisArg: any, argArray?: any) => {
    // trigger here what you need
    return target.apply(thisArg, argArray);
  },
});

我曾经使用过这个：

var _wr = function(type) {
    var orig = history[type];
    return function() {
        var rv = orig.apply(this, arguments);
        var e = new Event(type);
        e.arguments = arguments;
        window.dispatchEvent(e);
        return rv;
    };
};
history.pushState = _wr('pushState'), history.replaceState = _wr('replaceState');

window.addEventListener('replaceState', function(e) {
    console.warn('THEY DID IT AGAIN!');
});

这几乎和galambalazs一样。

不过这通常是矫枉过正。它可能不适用于所有浏览器。（我只关心我的浏览器版本。）

（它留下一个 var _wr，所以你可能想要包装它或其他东西。我不在乎那个。）

除了其他答案。我们可以使用 History 接口来代替存储原始函数。

history.pushState = function()
{
    // ...

    History.prototype.pushState.apply(history, arguments);
}