ブラウザ拡張機能/アドオン backgroundとcontentScript間でメッセージのやり取り

タブ(ページ)内で実行するコンテンツスクリプトでは、拡張機能固有のストレージやその他APIなど、
使用/実行できないものがあります。なので、コンテンツスクリプトからバックグラウンドへメッセージを送ってバックグラウンドで処理します。
その逆も同じで、タブ内の要素に変更を加えるなど、コンテンツスクリプトで行うような処理に関しては、
バックグラウンドからコンテンツスクリプトにメッセージを送って処理をさせます。

目次

contentScriptからbackgroundにメッセージを送る

runtime.sendMessageを使ってメッセージを送ります。

contentScript.js

// ここでは文字列('hello')でメッセージを送ってますが、オブジェクトでもよい
chrome.runtime.sendMessage('hello', (receive) => {
    // 送り返されるものがなければ、このコールバックは必要ない
    console.log(receive); // sendResponse で送り返された {} 空のObject
});

runtime.onMessage.addListenerでメッセージを受け取ります。

background.js

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    console.log(request); // hello メッセージ
    console.log(sender); // 送られてきたタブに関する情報(タブIDや開いているURL/Titleなど)
    sendResponse({}); // 送り返すべきものがなければ空のObjectを返す
});

backgroundからcontentScriptにメッセージを送る

便宜上、拡張機能(ブラウザアクション)のボタンを押したとき(browserAction.onClicked.addListener)にtabs.sendMessageを使ってメッセージを送っています。

background.js

chrome.browserAction.onClicked.addListener((tab) => {
    chrome.tabs.sendMessage(tab.id, {message : "hello"}, (receive) => {
        // 送信先から送り返されるものがなければ、このコールバックは必要ない
        console.log(receive); // {} 送り返された空のオブジェクト
    });
});

browserAction.onClicked.addListener を使わない場合(何らかのタイミングで)は
送信先のタブのIDが必要なので、tabs.query でアクティブなタブの情報を取得する

chrome.tabs.query({active : true}, (tabs) => {
    chrome.tabs.sendMessage(tabs[0].id, {message : "hello"});
});

runtime.onMessageでバックグラウンドからのメッセージを受け取ります。

contentScript.js

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    console.log(request.message); // hello
    console.log(sender);
    sendResponse({}); // 送り返すものがない場合は空のオブジェクトを送る
});