Chrome扩展中如何从Service Worker创建可postMessage通信的沙箱窗口

前置manifest配置（MV3版本） #

先完成扩展基础配置，确保沙箱页面和Service Worker的权限符合要求：

{
  "manifest_version": 3,
  "name": "Sandbox通信Demo",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["tabs"],
  "sandbox": {
    "pages": ["sandbox.html"],
    // 此处可自定义沙箱的内容安全策略
    "content_security_policy": "sandbox allow-scripts; script-src 'self' 'unsafe-inline'; default-src 'self'"
  }
}

核心实现逻辑 #

整体思路是先用chrome.windows.create打开沙箱窗口，待沙箱页面加载完成后，通过Service Worker的Client API建立双向postMessage通信链路。

Service Worker（background.js）代码 #

// 打开沙箱窗口方法
async function openSandboxWindow() {
  // 创建沙箱窗口
  const win = await chrome.windows.create({
    url: chrome.runtime.getURL("sandbox.html"),
    type: "popup",
    width: 600,
    height: 400
  });
  const sandboxTabId = win.tabs[0].id;
}

// 监听沙箱发来的消息，建立通信
self.addEventListener("message", async (e) => {
  if (e.data.type === "SANDBOX_READY") {
    // 匹配沙箱窗口对应的client
    const allClients = await self.clients.matchAll({ type: "window" });
    const sandboxClient = allClients.find(client => client.url.includes("sandbox.html"));
    if (sandboxClient) {
      // 向沙箱发送消息
      sandboxClient.postMessage({
        type: "FROM_SW",
        content: "这是Service Worker发来的消息"
      });
    }
  }
});

沙箱页面（sandbox.html）代码 #

<!DOCTYPE html>
<html>
<body>
  <script>
    // 页面加载完成后主动向Service Worker发送就绪信号
    if ("serviceWorker" in navigator) {
      navigator.serviceWorker.ready.then(reg => {
        // 发送就绪通知
        reg.active.postMessage({ type: "SANDBOX_READY" });
        // 监听Service Worker发来的消息
        navigator.serviceWorker.addEventListener("message", (e) => {
          console.log("收到Service Worker消息：", e.data);
          // 回复消息
          e.source.postMessage({
            type: "FROM_SANDBOX",
            content: "沙箱已收到消息"
          });
        });
      });
    }
  </script>
</body>
</html>

原方案失败原因说明 #

• window.open 仅存在于Window上下文，Service Worker无全局window对象，天然不支持该方法
• clients.openWindow 有严格的调用时机限制，仅允许在用户交互事件（如通知点击、消息推送回调）中触发，非交互场景调用会直接抛出权限错误
• chrome.windows.create 本身是合法的窗口创建方案，无法通信的核心原因是没有建立正确的双向消息链路，并非该方法不支持通信

注意事项 #

• 沙箱页面路径必须提前在manifest.json的sandbox.pages字段中声明，否则无法作为扩展受信任页面加载，也无法和扩展Service Worker建立通信
• postMessage传递的内容必须符合结构化克隆算法要求，不可序列化内容（如函数、Symbol、DOM节点）无法传递
• 沙箱页面默认无Chrome扩展API调用权限，所有扩展能力调用都需要通过postMessage告知Service Worker，由Service Worker代为执行

内容的提问来源于stack exchange，提问作者Bentley Carr