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

Question

我正在将一些图像从我的 chrome 扩展文件夹之一检索到网站 DOM，每次我重新加载扩展时，我都会收到“扩展上下文无效”错误。当我执行“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);
  }

Answer 1

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

只需一个衬垫即可避免这种情况：

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

Answer 2

我想解释一下为了保持这一点我做了什么：

\n

基本上我用以下内容包装了造成此错误的所有内容：

\n

typeof chrome.app.isInstalled !== "undefined"\xe2\x80\x9d\n

\n

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

\n

如果有人可以更深入地解释为什么这对我有用，请在这里点亮。

\n