Chrome扩展中从注入脚本向后台脚本发送消息异常：添加扩展ID后监听器未触发

看起来你遇到的问题主要有两个核心点：发送消息的脚本上下文混淆，以及后台脚本存在语法错误。下面分两种常见场景给你对应的解决方案：

场景1：消息来自你注入的Content脚本（推荐方案） #

你用chrome.tabs.executeScript注入的content.js属于扩展的一部分，它和后台脚本处于同一个扩展上下文，不需要额外指定扩展ID。之前的错误提示是因为你可能把发送消息的代码写到了网页自身的test.js里（而非注入的content脚本），才会要求必须传扩展ID。

修复步骤： #

1. 调整Content脚本的消息发送代码：
   把发送消息的逻辑放到你注入的content.js里，直接调用chrome.runtime.sendMessage即可：

   // content.js 中的代码
   chrome.runtime.sendMessage({ text: "am I connected?" });
   

2. 修复后台脚本的语法错误：
   你的后台脚本里有明显的括号不匹配问题，这会导致监听器根本无法注册成功。修复后的代码如下：

   // 后台脚本（background.js 或 service-worker.js）
   chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
     chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
       console.log('connected?');
       if (msg.text == "am I connected?") {
         // 这里写你的业务逻辑，比如：
         console.log("成功收到Content脚本的消息！");
       }
     }); // 补全 chrome.tabs.query 的回调函数闭合括号
   }); // 补全 addListener 的回调函数闭合括号
   

3. 验证Content脚本是否正确注入：
   在content.js开头加一句日志，确认脚本确实被注入到目标页面：

   console.log("✅ Content脚本已成功注入页面");
   

场景2：消息来自网页自身的脚本（比如你的test.js） #

如果你确实需要让网页原生脚本和扩展后台通信，那需要额外配置扩展的manifest.json，并调整后台的监听器：

1. 配置manifest.json的externally_connectable：
   这一步是允许指定域名的网页向你的扩展发送消息，比如本地测试的话可以配置http://localhost/*：

   // manifest.json
   {
     "manifest_version": 3, // 如果你用的是Manifest V2，改成2即可
     "externally_connectable": {
       "matches": ["http://localhost/*"] // 替换成你需要允许的网页域名
     },
     // 其他扩展配置（比如background、permissions等）...
   }
   

2. 后台脚本改用onMessageExternal监听器：
   专门处理来自外部网页的消息，同时确保语法正确：

   chrome.runtime.onMessageExternal.addListener(function (msg, sender, sendResponse) {
     console.log("收到外部网页的消息:", msg);
     if (msg.text == "am I connected?") {
       // 处理逻辑，比如回复消息
       sendResponse({ status: "已成功连接到扩展后台" });
     }
   });
   

3. 网页脚本发送消息时带扩展ID并添加回调：
   加上回调可以确认是否收到后台的回复：

   // 网页的test.js中的代码
   chrome.runtime.sendMessage(
     'jlebkcopkekjggkknplilgflekifmjkp',
     { text: "am I connected?" },
     function(response) {
       console.log("后台回复:", response);
     }
   );
   

额外排查点 #

• 打开Chrome扩展管理页面，进入你的扩展的“背景页”（Manifest V2）或“服务工作者”（Manifest V3），查看控制台是否有语法错误或其他报错——后台脚本如果加载失败，监听器肯定无法工作。
• 确认扩展处于“已启用”状态，并且没有被Chrome的开发者模式限制。

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