Chrome扩展中chrome.runtime.onMessage.addListener()多次触发问题求助

这种触发次数逐次累加的问题，核心原因几乎都是监听器被重复注册，以下是针对性的排查和解决方法：

1. 修复Content Script的重复注入/监听器重复注册 #

如果你的content.js被多次注入到同一标签页，每次注入都会新增一个消息监听器，导致后续消息触发所有已注册的监听器。

快速解决方案：在content.js中添加执行守卫 #

在content.js最顶部加入判断，确保监听器只注册一次：

// content.js 开头添加
if (window.videoControlInjected) return;
window.videoControlInjected = true;

// 后续正常注册监听器
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  // 你的本地视频控制逻辑，比如播放/暂停、进度调整等
  switch(message.action) {
    case 'play':
      document.querySelector('video').play();
      break;
    case 'pause':
      document.querySelector('video').pause();
      break;
    // 其他操作
  }
});

动态注入场景的优化（如果用chrome.tabs.executeScript注入） #

如果是在background中动态注入content.js，注入前先检查目标标签页是否已注入脚本：

// background.js 中执行注入的逻辑
chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
  const targetTab = tabs[0];
  chrome.tabs.sendMessage(targetTab.id, {type: 'CHECK_INJECT_STATUS'}, (response) => {
    // 若未注入或注入检测失败，则执行注入
    if (chrome.runtime.lastError || !response?.isInjected) {
      chrome.tabs.executeScript(targetTab.id, {file: 'content.js'});
    }
  });
});

// content.js 中添加检测响应逻辑
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'CHECK_INJECT_STATUS') {
    sendResponse({isInjected: true});
    return true; // 保持消息通道开放，避免异步响应异常
  }
  // 其他消息处理逻辑
});

2. 检查Background Script的监听器注册逻辑 #

如果background.js中的chrome.runtime.onMessage.addListener被放在某个会重复执行的代码块里（比如每次标签页激活事件触发时都重新注册），也会导致多监听器堆积。

解决方法：将监听器注册放在全局作用域，或添加注册守卫 #

// background.js 开头添加
if (chrome.runtime.onMessage._hasRegistered) return;
chrome.runtime.onMessage._hasRegistered = true;

// 全局作用域下注册监听器
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  // 你的消息转发或逻辑处理
  if (message.target === 'video-tab') {
    chrome.tabs.sendMessage(message.tabId, message);
  }
});

3. 额外排查点 #

• 确认扩展没有被重复加载：开发者模式下点击"重新加载扩展"后，关闭所有相关标签页再重新打开，避免旧进程残留；
• 检查manifest.json的content_scripts配置：确保matches规则精准（比如只匹配file:///*本地视频页面），避免不必要的重复注入；
• 消息处理函数中有异步操作时，必须返回true或正确调用sendResponse，避免消息通道异常堆积。

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