Chrome扩展注入iframe后长时间运行时图标无响应求助

我把Chrome扩展的功能从原本的default_popup改成注入iframe实现，但遇到了问题：当网页长时间保持打开状态时，扩展的action图标点击完全没反应，而且找不到任何可监控的错误信息。这个问题已经卡了我一周了，希望能解决，实现稳定的开关功能。

我已经排查过，确认不是网页被丢弃的问题，也试过加心跳机制，但没用。

相关代码 #

background.js 核心逻辑 #

let activeTabId = null;

// 点击图标时注入或移除iframe
chrome.action.onClicked.addListener(async (tab) => {
  if (tab.url && tab.url.startsWith("http")) {
    const iframeStatus = await getIframeStatus(tab.id);
    if (iframeStatus?.injected || iframeStatus === undefined) {
      chrome.tabs.sendMessage(tab.id, { action: "removeIframe" });
    } else {
      tryInjectIframe(tab.id);
    }
  } else {
    console.error("Cannot execute extension on non-HTTP URL.");
  }
});

// 注入iframe的重试机制
async function tryInjectIframe(tabId, retries = 10) {
  while (retries > 0) {
    try {
      await chrome.tabs.sendMessage(tabId, { action: "injectIframe" });
      return;
    } catch (error) {
      if (error.message.includes("Receiving end does not exist")) {
        await new Promise(resolve => setTimeout(resolve, 1000)); // 等待1秒后重试
        retries--;
      } else {
        throw error;
      }
    }
  }
  chrome.runtime.pendingAction = { tabId: tabId };
}

// 更新iframe状态
chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
  if (sender.tab.id === activeTabId) {
    if (message.type === "iframeLoaded") {
      await setIframeStatus(activeTabId, true);
      chrome.tabs.sendMessage(activeTabId, { action: "adjustIframeX" });
    } else if (message.type === "iframeRemoved") {
      await setIframeStatus(activeTabId, false);
    }

    // updateIcon(activeTabId);
  }
});

async function getIframeStatus(tabId) {
  const result = await chrome.storage.session.get(`iframeStatus_${tabId}`);
  return result[`iframeStatus_${tabId}`] || { injected: false };
}

async function setIframeStatus(tabId, injected) {
  await chrome.storage.session.set({ [`iframeStatus_${tabId}`]: { injected: injected } });
}

async function removeIframeStatus(tabId) {
  await chrome.storage.session.remove(`iframeStatus_${tabId}`);
}

manifest.json 相关配置 #

"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["dist/contentScript.js"],
    "css": ["dist/iframe.css"]
  }
],
"web_accessible_resources": [
  {
    "matches": ["<all_urls>"],
    "resources": ["popup.html", "dist/iframe.css"]
  }
]

解决方案 #

1. 修复activeTabId未赋值的核心问题 #

当前代码中activeTabId始终为null，导致chrome.runtime.onMessage里的状态更新逻辑完全失效，iframe的注入/移除状态无法被正确记录，后续点击图标时拿不到正确状态，自然无法触发对应操作。

修改chrome.action.onClicked监听函数，在开头赋值activeTabId：

chrome.action.onClicked.addListener(async (tab) => {
  activeTabId = tab.id; // 新增此行，绑定当前操作的标签页ID
  if (tab.url && tab.url.startsWith("http")) {
    // 原逻辑保持不变
  }
});

2. 处理内容脚本被销毁的情况 #

长时间打开的网页可能触发Chrome内存回收，导致内容脚本被销毁，此时chrome.tabs.sendMessage会失败。需要在重试耗尽后主动重新注入内容脚本：

修改tryInjectIframe函数：

async function tryInjectIframe(tabId, retries = 10) {
  while (retries > 0) {
    try {
      await chrome.tabs.sendMessage(tabId, { action: "injectIframe" });
      return;
    } catch (error) {
      if (error.message.includes("Receiving end does not exist")) {
        await new Promise(resolve => setTimeout(resolve, 1000));
        retries--;
      } else {
        throw error;
      }
    }
  }
  // 重试失败，尝试重新注入内容脚本
  try {
    await chrome.scripting.executeScript({
      target: { tabId: tabId },
      files: ["dist/contentScript.js"]
    });
    // 注入后再次尝试发送消息
    await chrome.tabs.sendMessage(tabId, { action: "injectIframe" });
  } catch (reInjectError) {
    console.error("Failed to re-inject content script and send message:", reInjectError);
    chrome.runtime.pendingAction = { tabId: tabId };
  }
}

同时需在manifest.json中添加scripting权限：

"permissions": ["scripting", "storage", "tabs"]

3. 优化状态同步逻辑 #

移除对activeTabId的依赖，直接通过消息发送方的tabId关联状态更新，避免单一变量失效导致逻辑中断：

chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
  const tabId = sender.tab.id;
  if (message.type === "iframeLoaded") {
    await setIframeStatus(tabId, true);
    chrome.tabs.sendMessage(tabId, { action: "adjustIframeX" });
  } else if (message.type === "iframeRemoved") {
    await setIframeStatus(tabId, false);
  }
  // updateIcon(tabId);
});

4. 添加标签页关闭时的状态清理 #

监听标签页关闭事件，清理对应会话存储的状态，避免内存冗余：

chrome.tabs.onRemoved.addListener(async (tabId) => {
  await removeIframeStatus(tabId);
  if (activeTabId === tabId) {
    activeTabId = null;
  }
});

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