我有一个为我的网站制作的 Chrome 扩展,目前我有该扩展每分钟检查数据库是否有更新。
是否可以让扩展程序监听实际页面上的事件?
类似这样的事情
this.trigger('sendUpdate', data) //this happened on the page
this.on(sendUpdate, function(){ //this is what the chrome extension listens for
//do stuff with data
})
您需要添加一个content_script。
content_script 拥有对 DOM 的完全访问权限,您可以绑定到页面上的所有事件
只需将其添加到菜单文件中
"content_scripts":[{
"matches":["http://*/*","https://*/*"],
"js":"your injected script.js"
}]
此外,从您的问题来看,您似乎将使用自定义事件,因此您的 content_scrip js 将与此类似
document.addEventListener('yourEventName', function(e){
//send message to ext
var someInformation = {/*your msg here*/}
chrome.extension.sendMessage(someInformation, function(response) {
//callback
});
}, false);
后台页面应该监听消息。
chrome.extension.onMessage.addListener(function(myMessage, sender, sendResponse){
//do something that only the extension has privileges here
return true;
});
然后您可以从页面上的所有脚本触发事件...
var evt = document.createEvent('Event');
evt.initEvent('yourEventName', true, true);
var some_element = document;
some_element.dispatchEvent(evt);
对于 2023 年阅读本文的任何人,
sendMessage
方法已移至 chrome.runtime.sendMessage
。
请参阅清单 v3 (MV3) 的文档:https://developer.chrome.com/docs/extensions/mv3/messaging/