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

문제

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

솔루션

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

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

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

2. 분리된 스크립트에서 리스너 등록을 취소합니다.

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

3. 배경 스크립트:

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

4. 콘텐츠 스크립트:

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

5. 팝업 스크립트:

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

예 코드:

Background.js:

// 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' });
  });
});

content.js:

// 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;
}

popup.js:

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) {}
}