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

2022年3月29日2023年3月6日

satoshiii

対象読者

拡張機能について知りたい
バックグランドページでのデータ送受信方法について知りたい

書いてること

送れるデータのタイプ
ページアクション→バックグランドへのデータ送信
バックグランド→ページアクションへのデータ送信

データ送信方法

データの送受信は

Message Passing（メッセージパッシング）

という仕組みを使います。

ただし、こちらは単一送信。送ったら送りっぱなしです。

送ったらその結果を受け取る、、のうような相互送受信を行いたい場合はチャンネルが便利です。別の記事も書きましたのでそちらも参照に。

2022年4月3日【Chrome拡張機能】チャンネルを使った相互通信

使えるデータ

メッセージパッシングでの送受信にはJSON形式を用い、

使えるデータの型は以下です

null
boolean
number
string
array
object

サンプルと動作確認

動作上は特に面白くはないですが、アラートが表示されるだけです。

動きで的には、

ブラウザアクションページ（myscript.js）から「AAAAAA」のメッセージを送る
バックグランドページ（background.js）が「AAAAAA」のメッセージを受け取る
コールバックでブラウザアクションページにメッセージを戻し、アラート表示する

コードと解説

マニフェストファイル

{
  "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月24日【Chrome拡張機能】バックグランドページ

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

JavaScriptファイル

chrome.runtime.sendMessage({
    message: "AAAAAA"
}, function(response) {
    alert(response);
});

sendMessage

このメソッドで、メッセージを送信します。

キー：バリューの形で送ります。
この場合は、キー：message、バリュー：”AAAAAA”。

backgoroud.jsからコールバック関数呼び出し、アラートを表示しています。

chrome.runtime.onMessage.addListener(
    function(request, sender, callback) {  
        callback(request.message);
        return true;
    }
);

addListener

このメソッドで、メッセージを受信します。

requestに、送られたメッセージが
callbackで値を結果を返せます。

ここでは、callbackでmyscript.jsに返却。
request.messageの中に「AAAAAA」が入ってますので、それをそのまま返却してます。

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>