如何修复Chrome扩展「Unchecked runtime.lastError: 无法建立连接」错误？

问题分析 #

核心问题是chrome.tabs.onUpdated事件触发时，目标标签页的内容脚本尚未完成注入或初始化，导致无法建立消息连接。而onActivated事件触发时页面通常已完成加载，内容脚本就绪，因此不会报错。此外你的代码存在重复添加事件监听器的隐患——每次onUpdated触发都会新增chrome.windows.onFocusChanged和chrome.tabs.onActivated监听器，会导致后续逻辑混乱。

可靠解决方案 #

1. 改用动态注入内容脚本+消息发送 #

静态注入的内容脚本可能因页面加载时序问题，在onUpdated触发时未就绪。改用chrome.scripting.executeScript动态注入，确保内容脚本存在后再发送消息：

// 后台脚本修改后的onUpdated监听器
chrome.tabs.onUpdated.addListener(async function(tabId, change, tab) {
  if (!tab.active || !change.url) return;

  const UpdatedTabURL = change.url;
  const UpdatedURLTabID = tabId;

  // 保留同URL判断逻辑，避免重复触发
  if (typeof PreviousURL !== 'undefined') {
    if (UpdatedTabURL.indexOf(PreviousURL) !== -1) {
      return;
    }
  }

  // 遍历目标URL列表
  for (const urlToAvoid of AllURLsToAvoid) {
    if (UpdatedTabURL.indexOf(urlToAvoid) !== -1) {
      PreviousURL = urlToAvoid;

      // 先移除旧监听器，避免重复绑定
      chrome.windows.onFocusChanged.removeListener(onWindowFocusChanged);
      chrome.tabs.onActivated.removeListener(onTabActivated);

      // 定义监听器函数（外部定义方便后续移除）
      function onWindowFocusChanged(windowId) {
        if (windowId === chrome.windows.WINDOW_ID_NONE) {
          sendMessageToTab(UpdatedURLTabID, {greeting: "Remove Timer"});
        }
      }

      function onTabActivated(activeInfo) {
        if (activeInfo.tabId !== UpdatedURLTabID) {
          sendMessageToTab(UpdatedURLTabID, {greeting: "Remove Timer"});
        }
      }

      // 添加新监听器
      chrome.windows.onFocusChanged.addListener(onWindowFocusChanged);
      chrome.tabs.onActivated.addListener(onTabActivated);

      // 动态注入内容脚本并发送消息
      try {
        // 确保内容脚本已注入
        await chrome.scripting.executeScript({
          target: {tabId: tabId},
          files: ['你的内容脚本文件名.js'] // 替换为实际内容脚本路径
        });
        // 注入成功后立即发送消息
        await sendMessageToTab(tabId, {greeting: "Start Timer"});
      } catch (err) {
        console.error("注入或消息发送失败:", err);
      }
      break; // 匹配到目标URL后退出循环
    }
  }
});

// 封装带错误处理的消息发送函数
function sendMessageToTab(tabId, message) {
  return new Promise((resolve, reject) => {
    chrome.tabs.sendMessage(tabId, message, (response) => {
      if (chrome.runtime.lastError) {
        reject(chrome.runtime.lastError);
      } else {
        resolve(response);
      }
    });
  });
}

2. 添加消息发送重试机制 #

如果页面存在特殊加载逻辑导致偶尔注入失败，可添加有限次数的重试：

// 带重试的消息发送函数
async function sendMessageWithRetry(tabId, message, maxRetries = 3, delay = 500) {
  for (let i = 0; i < maxRetries; i++) {
    try {
      const response = await sendMessageToTab(tabId, message);
      return response;
    } catch (err) {
      if (i === maxRetries - 1) throw err;
      await new Promise(resolve => setTimeout(resolve, delay));
    }
  }
}

// 使用方式：替换原sendMessageToTab调用
await sendMessageWithRetry(tabId, {greeting: "Start Timer"});

3. 优化静态注入的manifest配置（若坚持静态注入） #

确保content_scripts的匹配规则和注入时机配置正确：

{
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 替换为你的目标URL匹配规则
      "js": ["content.js"],
      "run_at": "document_idle" // 确保DOM就绪后注入，为默认值
    }
  ]
}

4. 彻底解决重复监听器问题 #

原代码每次匹配URL都会新增监听器，导致同一事件触发多次逻辑。通过「先移除旧监听器再添加新监听器」的方式，确保同一时间只有一个有效监听器。

内容脚本无需修改 #

你的内容脚本逻辑正常，保持原样即可：

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  console.log("Message received:", request);
  if (request.greeting === "Start Timer") {
    sendResponse({farewell: "Timer Started"});
    RemoveTimer();
    StopTimer();
    AddStickyTimer();
    RunTimer();
  }
  if (request.greeting === "Remove Timer") {
    sendResponse({farewell: "Timer Removed"});
    RemoveTimer();
    StopTimer();
  }
});

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