Chrome拡張機能のChrome APIで内部通信でハマってしまったので備忘残す

概要

Chrome拡張機能で開発するcontent.js、popup.js、background.js間の通信方法の初歩的なところにガッツリハマってしまったので備忘として残す。

イベントの定義

イベントの定義自体はcontent.jsもbackground.jsも同じ

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  switch(request.name) {
    case "hello":
      sendResponse({ text: "say hello" });
      break;
    case "bye":
      sendResponse({ text: "say bye" });
      break;
    default:
      break;
  }
});

イベント呼び出し方

イベントの呼び出し方が対象に応じて異なる。

content.js

content.jsはタブ毎に読み込まれているためどのタブのイベントをキックするかを指定する必要がある。

具体的には以下のようにイベントをキックする必要がある。

$("#btn").on("click", () => {
  chrome.tabs.query({active:true, currentWindow:true}, function(tabs){
    chrome.tabs.sendMessage(tabs[0].id, { name: "hello" }, function (response) {
      window.alert(response.text); 
    });
  })
});

background.js

background.jsはブラウザで読み込まれているため、タブの指定が不要。
具体的には以下のようにイベントをキックする。

$("#btn").on("click", () => {
  chrome.runtime.sendMessage({ name: "hello" }, function (response) {
    window.alert(response.text);
  });
});