Chrome 拡張機能の孤立したコンテンツ スクリプトによって引き起こされる「拡張コンテキストが無効です」エラーを修正する方法

Susan Sarandon
リリース: 2024-11-01 04:59:27
オリジナル
819 人が閲覧しました

How to Fix

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

問題

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

解決策

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

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

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

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

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

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

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

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

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

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

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

コード例:

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!