【Chrome拡張機能】メッセージパッシング（バックグランドページ→ブラウザアクション）

2022年3月30日2023年3月6日

satoshiii

対象読者

Chrome拡張機能について知りたい方
バックグランドとブラウザアクションなどのデータ送受信方法について知りたい方

サンプルと動作確認

見た目は次々とアラートが表示されるだけの大したことない処理ですが

今回の目玉である、
バックグランドページからメッセージを送信して
ブラウザアクション側で受け取ることをしています。

メッセージのやり取りがわかりやすいように、アラートで順番に表示するようにしています。

コードと解説

ちょっと処理があっち行ったりこっち行ったりしますが、
基本的なことはブラウザアクション→バックグランドページと同じです。

今回作成する処理を、細かく噛み砕くと、、、

ブラウザアクションから、バックグランド側の処理呼び出し
バックグランドからブラウザアクションに向けてメッセージを送信
ブラウザアクション側でメッセージを受信
受信した内容をさらにバックグランド側にコールバック関数で返却
バックグランド側でアラート表示

簡単にまとめると

ブラウザ→バック→ブラウザ→バック

って動きをしてますw

2022年3月29日【Chrome拡張機能】メッセージパッシング（ブラウザアクション→バックグランドページ）

マニフェストファイル

{
  "manifest_version":2,
  "name":"Chrome ex page action",
  "version":"1",
  "permissions":["declarativeContent"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "permissions": [
    "contextMenus",
    "tabs"
  ],
  "browser_action": {
    "default_popup": "popup.html",
    "default_title": "Helloを表示"
  }
}

backgroundとbrowser_actionについてはこちらの記事参照

2022年3月21日【Chrome拡張機能】ブラウザアクション

2022年3月24日【Chrome拡張機能】バックグランドページ

JavaScriptファイル

function backgroundFunction(){
    chrome.runtime.sendMessage({
        message: "BBBBBB"
    }, function(response) {
        alert('backでアラート表示');
        alert(response);
        return true;
    });
};

バックグランド側では、メッセージを受け取ります。

（今回は、コールバックで受け取った後にさらにフォアから受け取ってアラートも表示してます。）

chrome.runtime.onMessage.addListener(
    function(request, sender, callback) {
        alert('backから受け取り');
        callback(request.message);
        return true;
    }
);


window.addEventListener('load', function() {
    alert('load');
    chrome.runtime.getBackgroundPage(function( backgroundPage ){
        alert('back呼び出し');
        backgroundPage.backgroundFunction();
    });
});

window.addEventListener

アイコンタップ時にまず呼び出されます。
loadで読み込みが終わるまで待機、その後メソッドの中身を処理します。

chrome.runtime.getBackgroundPage(function( backgroundPage )

バックグランドページを取得しています。

backgroundPage.backgroundFunction();

バックグランドページ内に記述しているメソッドを呼び出しています。

chrome.runtime.onMessage.addListener

バックグランド側から送信されたメッセージを受信しています。

メソッド内のコールバック関数を使って、さらにバックグランド側にメッセージを返してます。

HTMLファイル

<!DOCTYPE html>
<meta charset="UTF-8" />
<html>
<head>
    <title></title>
    <script type="text/javascript" src="myscript.js"></script>
</head>

<body>

<p id="hello">Hello!</p>

</body>
</html>

こちらは、myscript.jsファイルを読み込んでるだけです。