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

1. 先检查Manifest配置对不对 #

打开manifest.json，确认content_scripts的匹配规则能覆盖你当前测试的标签页URL，比如：

"content_scripts": [
  {
    "matches": ["<all_urls>"], // 也可以写具体规则，比如"https://*.baidu.com/*"
    "js": ["content.js"],
    "run_at": "document_idle" // 等页面加载到合适阶段再注入脚本
  }
]

要是matches写的URL和当前标签页不匹配，content脚本根本不会被注入，自然收不到消息。

2. 确认Content脚本里有消息监听器 #

content.js里必须写chrome.runtime.onMessage.addListener来接收消息，比如：

// content.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "scrapePage") {
    // 这里写你的页面抓取逻辑
    const pageData = {
      title: document.title,
      content: document.body.innerText.slice(0, 500) // 示例处理数据
    };
    sendResponse(pageData);
  }
  return true; // 要是抓取逻辑是异步的，必须返回true，否则sendResponse会失效
});

别漏了这个监听器，不然popup发的消息根本没人接。

3. 修正Popup里的消息发送逻辑 #

Popup发消息得用chrome.tabs.sendMessage指定当前活跃标签页的ID，不能用chrome.runtime.sendMessage（那是给后台脚本发消息的）。正确的popup.js写法：

// popup.js
document.addEventListener('DOMContentLoaded', () => {
  // 先拿到当前活跃的标签页
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    const activeTab = tabs[0];
    // 给这个标签页的content脚本发消息
    chrome.tabs.sendMessage(activeTab.id, {action: "scrapePage"}, (response) => {
      if (chrome.runtime.lastError) {
        console.error(chrome.runtime.lastError.message);
        // 给用户提示错误，比如让刷新页面
        document.getElementById('result').textContent = "抓取失败：刷新页面再试试呗";
        return;
      }
      // 展示处理后的数据
      document.getElementById('result').innerHTML = `
        <h3>${response.title}</h3>
        <p>${response.content}</p>
      `;
    });
  });
});

还要注意得等popup的DOM加载完再执行逻辑，所以要包在DOMContentLoaded事件里。

4. 处理Content脚本未及时注入的情况 #

有时候popup打开时，content脚本还没完成注入（比如页面刚加载、扩展刚安装/更新），可以让后台脚本帮忙强制注入：
在background.js里加这段逻辑：

// background.js
chrome.action.onClicked.addListener((tab) => {
  // 先检查content脚本是否已注入
  chrome.tabs.sendMessage(tab.id, {action: "checkInjected"}, (response) => {
    if (chrome.runtime.lastError) {
      // 未注入则强制注入
      chrome.scripting.executeScript({
        target: {tabId: tab.id},
        files: ["content.js"]
      }, () => {
        // 注入完成后再发送抓取消息
        chrome.tabs.sendMessage(tab.id, {action: "scrapePage"});
      });
    }
  });
});

同时要在manifest.json里添加对应权限：

"permissions": ["tabs", "scripting"],
"host_permissions": ["<all_urls>"] // 或者对应你要爬取的网站URL

5. 调试小技巧 #

• 打开当前标签页的F12开发者工具，切换到Sources标签，查看Content scripts列表里有没有content.js，确认注入是否成功。
• 在content.js的消息监听器开头加console.log("收到消息啦")，检查是否能接到popup的消息。
• 右键popup弹窗选择“检查”，打开popup的开发者工具，查看控制台错误信息，定位具体问题。

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