[英]How to insert content script in google chrome extension when page was changed via history.pushState?
I'm creating a small google chrome extension for website, and I want to change some html on particular pages. 我正在为网站创建一个小的google chrome扩展程序,并且我想更改特定页面上的一些html。
The problem is that website load his content via ajax, and heavy use history.pushState API. 问题是网站通过ajax和大量使用的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.
但是,当我在网站页面之间导航时,chrome不会在“ / friends”页面上插入脚本。 I think this happening because the URL actually don't changing.
我认为发生这种情况是因为URL实际上并没有改变。 They use history.pushState() and so, chrome can't insert/rerun my script again.
他们使用了history.pushState(),因此chrome无法再次插入/重新运行我的脚本。
Is there any solution for this? 有什么解决办法吗?
I was able to get this working. 我能够使它工作。 From the Chrome Extension docs for webNavigation :
从Chrome扩展程序文档中的webNavigation :
You need to set permissions for webNavigation
in manifest.json : 您需要在manifest.json中设置
webNavigation
权限:
"permissions": [
"webNavigation"
],
Then in background.js : 然后在background.js中 :
chrome.webNavigation.onHistoryStateUpdated.addListener(function(details) {
console.log('Page uses History API and we heard a pushSate/replaceState.');
// do your thing
});
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. 您可以在内容脚本中添加window.onpopstate事件并进行监听,当事件触发时,您可以再次重新运行内容脚本。
References 参考文献
a) extension.sendMessage() a) extension.sendMessage()
b) extension.onMessage().addListener b) extension.onMessage()。addListener
c) tabs.executeScript() c) tabs.executeScript()
d) history.pushState() d) history.pushState()
e) window.onpopstate e) window.onpopstate
Sample Demonstration: 样本演示:
manifest.json manifest.json
Ensure content script injected URL and all API's tabs have enough permission in manifest file 确保内容脚本注入的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 content_scripts.js
Track for onpopstate event and send a request to background page for rerun of script 跟踪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 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 rerunInjection.js
Some Trivial code 一些琐碎的代码
console.log("Injected again");
Output 输出量
Let me know if you need more information. 如果您需要更多信息,请与我们联系。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.