Chrome 확장 : URL을 가져올 때 확장 컨텍스트가 무효화 됨
내 크롬 확장 폴더 중 하나에서 웹 사이트 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);
}
답변
이것을 유지하기 위해 내가 한 일을 설명하고 싶습니다.
기본적으로이 오류를 생성하는 모든 것을 다음과 같이 래핑합니다.
typeof chrome.app.isInstalled !== "undefined"”
솔직히 말해서 왜 이것이 효과가 있는지 알아 내려고 노력하고 있습니다. 확장 프로그램을 업데이트 할 때마다 콘텐츠 스크립트가 여전히 웹 사이트에 삽입된다는 것을 이해합니다 (제 경우에는 dom 요소를 가져오고 크롬 로컬 저장소에 데이터를 저장하는 등).하지만 그 진술이 왜 이런 일이 발생하지 않는지 알 수 없습니다. 확장 프로그램이 여전히 내 브라우저에 설치되어 있으며 파일을 업데이트하는 중입니다.
누군가 이것이 왜 저에게 효과가 있는지에 대해 더 심층적 인 설명을 줄 수 있다면 여기에 빛을 비추십시오.
확장 프로그램을 다시로드하면 이전 콘텐츠 스크립트는 새로 고칠 때까지 열린 페이지에 계속 남아 있습니다. 그러나 Chrome 확장과 관련된 컨텍스트가 손실됩니다.
상황을 피하기 위해 단 하나의 라이너 :
if(chrome.runtime.id == undefined) return;