Javascript Chrome扩展：获取URL时扩展上下文无效

我正在从我的一个chrome扩展文件夹中检索一些图像到网站DOM，每次重新加载扩展时，我都会收到一个“extension Context Invalidated”错误。当我执行“chrome.storage.local.set”时也会发生同样的情况

做了一些研究后，我意识到这个错误与解释得很好的事实有关，但由于我没有在我的内容脚本和background.js之间传递消息，我想知道为什么会发生这种情况

这是我的脚本的一部分（通过popup.js中的chrome.tabs.executeScript注入），在那里我得到了错误，我基本上是从我的一个扩展文件夹向网站DOM注入图像：

  for (let k = 0; k < incomingChatTags.length; k++) {
    let normalHolderTag = $(incomingChatTags[k]).text().toLowerCase();
    switch (normalHolderTag) {
      case "vip":
        $(incomingChatTags[k]).addClass("ce-vip");
        priorityVal += 300;
        break;
      case "rg":
        $(incomingChatTags[k]).addClass("ce-rg");
        priorityVal += 240;
        break;
      case "accountclosure":
        $(incomingChatTags[k]).addClass("ce-accountclosure");
        priorityVal += 200;
        break;
      case "21com":
        let logo21 = chrome.extension.getURL("/images/21_thumb.png");
        $(incomingChatTags[k]).html('<img src="' + logo21 + '" />');
        $(incomingChatTags[k]).addClass("ce-tag-logo");
        break;
      case "caxino":
        //the console shows the error here and not before....¿why? 
        let logoCaxino = chrome.extension.getURL(
          "/images/caxino_thumb.png"
        );
        $(incomingChatTags[k]).html('<img src="' + logoCaxino + '" />');
        $(incomingChatTags[k]).addClass("ce-tag-logo");
        break;
      case "justspin":
        let logoJustSpin = chrome.extension.getURL(
          "/images/wildz_thumb.png"
        );
        $(incomingChatTags[k]).html('<img src="' + logoJustSpin + '" />');
        $(incomingChatTags[k]).addClass("ce-tag-logo");
        break;
      case "neonvegas":
        let logoNeonVegas = chrome.extension.getURL(
          "/images/neonVegas_thumb.jpg"
        );
        $(incomingChatTags[k]).html('<img src="' + logoNeonVegas + '" />');
        $(incomingChatTags[k]).addClass("ce-tag-logo");
        break;
      case "nitrocasino":
        let logoNitroCasino = chrome.extension.getURL(
          "/images/nitroCasino_thumb.jpg"
        );
        $(incomingChatTags[k]).html(
          '<img src="' + logoNitroCasino + '" />'
        );
        $(incomingChatTags[k]).addClass("ce-tag-logo");
        break;
      case "snabbis":
        let logoSnabbis = chrome.extension.getURL(
          "/images/snabbis_thumb.png"
        );
        $(incomingChatTags[k]).html('<img src="' + logoSnabbis + '" />');
        $(incomingChatTags[k]).addClass("ce-tag-logo");
        break;
      case "sb.bet":
        let logoSB = chrome.extension.getURL("/images/sb_thumb.png");
        $(incomingChatTags[k]).html('<img src="' + logoSB + '" />');
        $(incomingChatTags[k]).addClass("ce-tag-logo");
        break;
      case "wildz":
        let logoWildz = chrome.extension.getURL("/images/wildz_thumb.png");
        $(incomingChatTags[k]).html('<img src="' + logoWildz + '" />');
        $(incomingChatTags[k]).addClass("ce-tag-logo");
        break;
      case "wishmaker":
        let logoWishMaker = chrome.extension.getURL(
          "/images/wishmaker_thumb.png"
        );
        $(incomingChatTags[k]).html('<img src="' + logoWishMaker + '" />');
        $(incomingChatTags[k]).addClass("ce-tag-logo");
        break;
    }
    $(incomingChat).attr("data-priority", priorityVal);
    $(incomingChat).find(".numbers_cell").text(priorityVal);
  }

for（设k=0；k

我想解释一下我是如何做到这一点的：

基本上，我用以下代码包装所有导致此错误的内容：

typeof chrome.app.isInstalled !== "undefined"”

老实说，我仍在试图弄清楚为什么这会起作用。我知道每次我更新扩展时，内容脚本仍然会被注入网站（在我的例子中，抓取dom元素，将数据存储到chrome本地存储等），但我不明白为什么这句话会避免这种情况发生，因为扩展仍然安装在我的浏览器上，我只是在更新文件

---

如果有人能更深入地解释为什么这对我有效，请在这里亮一盏灯。

重新加载扩展后，您的旧内容脚本将继续驻留在打开的页面中，直到您刷新它们。然而，它们关于Chrome扩展的上下文将丢失

只有一条班轮可以避免这种情况：

if(chrome.runtime.id == undefined) return;