如何通过history.pushState更改页面时，在Google Chrome扩展程序中插入内容脚本？

Question

我正在为网站创建一个小的Google Chrome扩展程序，我想在特定页面上更改一些html。

问题是网站通过ajax加载他的内容，并且大量使用history.pushState API。 所以，我添加了这个东西来表示：

"content_scripts": [
   {
     "matches": ["http://vk.com/friends"],
     "js": ["js/lib/jquery.min.js", "js/friends.js"],      
   },
 ]

第一次打开页面或重新加载时，一切正常。 但是当我在网站页面之间导航时，chrome不会在“/ friends”页面上插入我的脚本。我认为这发生了，因为URL实际上没有改变。他们使用history.pushState（）等，chrome无法再次插入/重新运行我的脚本。

有没有解决方案？

Answer 1

我能够让这个工作。来自Chrome Extension docs for 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
  });

Answer 2

您可以在内容脚本中添加window.onpopstate事件并进行侦听，当事件触发时您可以再次重新运行内容脚本。

<强>参考

a） extension.sendMessage()

b） extension.onMessage().addListener

c） tabs.executeScript()

d） history.pushState()

e） window.onpopstate

示范演示：

<强> 的manifest.json

确保内容脚本注入的URL和所有API标签在清单文件中具有足够的权限

{
    "name": "History Push state Demo",
    "version": "0.0.1",
    "manifest_version": 2,
    "description": "This demonstrates how push state works for chrome extension",
    "background":{
        "scripts":["background.js"]
    },
    "content_scripts": [{
        "matches": ["http://www.google.co.in/"],
        "js": ["content_scripts.js"]
     }],
    "permissions": ["tabs","http://www.google.co.in/"]
}

<强> content_scripts.js

跟踪onpopstate事件并向后台页面发送请求以重新运行脚本

window.onpopstate = function (event) {
    //Track for event changes here and 
    //send an intimation to background page to inject code again
    chrome.extension.sendMessage("Rerun script");
};

//Change History state to Images Page
history.pushState({
    page: 1
}, "title 1", "imghp?hl=en&tab=wi");

<强> background.js

跟踪内容脚本的请求并将脚本执行到当前页面

//Look for Intimation from Content Script for rerun of Injection
chrome.extension.onMessage.addListener(function (message, sender, callback) {
    // Look for Exact message
    if (message == "Rerun script") {
        //Inject script again to the current active tab
        chrome.tabs.executeScript({
            file: "rerunInjection.js"
        }, function () {
            console.log("Injection is Completed");
        });
    }
});

<强> rerunInjection.js

一些简单的代码

console.log("Injected again");

<强>输出

如果您需要更多信息，请与我们联系。