Chrome 拡張機能の更新後に孤立したスクリプトを削除する方法

問題

Chrome 拡張機能、特に開発者モードの拡張機能を意図せず再読み込みすると、孤立したコンテンツが作成される可能性がありますスクリプト。これらのスクリプトはバックグラウンドで実行されたままですが、残りの拡張機能との通信が失われ、「拡張コンテキストが無効になりました」や「unchecked runtime.lastError」などのエラーが発生します。

解決策

孤立コンテンツ スクリプトは引き続き DOM メッセージを受信できます。削除するには:

1.新しいコンテンツ スクリプトからメッセージを送信:

• 新しい作業中のコンテンツ スクリプトで、window.dispatchEvent を使用して孤立したスクリプトにメッセージを送信します。
• 一意のメッセージ ID を使用します。例: orphanMessageId.

2.孤立したスクリプトのリスナーの登録を解除します:

• 孤立したスクリプトで、orphanMessageId のリスナーを定義します。
• このリスナー内で、以前のリスナーをすべて登録解除し、グローバル変数を無効にします。
• これにより、古いスクリプトがガベージ コレクションの対象になります。

3.バックグラウンド スクリプト:

• 拡張機能のリロード/インストール時にコンテンツ スクリプトを再挿入します。

4.コンテンツ スクリプト:

• イベント リスナーの名前付き関数を使用して参照を保持します。
• アクティブなインスタンスを示すように window.running プロパティを設定します。
• orphanMessageId を受信したら、リスナーの登録を解除し、スクリプトを孤立としてマークします。

5.ポップアップ スクリプト:

• メッセージを送信する前に、動作するコンテンツ スクリプトが存在するかどうかを確認します。
• ensureContentScript を使用してスクリプト インジェクションを確実にします。

コード例:

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