Chrome 拡張機能のアップデート後に孤立したスクリプトを削除するにはどうすればよいですか?

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 中国語 Web サイトの他の関連記事を参照してください。