Chrome扩展：后台脚本与扩展进程/弹窗的持久通信实现

我来帮你理清这两个相关的通信问题：

一、后台脚本向扩展自身转发消息，是否需要手动建立连接？ #

首先要明确：后台脚本本身就是扩展进程的一部分，但它和扩展里的其他组件（比如popup、content script）是相互独立的执行上下文，并没有默认的持久通信通道——不管是不是跨扩展，同一扩展内的不同组件之间通信都需要手动建立连接，或者使用一次性的消息传递方法。

你之前尝试的chrome.runtime.connect('my-extension-id')确实能实现后台和自身扩展的连接，但完全没必要——同一扩展内调用chrome.runtime.connect()时不需要传入扩展ID，默认就会连接到当前扩展。

如果你的需求是把后台通过port收到的消息转发给popup，正确的做法是：

1. 当popup打开时，让popup主动调用chrome.runtime.connect()和后台建立持久连接；
2. 后台在onConnect监听中保存这个port，之后就可以通过这个port持续给popup发消息，或者把收到的其他消息通过这个port转发过去。

二、解决sendResponse只能调用一次，实现后台与popup的持久通信 #

没错，chrome.runtime.onMessage是一次性请求-响应模式，设计上就只允许调用一次sendResponse，如果需要持续传输多条消息，必须使用chrome.runtime.connect建立持久连接。

下面给你完整的代码示例：

后台脚本（background.js） #

// 监听来自其他组件的连接请求
chrome.runtime.onConnect.addListener(function(port) {
  // 用port.name区分不同来源的连接（比如标记来自popup）
  if (port.name === "popup-bg-connection") {
    console.log("已与Popup建立持久连接");

    // 监听Popup发来的消息
    port.onMessage.addListener(function(msg) {
      console.log("后台收到Popup消息：", msg);
      // 可以持续发送多条消息给Popup
      port.postMessage({content: "这是后台的第一条回复"});
      setTimeout(() => {
        port.postMessage({content: "这是后台延迟1秒的第二条回复"});
      }, 1000);
    });

    // 监听连接断开事件（比如Popup关闭时）
    port.onDisconnect.addListener(function() {
      console.log("与Popup的连接已断开");
    });
  }
});

Popup脚本（popup.js） #

// Popup加载时主动与后台建立连接
const bgPort = chrome.runtime.connect({name: "popup-bg-connection"});

// 给后台发送初始消息
bgPort.postMessage({greeting: "Hello 后台！"});

// 监听后台发来的消息
bgPort.onMessage.addListener(function(msg) {
  console.log("Popup收到后台消息：", msg);
  // 这里也可以持续给后台发消息
});

// Popup关闭时连接会自动断开，也可以手动调用bgPort.disconnect()断开

总结 #

• 同一扩展内的不同组件之间没有默认通信通道，需要手动建立连接；
• 单次消息传递用chrome.runtime.sendMessage/onMessage，多条持续消息用chrome.runtime.connect建立持久连接；
• 后台主动给Popup发消息时，要确保Popup处于打开状态且已建立连接，因为Popup关闭后连接会自动断开。

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