runtime.sendMessage / runtime.onMessage

Chrome拡張機能における chrome.runtime.sendMessage および chrome.runtime.onMessage は、拡張機能内の異なるコンポーネント間（例：コンテントスクリプト、バックグラウンドスクリプト、ポップアップなど）でメッセージを送受信するためのAPIです。このメッセージ通信は、非同期でデータのやり取りを行うために使われます。

1. chrome.runtime.sendMessage

説明

この関数は、メッセージを別のコンポーネント（通常はバックグラウンドスクリプト）に送信します。

構文

javascript
chrome.runtime.sendMessage(message, responseCallback);

パラメータ

  • message: 任意のデータ（オブジェクトや文字列など）

  • responseCallback (省略可能): メッセージ送信先からの応答を受け取るための関数

使用例

javascript
chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
  console.log("Received response:", response.farewell);
});

2. chrome.runtime.onMessage

説明

このイベントリスナーは、他の拡張機能コンポーネントから送信されたメッセージを受信して処理します。

構文

javascript
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
  // 処理
  sendResponse(response); // 応答の送信（省略可）
  return true; // 応答が非同期である場合に必要
});

パラメータ

  • message: 送られてきたメッセージ

  • sender: 送信元に関する情報（タブ情報など）

  • sendResponse: 応答を返すための関数

使用例（バックグラウンドスクリプト）

javascript
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.greeting === "hello") {
    sendResponse({farewell: "goodbye"});
  }
});

3. 応答の非同期処理について

sendResponse を非同期で使う場合、リスナー関数内で return true; を記述する必要があります。これにより、Chromeは応答が非同期で返ってくることを認識します。

非同期応答の例

javascript
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  fetch("https://example.com/api")
    .then(response => response.json())
    .then(data => {
      sendResponse({result: data});
    });
  return true; // 非同期応答を許可
});

4. 使用されるケースの例

  • コンテントスクリプトがユーザーの操作を検知し、バックグラウンドスクリプトに通知する

  • ポップアップが現在のタブの情報をバックグラウンドスクリプトに要求する

  • バックグラウンドスクリプトが応答を返す

5. 注意点

  • 同一拡張機能内でしかメッセージを送受信できません（別拡張機能に送るには chrome.runtime.sendMessage(extensionId, message) の形式が必要）

  • 送信するメッセージはJSONシリアライズ可能なデータにする必要があります

生成日：2025/05/18