Chrome扩展background向devtools面板页传递消息失败解决方案

问题根因 #

你的代码存在三个核心错误，导致消息链路完全不通：

• 长连接建立方向完全写反：chrome.runtime.connect() 是连接发起方调用的接口，消息接收方需要通过chrome.runtime.onConnect监听接入的连接。你在background中主动调用connect，相当于background主动向外发起连接找目标，而非等待devtools接入。且devtools panel是用户打开开发者工具对应面板时才会临时创建的上下文，background没有权限主动定位到该上下文发起连接。
• 消息API场景错配：chrome.tabs.sendMessage() 仅能向对应标签页注入的content script发送消息，devtools panel不属于标签页内容上下文，永远无法收到该接口推送的消息。
• 前置报错导致监听器未生效：你在panel.js开头直接使用未定义的devtoolsPort变量，会直接抛出ReferenceError引用错误，后续写的所有消息监听逻辑根本没有执行机会，自然不会触发console打印。

正确实现方案 #

DevTools上下文和background通信的固定规则是：必须由DevTools侧主动发起长连接，background侧负责监听接入的连接，background无法主动向DevTools发起连接。

background.js 代码 #

// 存储所有已接入的DevTools面板连接
const activeDevtoolsPorts = new Set();

// 监听连接接入，不要在background里主动调用connect
chrome.runtime.onConnect.addListener((port) => {
  // 过滤来自DevTools面板的连接，端口名可自定义，两侧保持一致即可
  if (port.name === 'devtools-panel-channel') {
    activeDevtoolsPorts.add(port);

    // 端口断开时清除引用，避免内存泄漏
    port.onDisconnect.addListener(() => {
      activeDevtoolsPorts.delete(port);
    });

    // 接收DevTools侧发过来的消息
    port.onMessage.addListener((message) => {
      console.log('background收到DevTools消息：', message);
    });
  }
});

// 给DevTools发消息的工具方法
function sendToDevtools(message) {
  activeDevtoolsPorts.forEach(port => {
    port.postMessage(message);
  });
}

panel.js（DevTools面板侧）代码 #

// 主动向background发起长连接，端口名和background侧的判断规则一致
const devtoolsPort = chrome.runtime.connect({
  name: 'devtools-panel-channel'
});

// 监听background推送的消息
devtoolsPort.onMessage.addListener((message) => {
  console.log('DevTools面板收到消息：', message);
});

// 可选：监听连接断开事件做重连或提示逻辑
devtoolsPort.onDisconnect.addListener(() => {
  console.log('与background的连接已断开');
});

额外注意事项 #

• 不要尝试用短连接chrome.runtime.onMessage实现background主动推消息给DevTools：短连接机制下background无法拿到DevTools上下文的专属id，没法定向推送，只有DevTools主动给background发短消息可以走这个接口，反向主动推送必须靠上面的长连接方案。
• 调试的时候注意切换上下文看日志：background的日志要在扩展管理页的service worker/background页调试工具里看，DevTools面板的日志要在你自己打开的DevTools面板的调试工具里看（可以在DevTools里按Ctrl+Shift+I打开面板本身的devtools），别找错日志位置以为代码没执行。

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