Chrome扩展popup/background/devtools多脚本直接通信方案咨询

你之前的实现不生效的核心原因：chrome.runtime.connect 是创建连接的方法，你在监听端自己创建一个命名端口，发送端又单独创建一个同名端口，两个是完全独立的连接，没有关联，自然无法传递消息。

以下是可直接落地的点对点通信实现方案： #

1. 核心逻辑说明 #

Chrome扩展的background脚本是全局常驻的（MV3下为service worker，短时间休眠不影响常规通信），所以我们让所有脚本都先和background建立长连接，由background维护所有活跃连接的映射，收到消息后按照目标标识转发到对应脚本即可。

2. 具体代码实现 #

background.js（全局中转逻辑） #

// 存储所有活跃连接，key为连接名称（popup/devtools）
const activePorts = new Map()

// 监听所有脚本的连接请求
chrome.runtime.onConnect.addListener(port => {
  const senderName = port.name
  // 保存连接
  activePorts.set(senderName, port)

  // 监听消息并转发
  port.onMessage.addListener(message => {
    // 约定消息结构：{ target: 目标脚本名, payload: 消息内容 }
    const { target, payload } = message
    // 目标是background本身直接处理
    if (target === 'background') {
      // 此处写background的消息处理逻辑
      console.log('background收到消息：', payload)
      return
    }
    // 目标连接存在则转发
    if (activePorts.has(target)) {
      activePorts.get(target).postMessage({
        from: senderName,
        payload: payload
      })
    }
  })

  // 连接断开时移除映射
  port.onDisconnect.addListener(() => {
    activePorts.delete(senderName)
  })
})

其他脚本通用逻辑（popup.js/devtools.js通用） #

以popup.js为例，devtools.js只需要修改连接时的name参数即可：

// 初始化连接，name填写当前脚本的标识
const currentPort = chrome.runtime.connect({ name: 'popup' })

// 监听发送到当前脚本的消息
currentPort.onMessage.addListener(message => {
  const { from, payload } = message
  // 此处写当前脚本的消息处理逻辑
  console.log(`收到来自${from}的消息：`, payload)
})

// 封装全局调用的发消息方法
window.sendMessage = (target, payload) => {
  currentPort.postMessage({ target, payload })
}

3. 使用方式 #

和你预期的调用逻辑一致，任意脚本都可以直接向目标脚本发消息：

// devtools给popup发网络请求数据
sendMessage('popup', { type: 'networkLog', data: requestInfo })

// popup给background发指令
sendMessage('background', { type: 'clearLog' })

// background主动给devtools发消息
activePorts.get('devtools')?.postMessage({ from: 'background', payload: xxx })

注意事项 #

• popup只有在用户点击扩展图标打开时才会建立连接，关闭后连接自动销毁，如果你需要保留popup关闭期间产生的消息，可以在background中加临时缓存，等popup下次连接时批量推送
• MV3的background service worker如果休眠，新的消息会唤醒service worker，不影响正常收发
• 如果是一次性消息不需要长连接，也可以用chrome.runtime.sendMessage配合target字段判断处理，逻辑类似

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