Chrome扩展消息重复触发问题：popup发送消息被content.js重复接收

嘿，这个问题我之前踩过好几次坑！明明只发了一次消息，却收到好几条日志，确实挺让人头疼的。结合我的经验，大概率是这几个原因导致的，咱们一个个排查：

1. Content.js被重复注入了 #

这是最常见的原因！如果你的扩展匹配规则写得太宽泛（比如"<all_urls>"），或者页面是SPA（单页应用）会动态刷新内容，甚至页面里有多个匹配你规则的iframe，都会导致content.js被多次注入到同一个页面的不同上下文里。每个注入的实例都会监听onMessage，所以每次popup发消息，所有实例都会响应。

排查方法： #

在content.js的最顶部加一行日志：

console.log('Content script loaded! Instance ID:', Math.random());

刷新页面后看控制台，如果出现多条这个日志，就说明确实被重复注入了。

解决办法： #

• 加单例锁：在content.js开头加判断，确保只运行一次：

  if (window.contentScriptRan) return;
  window.contentScriptRan = true;
  
  // 后面的监听逻辑放在这里
  chrome.runtime.onMessage.addListener((msg) => {
    console.log('message received');
    // 你的处理代码
  });
  

• 排除iframe：如果是iframe导致的，在content.js里判断是否是顶层页面：

  if (window.top !== window.self) return; // 只在顶层页面运行
  

• 收紧匹配规则：在manifest.json里把content_scripts的matches改成更精准的路径，避免不必要的页面注入。

2. OnMessage监听器被多次绑定 #

如果你的chrome.runtime.onMessage.addListener代码放在了某个会重复执行的函数里（比如DOMContentLoaded的回调被多次触发，或者放在了监听scroll/resize这类高频事件的回调里），每次执行都会新增一个监听器，同一个消息就会被多个监听器处理。

解决办法： #

把监听器绑定代码放在content.js的最外层（全局作用域），不要嵌套在任何会重复执行的函数里。如果必须动态绑定，记得先移除旧的监听器：

// 先定义监听函数
function handleMessage(msg) {
  console.log('message received');
}

// 移除旧的（如果有的话）再添加新的
chrome.runtime.onMessage.removeListener(handleMessage);
chrome.runtime.onMessage.addListener(handleMessage);

3. 检查Popup的发送逻辑 #

虽然你说发送前只打印了一次“sending message”，但还是可以确认下：是不是Popup页面在打开时被意外刷新了？或者发送消息的代码被绑定了多次点击事件？比如如果是按钮点击发送，是不是用了addEventListener但没做防抖，导致多次触发发送？

可以在Popup的发送代码里加个计数：

let sendCount = 0;
document.getElementById('send-btn').addEventListener('click', () => {
  sendCount++;
  console.log(`sending message, count: ${sendCount}`);
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    chrome.tabs.sendMessage(tabs[0].id, {text: 'hello'});
  });
});

如果sendCount每次点击只增加1，那发送逻辑没问题，还是接收端的问题。

按上面的步骤排查，应该能很快找到问题所在！

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