>웹 프론트엔드 >JS 튜토리얼 >Chrome 확장 프로그램 업데이트 후 고아 스크립트를 제거하는 방법은 무엇입니까?

Chrome 확장 프로그램 업데이트 후 고아 스크립트를 제거하는 방법은 무엇입니까?

Patricia Arquette
Patricia Arquette원래의
2024-11-02 04:53:02501검색

How to Remove Orphaned Script After Chrome Extension Update?

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

문제:

Chrome 확장 프로그램을 다시 로드하면 분리된 콘텐츠 스크립트가 남아 있어 확장의 다른 부분과의 오류 및 통신 문제가 발생할 수 있습니다. 이 문제는 원본 콘텐츠 스크립트에 DOM 이벤트 리스너가 있어서 자동 제거가 불가능한 경우에 발생합니다.

해결책:

고아 스크립트를 제거하려면:

  1. Window를 사용하여 새로운 작업 콘텐츠 스크립트에서 고아 스크립트로 메시지를 보냅니다.
  2. 메시지를 받으면 고아 스크립트는 모든 리스너와 전역 변수를 등록 취소해야 합니다. 이렇게 하면 가비지 수집 대상이 됩니다.

코드 예:

background.js:

<code class="javascript">// Re-inject content scripts on reloading/installing the extension
// (See example in link provided in QA)</code>

content.js:

<code class="javascript">// Generate a unique message ID for the orphan check
const orphanMessageId = chrome.runtime.id + 'orphanCheck';

// Register a listener for the orphan check message
window.addEventListener(orphanMessageId, unregisterOrphan);

// ... (Continue with original content script code) ...

// Function to unregister the orphaned script
function unregisterOrphan() {
  // Check if the extension is uninstalled
  if (!chrome.runtime.id) {
    // The script is not orphaned
    return;
  }
  
  // Remove the orphan message listener
  window.removeEventListener(orphanMessageId, unregisterOrphan);

  // Remove DOM event listeners
  document.removeEventListener('mousemove', onMouseMove);

  // Remove runtime message listener (try-catch required in some cases)
  try {
    chrome.runtime.onMessage.removeListener(onMessage);
  } catch (e) {}
}</code>

popup.js:

<code class="javascript">// Function to send a message and ensure a content script is injected before doing so
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);
  }
}

// Function to check if a content script is running and re-inject it if not
async function ensureContentScript(tabId) {
  try {
    // Check if the content script is running
    const [{ result }] = await chrome.scripting.executeScript({
      target: { tabId },
      func: () => window.running === true,
    });
    
    // If not, inject the content script
    if (!result) {
      await chrome.scripting.executeScript({
        target: { tabId },
        files: ['content.js'],
      });
    }
    
    return true;
  } catch (e) {}
}</code>

이 접근 방식을 사용하면 분리된 스크립트가 정리됩니다. 나머지 확장 프로그램과의 통신이 복원될 수 있습니다.

위 내용은 Chrome 확장 프로그램 업데이트 후 고아 스크립트를 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.