Chrome扩展报错：无法建立连接，接收端不存在，求解决方案

这个错误的核心是后台脚本（service-worker.js）调用chrome.runtime.sendMessage发送消息时，没有任何页面/脚本注册对应的消息监听器。你的代码里，每次触发webRequest.onBeforeRequest就发送消息，但如果popup未打开、或者popup/内容脚本里没配置对应的消息监听逻辑，就会出现这个报错。

1. 确保接收端存在并正确监听 #

如果是给popup发消息，必须保证popup处于打开状态，并且在popup的JS文件中注册监听器：

// popup.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.message === "background_to_popup") {
    console.log("收到后台数据:", request.data);
    // 可在此处处理数据，比如更新popup界面
  }
});

2. 捕获消息发送失败的异常 #

chrome.runtime.sendMessage是异步Promise（Chrome 88+支持），可以用try/catch捕获错误，避免控制台抛出未处理的异常：

// service-worker.js 修改后的代码
chrome.webRequest.onBeforeRequest.addListener(async (details) => {
  try {
    await chrome.runtime.sendMessage({
      message: "background_to_popup",
      data: details,
    });
  } catch (err) {
    // 处理发送失败场景，比如popup未打开时跳过
    console.log("消息发送失败（可能popup未打开）:", err);
  }
  console.log(details); 
}, {
  urls: ['<all_urls>'],
  types: ['main_frame'],
});

3. 区分消息接收端类型 #

如果是给内容脚本发消息，不能用chrome.runtime.sendMessage，而是要用chrome.tabs.sendMessage并指定目标Tab的ID：

// 给指定Tab的内容脚本发消息示例
chrome.webRequest.onBeforeRequest.addListener((details) => {
  // details.tabId即为当前请求对应的Tab ID
  chrome.tabs.sendMessage(details.tabId, {
    message: "background_to_content",
    data: details,
  }, (response) => {
    // 处理内容脚本的响应，或捕获未找到接收端的错误
    if (chrome.runtime.lastError) {
      console.log("内容脚本未加载或无监听器:", chrome.runtime.lastError);
    }
  });
  console.log(details); 
}, {
  urls: ['<all_urls>'],
  types: ['main_frame'],
});

同时内容脚本里要注册对应监听器：

// content.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.message === "background_to_content") {
    console.log("收到后台数据:", request.data);
    // 可选：给后台返回响应
    sendResponse({ status: "已接收" });
  }
});

4. 检查扩展权限配置 #

确保manifest.json中声明了必要的权限：

{
  "permissions": ["webRequest", "activeTab", "<all_urls>"],
  "background": {
    "service_worker": "service-worker.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "action": {
    "default_popup": "popup.html"
  }
}

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