Chrome 137扩展后台脚本无法向内容脚本发送消息问题

升级至Chrome 137版本后，扩展程序调用messageBroker.send(proxyMessage, sendResponse)时出现上述错误，但旧版Chrome及Edge浏览器中可正常运行。背景脚本源码如下：

import type { CommandRequest } from '../../interface/command-request';
import type { TabInfoPayload } from '../../interface/tab-info';
import { Message, MessageAgent, PayloadType } from '../../model/message/message';
import { MessageBroker } from '../../model/message/message-broker';

const messageBroker = new MessageBroker(undefined, MessageAgent.BACKGROUND_SCRIPT);

function handleIncomingMessage(message: Message<CommandRequest | TabInfoPayload>, sendResponse: any) {
  console.log('Received message in background script:', message);
  switch (message.payloadType) {
    case PayloadType.COMMAND_REQUEST:
      const { payload } = message as Message<CommandRequest>;
      const proxyMessage = new Message(
        MessageAgent.BACKGROUND_SCRIPT,
        MessageAgent.TARGET_CONTENT_SCRIPT,
        PayloadType.COMMAND_REQUEST,
        payload,
      );

      messageBroker.send(proxyMessage, sendResponse);
      break;

    case PayloadType.TAB_ID: {
      const { payload } = message as Message<TabInfoPayload>;
      const { tabId } = payload;
      if (tabId) {
        messageBroker.setTargetTabId(tabId);
      }
      break;
    }
  }
}

messageBroker.initialize(handleIncomingMessage);

function setTabIdToCaptureHandleConfig(tabId: number) {
  try {
    // @ts-expect-error setCaptureHandleConfig not supported by TypeScript
    navigator.mediaDevices.setCaptureHandleConfig({
      handle: tabId,
      permittedOrigins: ['*'],
    });
  } catch (e) {
    // console.log(e);
  }
}

function onTabUpdated(tabId: number, _changeInfo: chrome.tabs.TabChangeInfo, _tab: chrome.tabs.Tab) {
  console.log('Tab updated:', tabId);
  chrome.scripting.executeScript({
    target: { tabId },
    func: setTabIdToCaptureHandleConfig,
    args: [tabId],
    world: 'MAIN',
  });
}

chrome.tabs.onUpdated.addListener(onTabUpdated);

问题原因分析 #

Chrome 137在扩展内容脚本注入时机、消息传递隔离机制上有隐性调整，常见触发该错误的场景：

• chrome.tabs.onUpdated触发时机提前，导致脚本注入时页面未完全就绪，内容脚本未加载完成就接收消息
• 消息代理的目标Tab ID未做有效性校验，发送到了已关闭或不存在的标签页
• Manifest V3权限校验收紧，内容脚本的消息监听器被隔离机制阻断

修复方案 #

1. 调整脚本注入时机
   修改onTabUpdated逻辑，仅在页面加载完成后注入脚本：

   function onTabUpdated(tabId: number, changeInfo: chrome.tabs.TabChangeInfo, _tab: chrome.tabs.Tab) {
     console.log('Tab updated:', tabId);
     if (changeInfo.status === 'complete') {
       chrome.scripting.executeScript({
         target: { tabId },
         func: setTabIdToCaptureHandleConfig,
         args: [tabId],
         world: 'MAIN',
       });
     }
   }
   

2. 校验目标Tab ID有效性
   在发送消息前验证Tab ID是否存在：

   case PayloadType.COMMAND_REQUEST:
     const { payload } = message as Message<CommandRequest>;
     const targetTabId = messageBroker.getTargetTabId(); // 假设存在获取Tab ID的方法
     if (!targetTabId) {
       sendResponse({ error: '目标Tab ID未设置' });
       return;
     }
     chrome.tabs.get(targetTabId, (tab) => {
       if (chrome.runtime.lastError || !tab) {
         sendResponse({ error: '无效的目标Tab' });
         return;
       }
       const proxyMessage = new Message(
         MessageAgent.BACKGROUND_SCRIPT,
         MessageAgent.TARGET_CONTENT_SCRIPT,
         PayloadType.COMMAND_REQUEST,
         payload,
       );
       messageBroker.send(proxyMessage, sendResponse);
     });
     break;
   

3. 确认内容脚本监听器配置
   确保内容脚本中正确注册消息监听器，并保持连接支持异步响应：

   chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
     if (message.source === MessageAgent.BACKGROUND_SCRIPT && message.payloadType === PayloadType.COMMAND_REQUEST) {
       // 处理消息逻辑
       sendResponse({ success: true });
     }
     return true; // 异步响应时需返回true保持连接
   });
   

4. 检查Manifest权限
   确认manifest.json中的host_permissions覆盖了所有需要注入脚本的网站，避免权限不足导致脚本注入失败。

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