Chrome扩展：如何从上下文工作线程创建新窗口并发送数据

核心问题梳理 #

• 消息发送API误用：你错误使用了chrome.runtime.sendMessage，向特定Tab发送消息应该用chrome.tabs.sendMessage
• 脚本类型误解：summary.js是页面内嵌入脚本，属于扩展上下文，不是内容脚本，它可直接操作DOM并调用Chrome扩展API

代码修正步骤 #

1. 上下文工作线程代码修正 #

替换错误的消息发送API，并添加Tab加载完成的等待逻辑，避免消息因页面未就绪丢失：

const newWindow = await chrome.windows.create({
  url: "../summary/summary.html",
});
const targetTabId = newWindow.tabs[0].id;

// 等待目标Tab加载完成
await new Promise(resolve => {
  const listener = (tabId, changeInfo) => {
    if (tabId === targetTabId && changeInfo.status === 'complete') {
      chrome.tabs.onUpdated.removeListener(listener);
      resolve();
    }
  };
  chrome.tabs.onUpdated.addListener(listener);
});

// 向目标Tab发送消息
chrome.tabs.sendMessage(
  targetTabId,
  {
    action: "setData",
    data: "你的业务数据内容"
  }
)
.then(() => console.log("消息发送成功"))
.catch(e => console.error("消息发送失败：", e));

2. 修正summary.js的DOM选择错误 #

你的HTML中DOM节点id是dummy，但JS里误用了content，需统一：

chrome.runtime.onMessage.addListener((msg, sender) => {
  console.log("summary.js收到消息");
  if (msg.action === "setData") {
    console.log("收到的数据：", msg.data);
    // 匹配HTML中的DOM节点id
    document.getElementById("dummy").innerHTML = msg.data;
  }
});

关键概念澄清 #

• 页面嵌入脚本：像summary.js这种直接通过<script>标签嵌入扩展本地HTML的脚本，属于扩展上下文，无需在manifest.json中声明，可直接调用Chrome扩展API、操作页面DOM。
• 内容脚本：是注入到第三方网页的隔离脚本，仅能访问部分Chrome API，和页面其他脚本通信需用postMessage，你的场景完全不需要使用内容脚本。

额外注意事项 #

• 若需要监听Tab状态，需在manifest.json中声明tabs权限：

{
  "permissions": ["tabs"]
}

• 若上下文工作线程是服务工作线程，需确保其处于活跃状态，避免发送消息时被浏览器回收。

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