バックグラウンドとコンテントスクリプト間のデータのやり取り

Chrome拡張機能におけるバックグラウンドスクリプトとコンテントスクリプトの間の通信は、拡張機能の機能を分離しつつ連携させるために重要な仕組みです。以下にその仕組みと実装方法を詳しく説明します。

---

1. 通信の目的

• コンテントスクリプトはWebページのDOMにアクセスできますが、拡張機能の権限を持ちません。

• バックグラウンドスクリプトは高い権限を持ちますが、WebページのDOMに直接アクセスできません。

このため、両者の役割を分離し、必要に応じてメッセージ通信で情報をやり取りします。

---

2. 通信方法の概要

バックグラウンドとコンテントスクリプトの間では、以下のメソッドで通信します：

• chrome.runtime.sendMessage()

• chrome.runtime.onMessage.addListener()

• chrome.tabs.sendMessage()

---

3. 通信の例

コンテントスクリプトからバックグラウンドへの通信

content_script.js

javascript
chrome.runtime.sendMessage({ action: "getData" }, function(response) {
  console.log("バックグラウンドからの応答:", response);
});

background.js

javascript
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action === "getData") {
    const data = { message: "これはバックグラウンドからのデータです" };
    sendResponse(data);
  }
  return true; // 非同期でレスポンスを返す場合に必要
});

---

バックグラウンドからコンテントスクリプトへの通信

この場合は、対象タブを指定して chrome.tabs.sendMessage を使います。

background.js

javascript
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
  chrome.tabs.sendMessage(tabs[0].id, { action: "highlight" }, function(response) {
    console.log("コンテントスクリプトからの応答:", response);
  });
});

content_script.js

javascript
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action === "highlight") {
    document.body.style.backgroundColor = "yellow";
    sendResponse({ status: "完了" });
  }
});

---

4. 注意点

• sendResponseの使用後に非同期処理をする場合はreturn trueを忘れずに書く。

• コンテントスクリプトはページの読み込み後に注入されるため、通信前に注入が完了している必要があります。

• 必要に応じてpermissionsやhost_permissionsで対象ドメインを許可する必要があります。

---

5. まとめ