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

【问题标题】：Chrome Extension: Extension context invalidated when getting URLChrome 扩展：获取 URL 时扩展上下文无效
【发布时间】：2020-12-10 18:03:56
【问题描述】：

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

做了一些研究，我意识到这个错误与on this answer 解释清楚的事实有关，但由于我没有在我的内容脚本和 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);
  }

【问题讨论】：

标签： javascript jquery google-chrome google-chrome-extension

【解决方案1】：

我想解释一下我做了什么来保持这个：

基本上，我将所有导致此错误的东西都用：

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

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

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

【讨论】：

【解决方案2】：

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

只需一个班轮就可以避免这种情况：

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

【讨论】：