iOS 15 Safari Web Extension开发：从popup.js向content.js发送消息的实现问题

嘿，我之前开发iOS Safari扩展时也碰到过一模一样的问题，折腾了好一阵子才搞明白症结所在，给你分享下完整的解决方案：

一、修复Popup到Content.js的消息传递逻辑 #

你现在用的browser.runtime.sendMessage()其实是用来和Background Script通信的，而Content Script是注入到具体网页标签页里的独立上下文，所以得换用browser.tabs.sendMessage()，并且指定目标标签页的ID才能准确送达消息。

步骤1：修改Popup.js的按钮点击事件 #

把你的按钮监听代码改成这样，先获取当前活跃的标签页，再给它定向发消息：

document.getElementById('你的按钮ID').addEventListener('click', async () => {
  try {
    // 获取当前窗口的活跃标签页
    const [activeTab] = await browser.tabs.query({ active: true, currentWindow: true });
    
    if (!activeTab) {
      console.error("找不到活跃标签页");
      return;
    }

    // 给目标标签页的Content Script发送消息
    await browser.tabs.sendMessage(activeTab.id, { type: "start" });
    console.log("消息已成功发送到Content.js");
  } catch (err) {
    console.error("发送消息失败：", err);
    // 常见原因：当前标签页未加载Content.js（比如新标签页、非网页页面）
  }
});

步骤2：确保Content.js的监听器正常工作 #

你的Content.js代码本身没问题，但可以加个针对性逻辑确认消息接收：

// 保留原有的监听，增加对"start"类型消息的处理
browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
  console.log("Received request: ", request);
  
  if (request.type === "start") {
    console.log("触发start事件啦！");
    // 这里写你要执行的业务逻辑
    sendResponse({ status: "success" }); // 可选：给Popup回复消息
  }
});

二、解决iOS Safari中Content.js的调试难题 #

iPhone上直接看Content.js的console.log确实很麻烦，推荐两个实用的调试方法：

方法1：用Mac端Safari开发者工具远程调试 #

1. 在Mac上打开Safari，前往偏好设置 -> 高级，勾选在菜单栏中显示“开发”菜单；
2. 用数据线连接你的iPhone，在iPhone的设置 -> Safari浏览器 -> 高级里开启Web检查器；
3. 在Mac的Safari菜单栏点击开发，找到你的iPhone设备，再选择你正在测试的网页标签页，就能在开发者工具里看到Content.js的控制台输出了。

方法2：把Content.js的日志转发到Popup的控制台 #

如果暂时没法用Mac调试，可以让Content.js把日志发回Popup，在Popup的控制台里查看：

// Content.js里修改监听逻辑
browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
  const logMsg = `Content.js收到消息：${JSON.stringify(request)}`;
  console.log(logMsg);
  
  // 把日志发送到Popup
  browser.runtime.sendMessage({ type: "content_log", message: logMsg });
  
  if (request.type === "start") {
    // 你的业务逻辑
  }
});

// Popup.js里添加日志监听
browser.runtime.onMessage.addListener((msg) => {
  if (msg.type === "content_log") {
    console.log("[来自Content.js的日志]", msg.message);
  }
});

三、额外注意事项 #

• 检查Content.js的注入范围：在Xcode的Info.plist里，确保SFSafariWebsiteAccess设置的域名包含你测试的网页（比如设为All允许所有网站）；
• 确认权限：在manifest.json的permissions里添加"tabs"，确保能获取活跃标签页；
• 测试时机：先打开目标网页，再点击扩展Popup发送消息，否则Content.js还没注入到网页中，会导致消息发送失败。

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