tabs.sendMessage を使ったタブとの通信

chrome.tabs.sendMessageは、拡張機能のバックグラウンドスクリプトやポップアップスクリプトから特定のタブ上のコンテントスクリプトへメッセージを送信するためのAPIです。これは、拡張機能の異なるコンポーネント間で情報をやり取りする際に非常に重要な手段です。

---

基本構文

javascript
chrome.tabs.sendMessage(tabId, message, options?, callback?)

パラメータ:

• tabId: メッセージを送信したいタブのID（整数）。

• message: 送信するデータ（任意のJSON互換オブジェクト）。

• options（省略可）: オプション（例: frameId を指定してフレームを特定）。

• callback（省略可）: コンテントスクリプトからの応答を処理する関数。

---

使用例

1. バックグラウンドスクリプトから現在のアクティブタブにメッセージを送る

javascript
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
  chrome.tabs.sendMessage(tabs[0].id, { action: "highlight" }, function (response) {
    console.log("Response from content script:", response);
  });
});

---

2. コンテントスクリプト側での受信処理

javascript
chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  if (message.action === "highlight") {
    // ページ内の要素をハイライトするなどの処理
    sendResponse({ result: "ハイライト完了" });
  }
});

---

主な用途

• ポップアップボタンを押したときに、現在表示中のタブ内のDOMを操作する。

• バックグラウンドスクリプトが何らかの処理（例: タイマーやイベント）をトリガーし、タブ内でアクションを実行させる。

---

注意点

1. 事前に content script を対象タブに注入しておく必要があります。

   • manifest.json にて "content_scripts" を定義するか、chrome.scripting.executeScript で動的に注入する必要があります。

2. 非アクティブタブや存在しないタブに送るとエラーになります。

   • chrome.runtime.lastError を確認してエラー処理を行うことが推奨されます。

javascript
chrome.tabs.sendMessage(tabId, { action: "test" }, function(response) {
  if (chrome.runtime.lastError) {
    console.error("Error:", chrome.runtime.lastError.message);
  } else {
    console.log("Response:", response);
  }
});

---

runtime.sendMessage との違い

---

まとめ

• chrome.tabs.sendMessageは、拡張機能の外部からタブ内のスクリプトにメッセージを送る手段。

• 通常、バックグラウンドやポップアップから、コンテントスクリプトに対する命令送信に用いる。

• タブ操作やDOM制御と組み合わせて、ユーザー操作に動的に反応させる用途に最適です。