如何从React应用向Chrome MV3扩展发送消息并解决runtime undefined报错

云原生阿岚

2026-10-4

修复步骤

修正manifest.json配置
首先替换externally_connectable内的占位符与规则：

把ids数组里的extension_id替换为你的扩展真实ID，可在Chrome扩展管理页开启开发者模式后查看
matches规则末尾添加通配符，覆盖React应用所有路径："matches": ["http://localhost:3001/*"]
补充MV3必填的background配置，确保监听代码能加载：

"background": {
  "service_worker": "background.js"
},

修改完后一定要在扩展管理页刷新扩展，让配置生效。

调整React侧代码
首先添加运行时判断，避免用户未安装扩展时直接报错，同时修正传参格式：

function test() {
  const extensionId = '替换为你的真实扩展ID';
  const session = "session";
  // 先判断chrome和runtime是否存在
  if (typeof chrome !== "undefined" && chrome?.runtime) {
    // 传对象而非纯字符串，匹配Background的判断逻辑
    chrome.runtime.sendMessage(extensionId, {session: session},
      function(response) {
        console.log(response);     
      });
  } else {
    console.log("未检测到扩展，请先安装");
  }
}

你之前加的/*global chrome*/只是消除了ESLint的未定义告警，不会在运行时注入chrome对象，只有用户安装了匹配规则的扩展时，Chrome才会在网页上下文注入chrome.runtime相关API。