Chrome扩展MV3通信报错：无法建立连接，接收端不存在

核心问题分析 #

报错Error: Could not establish connection. Receiving end does not exist.本质是弹窗发送消息时，当前活跃标签页中没有已加载并注册消息监听的内容脚本，结合你的代码，主要可能是以下几个原因：

1. popup.html结构错误，脚本未正确加载 #

你的popup.html中<script src="popup.js"></script>写在了</html>标签之后，不符合HTML规范，浏览器可能无法正确解析加载该脚本，导致消息发送逻辑执行异常。

修正后的popup.html：

<html>
  <body>
    <div class="container">
      <button id="fetch-button">Fetch</button>
    </div>
    <script src="popup.js"></script>
  </body>
</html>

2. 内容脚本未注入到当前标签页 #

• 受限制页面无法注入：<all_urls>不包含Chrome内部页面（如chrome://extensions/、chrome://settings/）、扩展自身页面（chrome-extension://开头），如果在这些页面点击按钮，内容脚本不会加载，自然无法接收消息。请切换到普通HTTP/HTTPS网页（如https://example.com）测试。
• 已打开标签页未刷新：扩展重新加载后，之前打开的标签页不会自动注入新的内容脚本，需要手动刷新测试页面，确保内容脚本生效。

3. 确认内容脚本是否正常加载 #

可以给内容脚本添加初始化日志，验证是否成功注入：
修改content_script.js：

console.log("内容脚本已加载并注册监听");
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  console.log(
    sender.tab
      ? "来自内容脚本：" + sender.tab.url
      : "来自扩展"
  );
  if (request.greeting === "hello") sendResponse({ farewell: "goodbye" });
});

打开测试页面的开发者工具→控制台→切换到「内容脚本」上下文，查看是否有初始化日志，确认脚本已加载。

4. 标签页查询参数优化 #

chrome.tabs.query中使用lastFocusedWindow: true可能在窗口切换场景下出现偏差，改用currentWindow: true更稳妥，确保获取当前窗口的活跃标签：
修改popup.js的查询参数：

document.getElementById("fetch-button").addEventListener("click", function () {
  (async () => {
    const [tab] = await chrome.tabs.query({
      active: true,
      currentWindow: true, // 替换lastFocusedWindow为currentWindow
    });
    const response = await chrome.tabs.sendMessage(tab.id, {
      greeting: "hello",
    });
    console.log(response);
  })();
});

验证步骤 #

1. 修正所有代码后，在Chrome扩展管理页面点击「重新加载」扩展。
2. 打开一个普通HTTP/HTTPS网页，刷新页面确保内容脚本注入。
3. 点击扩展弹窗的「Fetch」按钮，查看弹窗控制台（右键弹窗→检查）和页面控制台的日志。

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