Chrome扩展:让一个扩展监听页面上的事件

Chrome extension: have an extension listen for an event on a page?

本文关键字：扩展 监听 事件 一个 Chrome      更新时间：2023-09-26

我为我的网站制作了一个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，并且可以绑定到页面上的所有事件

只需将其添加到menifest文件

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

你可以获得更多信息https://developer.chrome.com/docs/extensions/mv2/content_scripts/

从你的问题来看，你似乎要处理一个自定义事件，所以你的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/

相关文章：