javascript - Chrome 扩展 : Extension context invalidated when getting URL

Question

我正在从我的一个 chrome 扩展文件夹中检索一些图像到网站 DOM，每次我重新加载扩展时，我都会收到“扩展上下文无效”错误。当我执行“chrome.storage.local.set”时，也会发生同样的事情。
做了一些研究，我意识到这个错误与解释清楚的事实有关 on this answer但由于我没有在我的内容脚本和 background.js 之间进行消息传递，我想知道为什么会发生这种情况。
这是我收到错误的脚本的一部分(通过 popup.js 中的 chrome.tabs.executeScript 注入(inject))，我基本上是将图像从我的扩展文件夹之一注入(inject)到网站 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);
  }

Answer 1

我想解释一下为了保持这一点我做了什么:
基本上，我将创建此错误的所有内容都包装为:

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

老实说，我仍在试图弄清楚为什么这是有效的。我了解每次更新扩展时，内容脚本仍会注入(inject)网站(在我的情况下，抓取 dom 元素，将数据存储到 chrome 本地存储等)，但我不明白为什么该声明会避免这种情况发生，因为扩展仍然安装在我的浏览器上，我只是在更新文件。
如果有人可以更深入地解释为什么这对我有用，请在这里发光。