选项页存在onMessage监听器时，内容脚本sendMessage返回null

你遇到的这个问题，核心是对runtime.sendMessage的广播机制理解有偏差：当内容脚本调用browser.runtime.sendMessage发消息时，这条消息会被推送给所有注册了browser.runtime.onMessage监听器的上下文——包括后台脚本、打开的选项页、其他内容脚本，可不是只发给后台脚本。

根据浏览器扩展API的规则：多条监听器收到同一条runtime.sendMessage消息时，只有第一个返回响应（或Promise）的监听器的结果会被返回给发送者，后续监听器的处理会直接被浏览器忽略。

你的选项页注册了browser.runtime.onMessage监听器，但它没有区分消息类型——当内容脚本发往后台的消息过来时，选项页的监听器可能直接返回了null（或者没做处理就结束了），导致内容脚本收到的是选项页监听器的null响应，后台脚本的正确响应反而被跳过了。关闭选项页后，它的监听器被销毁，消息只能被后台监听器处理，自然就恢复正常了。

要解决这个问题，核心是让每个上下文的runtime.onMessage监听器只处理自己负责的消息类型，对其他消息直接忽略（不返回任何响应），这样浏览器会自动把消息传递给下一个合适的监听器。

具体要做这几件事：

1. 给所有消息添加类型标识：不管是内容脚本发给后台的请求，还是后台发给选项页的进度更新，都要在消息对象里加一个type字段，比如{type: 'content-request', ...}、{type: 'progress-update', progress: 50}。

2. 选项页监听器只处理进度更新：选项页的runtime.onMessage监听器收到消息后，先判断type是否为progress-update，是的话处理进度，否则直接返回undefined（别返回null，也别调用sendResponse），让浏览器继续把消息传给后台监听器。

3. 后台监听器只处理内容脚本请求：后台的runtime.onMessage监听器同样先判断type，只处理content-request类型的消息，其他消息直接忽略。

内容脚本（发送消息给后台） #

// 给消息添加类型标识
browser.runtime.sendMessage({
  type: 'content-request',
  data: '需要后台处理的内容'
}).then(response => {
  if (response) {
    console.log('收到后台响应:', response);
  } else {
    console.error('响应为null');
  }
});

后台脚本（处理内容请求 + 给选项页发进度） #

// 监听内容脚本的请求，只处理指定类型
browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'content-request') {
    // 处理内容脚本的请求
    const result = '后台处理后的结果';
    sendResponse(result);
    return true; // 如果是异步处理，需要返回true保留通道
  }
  // 其他类型消息直接忽略，不返回响应
});

// 假设这是选项页触发的耗时操作
async function longRunningOperation(optionsTabId) {
  for (let i = 0; i <= 100; i++) {
    // 给选项页发送进度更新，指定消息类型
    await browser.tabs.sendMessage(optionsTabId, {
      type: 'progress-update',
      progress: i
    });
    await new Promise(resolve => setTimeout(resolve, 3000)); // 模拟耗时操作
  }
}

选项页（监听进度更新） #

// 只处理进度更新类型的消息
browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'progress-update') {
    console.log('当前进度:', message.progress + '%');
    // 这里不需要返回响应，因为是后台主动推送的消息
    return;
  }
  // 其他消息直接忽略，不返回任何内容（关键！）
});

// 触发后台的耗时操作（先获取自己的tab ID）
async function startLongOperation() {
  const [currentTab] = await browser.tabs.query({active: true, currentWindow: true});
  await browser.runtime.sendMessage({
    type: 'start-operation',
    tabId: currentTab.id
  });
}

• 不要在非目标上下文的监听器中返回任何响应（包括null），否则会抢占消息的处理权。
• 如果后台的处理是异步的，记得在监听器里返回true，这样sendResponse可以在异步操作完成后调用。
• 一定要确认选项页的监听器没有意外处理其他类型的消息，这是最容易踩坑的点。

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