如何在页面通过history.pushState更改时在Google Chrome扩展插入内容脚本？ [英] How to insert content script in google chrome extension when page was changed via history.pushState?

问题描述

我为网站创建了一个小型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（）等，铬不能再次插入/重新运行我的脚本。

有没有解决方案？

解决方案

内容脚本中的 window.onpopstate 事件并收听它，当事件触发时，您可以重新运行内容脚本。

参考

< extension.sendMessage（） a>

b） extension.onMessage（）。addListener

$ b

c） tabs.executeScript（）

d） history.pushState（）

window.onpopstate

示例演示：
$ b

manifest.json

确保内容脚本注入了URL，并且所有API的选项卡在清单文件中拥有足够的权限

  {
名称：历史推送状态演示，
版本：0.0.1，
manifest_version：2，
description：这演示了push状态如何工作chrome扩展名，
background：{
scripts：[background.js] 
}，
content_scripts：[{
matches ：[http://www.google.co.in/]，
js：[content_scripts.js] 
}]，
permissions：[ tabs，http://www.google.co.in/] 
} 
  

<强> content_sc ripts.js

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

  window.onpopstate =函数（事件）{
 //在此处跟踪事件更改并
 //向背景页发送暗示以注入再次编码
 chrome.extension.sendMessage（重新运行脚本）; 
}; 
 
 //将历史记录状态更改为图片页面
 history.pushState（{
 page：1 
}，title 1，imghp？hl = en&标签=无线）; 
  

background.js

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

  //查找内容脚本中的Intimation以重新运行注入
 chrome.extension.onMessage.addListener（function（message，sender，callback）{
 //查找Exact消息
 if（message == 重新运行脚本）{
 //将脚本再次注入到当前活动选项卡
 chrome.tabs.executeScript（{
 file：rerunInjection.js
}，function ）{
 console.log（Injection is Completed）; 
}）; 
} 
}）; 
  

rerunInjection.js

一些普通的代码

  console.log（Injected again）; 
  

输出

让我知道如果您需要更多信息。

I'm creating a small google chrome extension for website, and I want to change some html on particular pages.

The problem is that website load his content via ajax, and heavy use history.pushState API. So, I added this thing to manifest:

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

Everything works fine when I'm opening page first time or reloading it. But when I'm navigating between website pages, chrome don't insert my scripts on "/friends" page. I think this happening because the URL actually don't changing. They use history.pushState() and so, chrome can't insert/rerun my script again.

Is there any solution for this?

解决方案

You can add a window.onpopstate event in content script and listen for it, when an event fires you can re-run content script again.

References

a) extension.sendMessage()

b) extension.onMessage().addListener

c) tabs.executeScript()

d) history.pushState()

e) window.onpopstate

Sample Demonstration:

manifest.json

Ensure content script injected URL and all API's tabs have enough permission in manifest file

{
    "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

Track for onpopstate event and send a request to background page for rerun of script

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

Track for request from content script and execute script to the current page

//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

Some Trivial code

console.log("Injected again");

Output

Let me know if you need more information.

这篇关于如何在页面通过history.pushState更改时在Google Chrome扩展插入内容脚本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！