Manifest V3中Service Worker如何通过sendMessage与Popup脚本通信？

在 Manifest V3 环境下，Popup 属于扩展的临时上下文页面，既不在 chrome.tabs 的查询结果范围内，直接调用 chrome.tabs.sendMessage 无效；之前用 chrome.runtime.sendMessage 报错，是因为 Popup 未注册对应的消息监听器，且仅当 Popup 处于打开状态时监听器才会生效。以下是两种可靠的通信方案：

方案一：建立长连接（适合多次双向通信） #

通过 chrome.runtime.connect 建立持久连接，能稳定实现 Service Worker 与 Popup 的双向通信：

1. Popup 主动发起连接并监听消息

// popup.js
// 与 Service Worker 建立命名连接
const port = chrome.runtime.connect({ name: "popup-sw-connection" });

// 监听来自 Service Worker 的消息
port.onMessage.addListener((message) => {
  console.log("收到 Service Worker 消息：", message);
});

// 可选：告知 Service Worker Popup 已就绪
port.postMessage({ type: "popup_ready" });

// 监听连接断开，清理引用
port.onDisconnect.addListener(() => {
  console.log("与 Service Worker 的连接已断开");
});

2. Service Worker 接收连接并发送消息

// service-worker.js
let popupPort = null;

// 监听 Popup 发起的连接
chrome.runtime.onConnect.addListener((port) => {
  if (port.name === "popup-sw-connection") {
    popupPort = port;
    // 立即发送一条测试消息
    popupPort.postMessage({ type: "greeting", content: "来自 Service Worker 的问候" });

    // 监听连接断开，清空引用
    port.onDisconnect.addListener(() => {
      popupPort = null;
    });
  }
});

// 后续需要发送消息时，先判断连接是否存在
function sendToPopup(message) {
  if (popupPort) {
    popupPort.postMessage(message);
  } else {
    console.log("Popup 未打开或连接已断开");
  }
}

// 调用示例
sendToPopup({ type: "data_update", content: "最新数据内容" });

方案二：单次消息发送（适合临时通知） #

如果只需单次发送消息，可直接使用 chrome.runtime.sendMessage，但需确保 Popup 已注册监听器且处于打开状态：

1. Popup 注册消息监听器

// popup.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  console.log("收到 Service Worker 消息：", message);
  // 可选：回复消息给 Service Worker
  sendResponse({ status: "message_received" });
  // 若异步处理，需返回 true 保持通道开放
  // return true;
});

2. Service Worker 发送消息并处理异常

// service-worker.js
async function sendMessageToPopup(message) {
  try {
    const response = await chrome.runtime.sendMessage(message);
    console.log("Popup 回复：", response);
  } catch (error) {
    // 捕获错误，说明 Popup 未打开或无监听器
    console.log("无法发送消息到 Popup：", error.message);
  }
}

// 调用示例
sendMessageToPopup({ type: "notification", content: "请查看最新通知" });

关键注意事项 #

• Popup 仅在用户点击扩展图标打开时加载，关闭后脚本会被销毁，因此 Service Worker 只能在 Popup 处于打开状态时发送消息。
• 长连接方案更适合需要持续通信的场景（如实时数据同步），单次消息方案则更简洁，适合临时通知类需求。

内容的提问来源于stack exchange，提问作者650aa6a2