昨天介紹了 extension Message Passing 的方法
今天想就 三方溝通範例：content ⇔ background ⇔ popup 詳細說明

三方溝通範例

1. Content Script → Background

// content_script.js
chrome.runtime.sendMessage({ action: "GET_PROJECT_KEY" }, (response) => {
  console.log("從 background 收到:", response.projectKey);
});

2. Background 監聽 Content Script

// background.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === "GET_PROJECT_KEY") {
    const projectKey = extractProjectKeyFromUrl(sender.tab.url);
    sendResponse({ projectKey });
  }
});

3. Popup 向 Background 請求資料

// popup.html
document.getElementById("getKeyBtn").addEventListener("click", () => {
  chrome.runtime.sendMessage({ action: "FETCH_KEY" }, (response) => {
    document.getElementById("output").innerText = response.projectKey;
  });
});

4. Background 回應 Popup 並串接 Content Script

// background.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === "FETCH_KEY") {
    // 透過 tabs 與當前作用中的頁籤互動
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      chrome.tabs.sendMessage(tabs[0].id, { action: "GET_PROJECT_KEY" }, (resp) => {
        sendResponse({ projectKey: resp?.projectKey || "未知專案" });
      });
    });
    return true; // 必須 return true 才能啟用 async sendResponse
  }
});

常見注意事項

• 非同步處理: Background 中的 sendResponse 必須 return true，否則 callback 無效。
• 訊息格式: 建議使用 { action: string, data: object } 統一格式，方便 debug 與擴充。
• 多頁籤支援: 若同時開啟多個專案頁籤，應透過 sender.tab.id 或 chrome.tabs.query 來辨識來源。

延伸設計

• 建立一個 訊息路由器 (message router)，集中管理不同 action。
• 使用 chrome.storage.local 做跨頁籤狀態同步，避免 popup 關掉就遺失資料。

參考來源

• Chrome 官方文件（Message Passing）