Manifest V3 Chrome扩展：onClick调用chrome.runtime.sendMessage未生效

注：该问题曾被误判为“不知道在哪个控制台查看日志”，但实际问题是已知弹窗调试入口的前提下，消息传递流程本身异常。

问题场景 #

首次开发Manifest V3版本Chrome扩展，已实现从内容脚本向后台Service Worker发消息的正常流程，但基于React开发的扩展弹窗触发消息发送时，消息完全无法抵达后台脚本，收不到预期响应。

已实现的核心代码 #

• 内容脚本 content-script.js

console.log("Content script was loaded");
chrome.runtime.sendMessage({ greeting: "hello" }, function (response) {
  console.log(response.farewell);
});

• 后台Service Worker脚本 background.js

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  console.log(
    sender.tab
      ? "from a content script:" + sender.tab.url
      : "from the extension"
  );
  if (request.greeting == "hello") sendResponse({ farewell: "goodbye" });
});

• 弹窗React交互逻辑 app.js

/*global chrome*/
import React from "react";
import "./App.css";

const onClick = () => {
  console.log("The button was clicked");
  chrome.runtime.sendMessage({ greeting: "hello" }, function (response) {
    console.log(response.farewell);
  });
};

function App() {
  return (
    <div>
      <p>Hello</p>
      <button onClick={onClick}>
        Click to send message
      </button>
    </div>
  );
}

export default App;

• 扩展配置清单 manifest.json

{
  "name": "Chrome Extension Starter Kit",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "index.html"
  },
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content-script.js"]
    }
  ]
}

实际现象 #

加载扩展后右键扩展图标打开弹窗的调试控制台，点击弹窗按钮仅输出「The button was clicked」的日志，没有出现预期的「goodbye」响应内容。曾猜测问题原因包括Service Worker休眠、React代码未注册为内容脚本，但验证后均不成立。

排查与解决思路 #

• 排除Service Worker休眠误区：chrome.runtime.sendMessage本身就是唤醒休眠Service Worker的触发源，只要消息正常发出，SW就会被激活并执行监听逻辑，不需要额外做保活处理。
• 优先检查弹窗的扩展上下文有效性：弹窗内调用Chrome API无响应，最常见的原因是弹窗页面脱离了扩展环境。在弹窗调试控制台运行chrome.runtime.id，如果输出为undefined，说明当前页面上下文已经丢失，所有Chrome扩展API都会失效，自然无法发送消息。用React脚手架开发时，默认打包的资源路径为绝对路径/static/xxx.js，扩展加载弹窗时会因为路径解析错误找不到对应的JS资源，导致React逻辑没有在正确的扩展页面环境里执行。
• 验证后台监听逻辑的有效性：既然内容脚本发消息可以正常收到响应，说明后台的onMessage监听本身是生效的，不需要调整后台代码。可以打开后台Service Worker的调试控制台，手动运行一次消息发送逻辑，确认能正常收到响应。
• 针对性修复：
  • 调整React项目打包配置，把静态资源的引用路径从绝对路径改成相对路径./，保证扩展加载弹窗时能正确引用所有资源。
  • 开发过程中修改代码后，必须在扩展管理页点击「重新加载」按钮刷新整个扩展，不要依赖弹窗的热更新测试——热更新很容易导致弹窗的扩展上下文丢失，出现API调用无响应的假故障。
  • 给消息发送逻辑加错误捕获，替代单纯的回调写法：

    const onClick = async () => {
      console.log("The button was clicked");
      try {
        const response = await chrome.runtime.sendMessage({ greeting: "hello" });
        console.log(response.farewell);
      } catch (err) {
        console.error("消息发送失败，错误信息：", err);
      }
    };
    

    这种写法能直接在控制台暴露上下文异常、消息传递失败的具体原因，不需要反复排查。

注意：不需要把React的弹窗代码注册到内容脚本配置里，内容脚本运行在普通网页的上下文里，和弹窗的扩展页面上下文完全隔离，就算注册了也无法解决弹窗内的API调用问题。

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