如何在页面通过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
示例演示:
$ 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
b) extension.onMessage().addListener
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屋!