> 웹 프론트엔드 > JS 튜토리얼 > Chrome 확장 프로그램에서 고아 콘텐츠 스크립트로 인해 발생하는 \'확장 컨텍스트 무효화\' 오류를 수정하는 방법은 무엇입니까?

Chrome 확장 프로그램에서 고아 콘텐츠 스크립트로 인해 발생하는 \'확장 컨텍스트 무효화\' 오류를 수정하는 방법은 무엇입니까?

Susan Sarandon
풀어 주다: 2024-11-01 04:59:27
원래의
905명이 탐색했습니다.

How to Fix

Chrome 확장 프로그램 업데이트 후 고아 스크립트를 제거하는 방법

문제

실수로 Chrome 확장 프로그램, 특히 개발자 모드의 확장 프로그램을 다시 로드하면 고아 콘텐츠가 생성될 수 있습니다. 스크립트. 이러한 스크립트는 백그라운드에서 계속 실행되지만 나머지 확장 프로그램과의 통신이 끊어져 "확장 컨텍스트 무효화" 및 "확인되지 않은 런타임.lastError"와 같은 오류가 발생합니다.

해결책

고아 콘텐츠 스크립트는 여전히 DOM 메시지를 받을 수 있습니다. 제거하려면:

1. 새 콘텐츠 스크립트에서 메시지 보내기:

  • 새 작업 콘텐츠 스크립트에서 window.dispatchEvent를 사용하여 고아 스크립트에 메시지를 보냅니다.
  • 고유한 메시지 식별자를 사용하세요. , orphanMessageId 등.

2. 고아 스크립트에서 리스너 등록 취소:

  • 고아 스크립트에서 orphanMessageId에 대한 리스너를 정의합니다.
  • 이 리스너 내에서 이전 리스너를 모두 등록 취소하고 전역 변수를 무효화합니다.
  • 이렇게 하면 이전 스크립트가 가비지 수집 대상이 됩니다.

3. 배경 스크립트:

  • 확장 프로그램을 다시 로드/설치할 때 콘텐츠 스크립트를 다시 삽입합니다.

4. 콘텐츠 스크립트:

  • 이벤트 리스너에 대해 명명된 함수를 사용하여 참조를 유지합니다.
  • window.running 속성을 설정하여 활성 인스턴스를 나타냅니다.
  • orphanMessageId를 수신하면 리스너 등록을 취소하고 스크립트를 고아로 표시합니다.

5. 팝업 스크립트:

  • 메시지를 보내기 전에 작동하는 콘텐츠 스크립트가 있는지 확인하세요.
  • sureContentScript를 활용하여 스크립트 삽입을 확인하세요.

예제 코드:

background.js:

<code class="javascript">// Re-inject content script
chrome.runtime.onInstalled.addListener(() => {
  chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
    chrome.tabs.executeScript(tabs[0].id, { file: 'content.js' });
  });
});</code>
로그인 후 복사

content.js:

<code class="javascript">// Orphaned script detection and cleanup
var orphanMessageId = chrome.runtime.id + 'orphanCheck';
window.dispatchEvent(new Event(orphanMessageId));
window.addEventListener(orphanMessageId, unregisterOrphan);

// Register named listeners
chrome.runtime.onMessage.addListener(onMessage);
document.addEventListener('mousemove', onMouseMove);

// Orphan flag and cleanup function
window.running = true;

function unregisterOrphan() {
  if (chrome.runtime.id) {
    // Not orphaned
    return;
  }
  window.removeEventListener(orphanMessageId, unregisterOrphan);
  document.removeEventListener('mousemove', onMouseMove);
  try {
    chrome.runtime.onMessage.removeListener(onMessage);
  } catch (e) {}
  return true;
}</code>
로그인 후 복사

popup.js:

<code class="javascript">async function sendMessage(data) {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  if (await ensureContentScript(tab.id)) {
    return await chrome.tabs.sendMessage(tab.id, data);
  }
}

async function ensureContentScript(tabId) {
  try {
    const [{ result }] = await chrome.scripting.executeScript({
      target: { tabId },
      func: () => window.running === true,
    });
    if (!result) {
      await chrome.scripting.executeScript({
        target: { tabId },
        files: ['content.js'],
      });
    }
    return true;
  } catch (e) {}
}</code>
로그인 후 복사

위 내용은 Chrome 확장 프로그램에서 고아 콘텐츠 스크립트로 인해 발생하는 \'확장 컨텍스트 무효화\' 오류를 수정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿