Chrome 拡張機能: 拡張機能でページ上のイベントをリッスンできますか? 質問する

Chrome 拡張機能: 拡張機能でページ上のイベントをリッスンできますか? 質問する

私は自分のサイト用に 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
})

ベストアンサー1

追加する必要があるコンテンツスクリプト

コンテンツスクリプトDOMに完全にアクセスでき、ページ上のすべてのイベントにバインドできます

これをmenifestファイルに追加するだけです

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

ドキュメントはこちらで読む

また、あなたの質問から、カスタムイベントを扱うつもりのようですので、コンテンツスクリプト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);

おすすめ記事