11

我正在为网站创建一个小的 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 无法再次插入/重新运行我的脚本。

有什么解决办法吗？

4

2 回答 2

14

我能够得到这个工作。来自webNavigation 的 Chrome 扩展文档：

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

  "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
  });
于 2013-07-11T03:26:31.797 回答
7

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

参考

a) extension.sendMessage()

b) extension.onMessage().addListener

c) tabs.executeScript()

d) history.pushState()

e) window.onpopstate

示例演示：

清单.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");

背景.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");

输出

在此处输入图像描述

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

于 2012-12-11T08:33:59.560 回答