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 „unchecked 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 secureContentScript, um die Skriptinjektion sicherzustellen.

Beispielcode:

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