chrome.tab.sendRequest の代わりに chrome.runtime.sendMessage を使う

ChromeExtensions JavaScript

Chrome 33 以降、chrome.tabs.sendRequest は非推奨になった。

Deprecated since Chrome 33. Please use runtime.sendMessage.

代わりに、chrome.runtime.sendMessage を使うことが推奨された。

background が content_script から outerHTML を取得する拡張機能を例に説明する。

chrome.tabs.sendRequest を使う悪い例

background が chrome.tabs.sendRequest を送信する。 コールバックを受信し、結果をログに表示する。

  • https://developer.chrome.com/extensions/tabs#method-sendRequest chrome.tabs.sendRequest(integer tabId, any request, function responseCallback)

    • tabId: 現在のタブに対するリクエストの場合は、null を指定する。

    • request: 任意の仮想配列を指定する。

    • responseCallback: 【省略可能】コールバックを指定する。 function(any response) {...}

  chrome.tabs.sendRequest(null, {
    method: "getOuterHTML"
  }, function(response) {
    console.log(response.data);
  });

content_script は、background からのリクエストを受けて、 第三引数 sendResponse に結果（outerHTML）を指定してコールバックする。

chrome.extension.onRequest.addListener(
    function(request, sender, sendResponse) {
  switch (request.method) {
  case "getOuterHTML":
    sendResponse({
      data: document.all[0].outerHTML
    });
    break;
  default:
    sendResponse({});
    break;
  }
});

chrome.tabs.sendMessage を使う良い例

chrome.tabs.sendRequest は chrome.runtime.sendMessage に置き換えることができる。

background が chrome.runtime.sendMessage を送信する。 コールバックを受信し、結果をログに表示する。

  • https://developer.chrome.com/extensions/runtime#method-sendMessage chrome.runtime.sendMessage(string extensionId, any message, object options, function responseCallback)

    • extensionId: 【省略可能】拡張機能ID。

    • message: 任意の仮想配列を指定する。

    • options: 【省略可能】現時点ではTLSチャンネルIDを指定できる。

    • responseCallback: 【省略可能】コールバックを指定する。 function(any response) {...}

  chrome.tabs.sendRequest(null, {
    method: "getOuterHTML"
  }, function(response) {
    console.log(response.data);
  });

content_script は、background からのリクエストを受けて、 第三引数 sendResponse に結果（outerHTML）を指定してコールバックする。

chrome.runtime.onMessage.addListener(
    function(message, sender, sendResponse) {
  switch (request.method) {
  case "getOuterHTML":
    sendResponse({
      data: document.all[0].outerHTML
    });
    break;
  default:
    sendResponse({});
    break;
  }
});

参考記事

本文中に記載。