javascript Chrome扩展:让扩展监听页面上的事件?

a6b3iqyw  于 2023-02-07  发布在  Java
关注(0)|答案(2)|浏览(369)

我有一个 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
})
hmmo2u0o

hmmo2u0o1#

您需要添加content_script。content_script对DOM具有完全访问权限,并且可以绑定到页面上的所有事件
只是添加这到这menifest文件

"content_scripts":[{
    "matches":["http://*/*","https://*/*"],
    "js":"your injected script.js"
}]

您可以获取更多信息https://developer.chrome.com/docs/extensions/mv2/content_scripts/
另外,从您的问题来看,您似乎要使用一个自定义事件,因此您的content_scripjs将类似于以下内容

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);
lsmepo6l

lsmepo6l2#

对于任何在2023年阅读到这篇文章的人来说,sendMessage方法已经转移到了chrome.runtime.sendMessage
参见清单v3(MV3)的文档:https://developer.chrome.com/docs/extensions/mv3/messaging/

相关问题