Chrome扩展重载后extension context invalidated错误解决方案咨询

问题根源 #

扩展重载后，之前注入到标签页的content.js会和新的扩展实例断开连接，此时调用chrome.storage这类扩展API就会触发上下文失效错误——旧的content脚本属于已被销毁的扩展进程，无法再和新扩展通信。

具体修复方案 #

方案1：移除对旧content脚本的依赖，改用后台通信

把content脚本里的chrome.storage调用移到后台，通过消息传递获取数据，彻底避免content脚本依赖扩展上下文：

1. 修改record.js，不再触发自定义事件，直接向后台发请求：

// record.js
chrome.runtime.sendMessage({action: 'getSavedUrl'}, (response) => {
  if (response?.savedUrl) {
    appendSentence(response.savedUrl, "ss");
  }
});

2. 在background.js中添加消息监听：

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'getSavedUrl') {
    chrome.storage.local.get(["savedUrl"], (result) => {
      sendResponse({savedUrl: result.savedUrl});
    });
    return true; // 保持消息通道开放，直到异步操作完成
  }
});

3. 删除原content.js中监听自定义事件的代码，无需再依赖它。

方案2：每次触发时重新注入最新的content脚本

如果必须保留content脚本的逻辑，就在点击按钮时重新注入最新的content.js，直接传递数据触发逻辑：

修改popup.js的点击事件：

document.addEventListener("DOMContentLoaded", function () {
  document
    .getElementById("bugs-work-settingsBtn")
    .addEventListener("click", async () => {
      // 先获取存储的数据
      const {savedUrl} = await chrome.storage.local.get(["savedUrl"]);
      // 注入record.js和最新的content.js
      await chrome.scripting.executeScript({
        target: {tabId: activeTab.id},
        files: ["record.js", "content.js"]
      });
      // 向content脚本发送数据，触发逻辑
      chrome.tabs.sendMessage(activeTab.id, {action: 'executeContent', savedUrl});
    });
});

修改content.js，改为监听消息：

// content.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'executeContent') {
    appendSentence(message.savedUrl, "ss");
  }
});

方案3：扩展重载时自动刷新标签页（可选）

如果希望彻底清除旧脚本残留，可以在background.js中监听扩展重载/安装事件，自动刷新网页标签：

chrome.runtime.onInstalled.addListener((details) => {
  if (details.reason === "install" || details.reason === "update" || details.reason === "chrome_update") {
    chrome.tabs.query({}, (tabs) => {
      tabs.forEach(tab => {
        if (tab.url.startsWith('http')) { // 只刷新网页标签，排除chrome://等系统页面
          chrome.tabs.reload(tab.id);
        }
      });
    });
  }
});

注意事项 #

• 不要依赖页面中残留的旧content脚本，每次触发操作时尽量使用最新注入的脚本或直接和后台通信。
• 扩展API的调用优先放在后台脚本中，后台脚本在重载后会重新初始化，不会出现上下文失效问题。

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