Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie behebe ich „Extension Context Invalidated'-Fehler, die durch verwaiste Inhaltsskripts in Chrome-Erweiterungen verursacht werden?

Susan Sarandon
Freigeben: 2024-11-01 04:59:27
Original
891 Leute haben es durchsucht

How to Fix

So entfernen Sie verwaistes Skript nach dem Update der Chrome-Erweiterung

Problem

Das unbeabsichtigte Neuladen einer Chrome-Erweiterung, insbesondere im Entwicklermodus, kann zu verwaisten Inhalten führen Skripte. Diese Skripte laufen weiterhin im Hintergrund, verlieren jedoch die Kommunikation mit dem Rest der Erweiterung, was zu Fehlern wie „Erweiterungskontext ungültig gemacht“ und „ungeprüfter runtime.lastError“ führt.

Lösung

Die verwaiste Das Inhaltsskript kann weiterhin DOM-Nachrichten empfangen. Um es zu entfernen:

1. Nachricht vom neuen Inhaltsskript senden:

  • Senden Sie im neuen, funktionierenden Inhaltsskript eine Nachricht an das verwaiste Skript mit window.dispatchEvent.
  • Verwenden Sie eine eindeutige Nachrichtenkennung , wie orphanMessageId.

2. Registrierung von Listenern im verwaisten Skript aufheben:

  • Definieren Sie im verwaisten Skript einen Listener für die orphanMessageId.
  • Heben Sie in diesem Listener die Registrierung aller vorherigen Listener auf und machen Sie globale Variablen ungültig.
  • Dadurch ist das alte Skript für die Speicherbereinigung geeignet.

3. Hintergrundskript:

  • Fügen Sie das Inhaltsskript beim Neuladen/Installieren der Erweiterung erneut ein.

4. Inhaltsskript:

  • Verwenden Sie benannte Funktionen für Ereignis-Listener, um ihre Referenzen beizubehalten.
  • Legen Sie eine window.running-Eigenschaft fest, um eine aktive Instanz anzugeben.
  • Wenn Sie die orphanMessageId erhalten, heben Sie die Registrierung der Listener auf und markieren Sie das Skript als verwaist.

5. Popup-Skript:

  • Überprüfen Sie, ob ein funktionierendes Inhaltsskript vorhanden ist, bevor Sie Nachrichten senden.
  • Verwenden Sie „sureContentScript“, um die Skriptinjektion sicherzustellen.

Beispielcode:

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie behebe ich „Extension Context Invalidated'-Fehler, die durch verwaiste Inhaltsskripts in Chrome-Erweiterungen verursacht werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage