Chrome扩展通信报错：Unchecked runtime.lastError连接失败问题排查

错误原因 #

1. 内容脚本未正确注入：chrome.tabs.sendMessage需要目标标签页已注入content.js，若manifest.json中content_scripts的匹配规则不覆盖当前页面，或脚本未完成加载，就会出现"接收端不存在"的错误。
2. 消息监听逻辑错位：popup向content脚本发送type: "getSuggestion"的消息，但content.js的监听代码未处理该类型，反而在等待request.textSuggestion，导致消息无法被识别接收。
3. background.js语法错误：监听函数未闭合大括号，且错误使用return返回响应（Chrome扩展消息通信需用sendResponse），导致background无法正常处理消息。
4. 未捕获runtime错误：popup发送消息时未处理chrome.runtime.lastError，导致控制台抛出未检查的错误提示。

解决方案 #

1. 修正manifest.json配置（核心步骤） #

确保content脚本正确注入目标页面，以Manifest V3为例：

{
  "manifest_version": 3,
  "name": "WordCompleter",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 根据需求替换为具体URL，如"https://*.example.com/*"
      "js": ["content.js"]
    }
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": ["activeTab"]
}

2. 修复background.js的语法与响应逻辑 #

// background.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === "getSuggestion") {
    console.log("收到prompt:", request.prompt);
    // 使用sendResponse返回响应，而非直接return
    sendResponse({ status: "received", prompt: request.prompt });
  }
});

3. 调整content.js的消息处理逻辑 #

让content脚本正确响应getSuggestion类型的消息：

// content.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === "getSuggestion") {
    // 生成示例建议，可替换为实际补全逻辑
    const suggestion = `补全建议：${request.prompt}...`;
    
    // 创建或复用建议元素
    let suggestionEl = document.getElementById("word-completer-suggestion");
    if (!suggestionEl) {
      suggestionEl = document.createElement("div");
      suggestionEl.id = "word-completer-suggestion";
      suggestionEl.style.cssText = `
        position: absolute;
        top: 20px;
        left: 20px;
        background: white;
        padding: 10px;
        z-index: 9999;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 4px;
      `;
      document.body.appendChild(suggestionEl);
    }
    suggestionEl.textContent = suggestion;
    
    // 回复popup
    sendResponse({ status: "success", suggestion: suggestion });
  }
});

4. 优化popup.js的错误处理与消息发送 #

添加错误捕获，避免未检查的runtime错误，并在popup中显示状态：

// popup.js
document.addEventListener("DOMContentLoaded", () => {
  const inputField = document.getElementById("input-field");
  const suggestionField = document.getElementById("suggestion-field");

  // 向background发送初始消息
  chrome.runtime.sendMessage(
    { type: "getSuggestion", prompt: inputField.value },
    (response) => {
      if (chrome.runtime.lastError) {
        console.error("与background通信失败:", chrome.runtime.lastError);
      } else {
        console.log("background回复:", response);
      }
    }
  );

  // 输入框实时监听
  inputField.addEventListener("input", () => {
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      chrome.tabs.sendMessage(
        tabs[0].id,
        { type: "getSuggestion", prompt: inputField.value },
        (response) => {
          if (chrome.runtime.lastError) {
            console.error("与content脚本通信失败:", chrome.runtime.lastError);
            suggestionField.textContent = "请刷新页面确保内容脚本已加载";
          } else {
            suggestionField.textContent = response?.suggestion || "暂无建议";
          }
        }
      );
    });
  });
});

验证步骤 #

1. 重新加载扩展：在Chrome扩展管理页面开启"开发者模式"，点击"重新加载"按钮。
2. 刷新目标页面：确保content脚本注入到当前页面。
3. 测试输入：在popup输入框中输入内容，检查控制台日志与页面显示。

内容的提问来源于stack exchange，提问作者Ala Ben Aicha