Chrome MV3扩展popup.js无法向content.js发送一次性消息问题求助

错误原因排查 #

该报错Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.通常由以下3种情况触发：

• 匹配规则配置错误，content.js没有被注入到当前标签页
• 扩展重新加载后，原有已打开的页面不会自动注入更新后的content.js
• 消息接收方没有调用sendResponse返回数据，触发发送端的回调异常

最佳实践说明 #

DOM数据采集逻辑必须放在content.js中：background的service worker运行在完全隔离的浏览器后台环境，无法直接访问任何页面的DOM对象。background.js仅适合处理全局调度、扩展API调用、跨标签页逻辑、数据持久化等无需访问页面DOM的场景。

修复方案 #

1. 修正manifest.json配置 #

更新匹配规则，覆盖所有Google子域名，避免页面匹配失败：

{
    "manifest_version": 3,
    "name": "Data Analyzer",
    "description": "Analyzes some page data",
    "version": "1.0",
    "background": {
        "service_worker": "background.js"
    },
    "content_scripts": [
        {
            "matches": ["*://*.google.com/*"],
            "js": ["content.js"]
        }
    ],
    "action": {
        "default_icon": "chrome_ext.png",
        "default_popup": "popup.html"
    },
    "host_permissions": ["*://*.google.com/*"],
    "permissions": ["tabs", "activeTab"]
}

2. 修正content.js逻辑 #

补充sendResponse调用，匹配发送端的回调逻辑：

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        console.log("content.js runtime function has fired");
        if(request.message === "start") {
            start();
            // 返回响应给popup.js
            sendResponse({status: "采集任务已启动"});
        }
        // 后续如果start函数包含异步逻辑，需在此处添加 return true; 保持消息通道开放
    }
);

function start() {
    alert("Started content.js");
    // 所有DOM采集逻辑直接在此处编写即可，content.js可直接访问当前页面DOM
}

3. 修正popup.js逻辑 #

添加运行时错误捕获，避免无接收端时抛出异常：

document.addEventListener('DOMContentLoaded', documentEvents, false);

function myAction(input) {
  chrome.tabs.query({currentWindow: true, active: true}, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, {"message": "start"}, function(response) {
      // 捕获运行时错误
      if (chrome.runtime.lastError) {
        console.log("当前页面不支持采集，请确认是Google域名下的页面并刷新后重试");
        return;
      }
      console.log(response.status);
    });
  });
}

function documentEvents() {    
  document.getElementById('submit_btn').addEventListener('click', 
    function() { myAction(document.getElementById('value_textbox'));
  });
}

验证步骤 #

1. 代码修改完成后，进入扩展管理页chrome://extensions/，重新加载当前扩展
2. 关闭所有已打开的Google相关页面，重新打开https://www.google.com，或刷新原有Google页面触发content.js注入
3. 点击扩展图标打开popup，点击提交按钮即可触发采集逻辑

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