Question

我正在开发Chrome扩展程序以调整Facebook。但是，在Facebook等支持HTML5的网站中捕捉浏览操作需要覆盖window.history.pushState，如in this SO question所述。

不幸的是，Chrome的孤立世界似乎阻止了这种覆盖。是否有其他方法可以捕获历史记录更改（轮询document.location.href除外）？

Answer 1

不确定您是否尝试在background.js或content.js中执行此操作，但如果是前者，则可以使用webNavigation事件执行此操作：

您需要在 manifest.json 中为webNavigation设置权限：

  "permissions": [
     "webNavigation"
  ],

然后在 background.js ：

  chrome.webNavigation.onHistoryStateUpdated.addListener(function(details) {
        console.log('Page uses History API and we heard a pushSate/replaceState.');
        // do your thing
  });

来源：Chrome Extension docs for webNavigation

Answer 2

是，

一种方法是创建脚本标记并将代码放在那里：

html = "window.history.pushState = function(a,b,c) { alert('Change !'); };";

var headID = document.getElementsByTagName("head")[0];         
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.innerHTML = html;
headID.appendChild(newScript);

Answer 3

在@Boris的回答的基础上：继续默认操作，保存对原始pushState函数的引用，然后调用它：

var headID = document.getElementsByTagName("head")[0];         
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = chrome.extension.getURL('script.js');
headID.appendChild(newScript);

的script.js：

window.history.pushState = (function(nativePushState) {
    return function(a,b,c) {
        // Do something
        nativePushState.apply(this, arguments); //Continue by calling native history.pushState
    };
})(window.history.pushState)

从chrome扩展程序监视history.pushstate

3 个答案: