1. はじめ

Google Chrome 拡張機能の開発では、異なるコンポーネント間でデータをやり取りするために chrome.runtime.onMessage と chrome.runtime.sendMessage を使用します。
これにより、ポップアップ、コンテンツスクリプト、バックグラウンドスクリプトなどの部分が連携し、拡張機能がより強力になります。

2. onMessage: メッセージの受信

chrome.runtime.onMessage は、メッセージを受信するためのイベントリスナーです。以下は基本的な使い方です。

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  // 受信したメッセージに対する処理をここに書く
  console.log(request);

  // 応答が必要な場合、sendResponseを使用して返信
  sendResponse({ result: "Message received successfully!" });
});

このリスナーは、他の部分からメッセージが送信されたときに呼び出されます。
request パラメータには送信されたメッセージが含まれ、sendResponse 関数を使用して応答を返すことができます。

3. sendMessage: メッセージの送信

chrome.runtime.sendMessage は、他の部分にメッセージを送信するためのメソッドです。

chrome.runtime.sendMessage(
  { greeting: "Hello from content script!" },
  function (response) {
    console.log(response.result);
  }
);

これはコンテンツスクリプトがメッセージを送信しています。第一引数には送信するメッセージオブジェクトがあり、第二引数には応答がある場合のコールバック関数を指定できます。

4.使用例

以下は、一般的な Chrome 拡張の使用例です。この例では、ポップアップスクリプトがコンテンツスクリプトにメッセージを送信し、コンテンツスクリプトがそのメッセージを受け取ってページ上の特定の要素を操作するという流れを示しています。

  1. manifest.json の定義
{
  "manifest_version": 3,
  "name": "MessageExample",
  "version": "1.0",
  "description": "Example Chrome Extension for Messaging",
  "permissions": ["activeTab"],
  "action": {
    "default_icon": "icon128.png",
    "default_popup": "popup.html"
  },
  "icons": {
    "128": "icon128.png"
  },
  "background": {
    "service_worker": "background.js"
  }
}
  1. ポップアップ HTML (popup.html):
<!-- popup.html -->

<!DOCTYPE html>
<html lang="jp">
  <head>
    <title>Popup</title>
    <script src="popup.js"></script>
  </head>
  <body>
    <button id="button">Send Message</button>
  </body>
</html>
  1. ポップアップスクリプト (popup.js):
// popup.js
document.addEventListener("DOMContentLoaded", function () {
  // ポップアップがクリックされたときの処理
  document.getElementById("button").addEventListener("click", function () {
    // メッセージをコンテンツスクリプトに送信
    chrome.runtime.sendMessage(
      { message: "Hello from popup!" },
      function (response) {
        alert(response.result);
      }
    );
  });
});
  1. バックグラウンドスクリプト (background.js):
// background.js

// メッセージを受け取ったときの処理
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  if (request.message === "Hello from popup!") {
    // 応答を送信
    sendResponse({
      result: "Message received and processed by background script!",
    });
  }
});

これで、Chrome 拡張機能のメッセージングについて基本的な理解が得られたはずです。詳細な情報は公式ドキュメントを参照してください。