谷歌扩展：网页向扩展发送数据时抛出连接错误

错误根源 #

你遇到的Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.错误，核心原因集中在代码未定义项、配置冗余以及消息机制未正确响应这几点：

1. Service Worker存在未定义内容 #

你的service-worker.js里有两处致命问题：

• blocklistedWebsite变量未声明赋值，直接使用会触发报错中断监听器执行
• openUrl函数未实现，调用时会抛出错误导致消息处理流程崩溃
• 未调用sendResponse回复消息，Chrome的跨上下文消息机制要求必须回应，否则会触发连接超时错误

2. Manifest配置冗余 #

externally_connectable中的ids字段用于指定其他可连接当前扩展的扩展ID，你填写自身扩展ID属于冗余配置，可能干扰匹配逻辑，应当移除。

3. 消息回应缺失 #

网页发送消息后，扩展端必须调用sendResponse返回结果，否则会导致连接通道异常关闭，触发"接收端不存在"的错误。

修复后的代码 #

修正后的Service Worker #

// 按需定义黑名单网站，不需要可直接删除该变量及对应判断
const blocklistedWebsite = "";

chrome.runtime.onMessageExternal.addListener(
  function(request, sender, sendResponse) {
    // 黑名单判断（可移除）
    if (sender.url === blocklistedWebsite) {
      sendResponse({ success: false, reason: "网站被拦截" });
      return;
    }
    // 处理打开URL请求
    if (request.openUrlInEditor) {
      // 实现打开URL的逻辑，示例为打开新标签页
      chrome.tabs.create({ url: `https://${request.openUrlInEditor}` }, () => {
        sendResponse({ success: true });
      });
      // 返回true告知Chrome等待异步操作完成后再发送响应
      return true;
    }
    // 默认响应无效请求
    sendResponse({ success: false, reason: "无效请求" });
  }
);

修正后的Manifest #

移除冗余的ids字段：

{
  "manifest_version": 3,
  "name": "TestExtension",
  "description": "Base Level Extension",
  "version": "1.0",
  "permissions": [
    "tabs",
    "activeTab"
  ],
  "action": {
    "default_popup": "index.html"
  },
  "externally_connectable": {
    "matches": ["https://twitter.com/home", "https://127.0.0.1:7236/*"]
  },
  "background": {
    "service_worker": "service-worker.js"
  }
}

注：将https://127.0.0.1:7236/改为https://127.0.0.1:7236/*，匹配该域名下所有页面

网页端代码补充 #

补全handleError函数避免未处理错误：

window.sendStateToExtension = () => {
  const editorExtensionId = "abcdefghijklmnoabcdefhijklmnoabc";

  chrome.runtime.sendMessage(editorExtensionId, { openUrlInEditor: "www.google.com" },
    function (response) {
      if (!response?.success)
        handleError("消息发送失败");
    });
}

function handleError(msg) {
  console.error("错误信息：", msg);
}

function getStoreState() {
  // 你的实现逻辑...
}

额外检查项 #

1. 确认扩展已激活：在Chrome扩展管理页（chrome://extensions/）开启开发者模式，检查扩展是否启用，点击"Service Worker"的"检查"按钮查看控制台是否有报错。
2. 验证扩展ID：在扩展管理页复制实际ID，确保网页端editorExtensionId与之一致。
3. 检查URL匹配：确保测试网页的URL完全符合externally_connectable中的matches规则，路径、端口、协议都不能错。

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