移植到Safari的Chrome/Firefox扩展：选项页无法接收Background消息求助

我之前在把Chrome/Firefox扩展移植到Safari时也碰到过类似的消息通信问题，结合我的排查经验，你可以从这几个方向入手：

1. 用错了消息发送API #

browser.tabs.sendMessage的设计目标是给网页标签里的内容脚本发消息，而你的选项页属于扩展内部页面（和后台页面同属扩展上下文），这类页面之间的通信应该用browser.runtime.sendMessage或者browser.runtime.connect（需要长连接场景）。

试试把发送代码改成：

browser.runtime.sendMessage({ message })
  .then(res => console.log("收到响应:", res))
  .catch(err => console.error("发送失败:", err));

选项页的监听代码不用改，看看能不能收到消息。

2. 选项页的Tab ID获取错误 #

你可能误以为拿到的是选项页的Tab ID，但实际可能指向了其他标签。可以先精准定位选项页的Tab：

// 先查询选项页的Tab信息
browser.tabs.query({ url: "safari-web-extension://*/page.html" })
  .then(tabs => {
    if (tabs.length > 0) {
      const targetTab = tabs[0];
      console.log("找到选项页Tab:", targetTab);
      // 用正确的Tab ID发送消息
      browser.tabs.sendMessage(targetTab.id, { message })
        .catch(err => console.error("发送错误:", err));
    } else {
      console.log("选项页未打开");
    }
  });

这里用通配符*匹配扩展的ID部分，因为Safari里扩展的ID在不同环境可能会变化。

3. 选项页的监听代码未正确执行 #

先确认选项页的监听逻辑真的跑起来了：在选项页的脚本里加一行初始化日志：

console.log("选项页脚本加载完成，开始监听消息");
browser.runtime.onMessage.addListener(message => {
  console.log("收到消息:", message);
  return Promise.resolve("已收到消息");
});

打开选项页后，检查Safari的开发者工具控制台有没有输出初始化日志，如果没有，说明选项页的脚本可能没加载，要排查manifest里的options_ui配置是否正确，比如路径是否写错。

4. 未正确捕获Promise错误 #

你说Promise没有返回错误，大概率是因为没加错误捕获逻辑。一定要用.catch()或者try/catch包裹异步操作，这样才能看到具体的错误信息（比如"接收端不存在"这类关键提示）：

// 用async/await的写法
async function sendMessageToOptions() {
  try {
    const tabs = await browser.tabs.query({ url: "safari-web-extension://*/page.html" });
    if (tabs.length === 0) throw new Error("选项页未打开");
    const response = await browser.tabs.sendMessage(tabs[0].id, { message });
    console.log("响应:", response);
  } catch (err) {
    console.error("发送消息出错:", err);
  }
}

5. Safari的上下文隔离或权限问题 #

Safari对扩展的上下文隔离比Chrome/Firefox更严格：

• 确保你的后台页面如果是Service Worker（而非旧版的背景页面），要注意Service Worker的生命周期，只有活跃状态下才能发送消息；
• 检查manifest.json里是否声明了必要的权限，比如tabs权限（用于查询Tab信息）；
• 如果你的选项页是通过browser.windows.create手动打开的，而非browser.runtime.openOptionsPage()，要确保打开的页面确实属于扩展上下文。

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