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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!