3.3 メッセージング

メッセージングとは

拡張機能の各コンポーネント間でデータをやり取りする仕組み。

ワンタイムメッセージ

// 送信（Content/Popup → Service Worker）
const response = await chrome.runtime.sendMessage({ action: 'getData' });

// 受信（Service Worker）
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.action === 'getData') {
    fetchData().then(data => sendResponse({ data }));
    return true; // 非同期応答
  }
});

// タブへ送信（Service Worker → Content）
await chrome.tabs.sendMessage(tabId, { action: 'update' });

長期接続（Port）

// 接続を開く
const port = chrome.runtime.connect({ name: 'myChannel' });
port.postMessage({ type: 'hello' });
port.onMessage.addListener((msg) => console.log(msg));

// 受け入れ側
chrome.runtime.onConnect.addListener((port) => {
  port.onMessage.addListener((msg) => {
    port.postMessage({ type: 'response' });
  });
});