Comment supprimer un script orphelin après la mise à jour de l'extension Chrome

Problème

Le rechargement involontaire d'une extension Chrome, en particulier celle en mode développeur, peut créer du contenu orphelin scripts. Ces scripts restent exécutés en arrière-plan mais perdent la communication avec le reste de l'extension, ce qui entraîne des erreurs telles que "contexte d'extension invalidé" et "runtime.lastError non vérifié".

Solution

Les orphelins le script de contenu peut toujours recevoir des messages DOM. Pour le supprimer :

1. Envoyer un message à partir du nouveau script de contenu :

• Dans le nouveau script de contenu fonctionnel, envoyez un message au script orphelin à l'aide de window.dispatchEvent.
• Utilisez un identifiant de message unique , tel que orphanMessageId.

2. Désenregistrer les écouteurs dans le script orphelin :

• Dans le script orphelin, définissez un écouteur pour l'orphanMessageId.
• Dans cet écouteur, désenregistrez tous les écouteurs précédents et annulez les variables globales.
• Cela rend l'ancien script éligible au garbage collection.

3. Script d'arrière-plan :

• Réinjectez le script de contenu lors du rechargement/de l'installation de l'extension.

4. Script de contenu :

• Utilisez des fonctions nommées pour les écouteurs d'événements afin de conserver leurs références.
• Définissez une propriété window.running pour indiquer une instance active.
• Lors de la réception de l'orphanMessageId, désenregistrez les auditeurs et marquez le script comme orphelin.

5. Script contextuel :

• Vérifiez si un script de contenu fonctionnel est présent avant d'envoyer des messages.
• Utilisez EnsureContentScript pour garantir l'injection de script.

Exemple de code :

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