バックグラウンド スクリプトからコンテンツ スクリプト、さらに挿入されたスクリプトへのメッセージの送信

問題:
バックグラウンド ページからコンテンツ スクリプト、さらに挿入されたスクリプトにメッセージを送信しようとしましたが、プロセスは意図したとおりに動作しませんでした。コンテンツ スクリプトは、バックグラウンド スクリプトからメッセージを受信できません。

解決策:
この問題は、コンテンツ スクリプトの挿入方法に起因して発生します。拡張機能が読み込まれるとき、コンテンツ スクリプトは既存のタブに自動的に挿入されません。インジェクションは、拡張機能が読み込まれた後に新しいタブが作成されたとき、または既存のタブに移動したときにのみ発生します。

解決策 1: 条件付きスクリプト インジェクション
バックグラウンドとコンテンツ間の通信を確保するにはスクリプトでは、条件付きスクリプト インジェクションを使用できます。バックグラウンド スクリプトは、タブがメッセージを受信する準備ができているかどうかを確認し、コンテンツ スクリプトがまだ挿入されていない場合にのみコンテンツ スクリプトを挿入します。

Code:

// Background script
function ensureSendMessage(tabId, message, callback) {
  chrome.tabs.sendMessage(tabId, { ping: true }, function (response) {
    if (response && response.pong) { // Content script ready
      chrome.tabs.sendMessage(tabId, message, callback);
    } else { // No listener on the other end
      chrome.tabs.executeScript(tabId, { file: "content_script.js" }, function () {
        if (chrome.runtime.lastError) {
          console.error(chrome.runtime.lastError);
          throw Error("Unable to inject script into tab "   tabId);
        }
        // OK, now it's injected and ready
        chrome.tabs.sendMessage(tabId, message, callback);
      });
    }
  });
}

コンテンツ スクリプト:

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  if (request.ping) {
    sendResponse({ pong: true });
    return;
  }
  // Content script action
});

解決策 2: 二重実行の防止
もう 1 つの解決策には、コンテンツ スクリプトをタブに挿入しますが、そのスクリプトが複数回実行されることを防ぐための措置を実装することが含まれます。

コード:

// Background script
function ensureSendMessage(tabId, message, callback) {
  chrome.tabs.executeScript(tabId, { file: "content_script.js" }, function () {
    if (chrome.runtime.lastError) {
      console.error(chrome.runtime.lastError);
      throw Error("Unable to inject script into tab "   tabId);
    }
    // OK, now it's injected and ready
    chrome.tabs.sendMessage(tabId, message, callback);
  });
}

コンテンツ スクリプト:

var injected;

if (!injected) {
  injected = true;
  // Your toplevel code
}

解決策 3: 無差別なスクリプト挿入
最後に、拡張機能の初期化時にコンテンツ スクリプトをすべてのタブに挿入することを選択できます。これは、スクリプトが複数回実行されたとき、またはページが読み込まれた後にスクリプト自体に干渉しない場合にのみ推奨されます。

コード:

chrome.tabs.query({}, function (tabs) {
  for (var i in tabs) {
    // Filter by URL if needed
    chrome.tabs.executeScript(tabs[i].id, { file: "content_script.js" }, function () {
      // Now you can use normal messaging
    });
  }
});

これらのソリューションのいずれかが実装されると、メッセージはバックグラウンド スクリプトからコンテンツ スクリプト、そして最終的には挿入されたスクリプトに正常に中継されるようになります。