Cómo eliminar el script huérfano después de la actualización de la extensión de Chrome

Problema

Recargar involuntariamente una extensión de Chrome, particularmente aquellas en modo desarrollador, puede crear contenido huérfano guiones. Estos scripts permanecen ejecutándose en segundo plano pero pierden comunicación con el resto de la extensión, lo que genera errores como "contexto de extensión invalidado" y "tiempo de ejecución no verificado.lastError".

Solución

Los scripts huérfanos El script de contenido aún puede recibir mensajes DOM. Para eliminarlo:

1. Enviar mensaje desde una nueva secuencia de comandos de contenido:

• En la nueva secuencia de comandos de contenido funcional, envíe un mensaje a la secuencia de comandos huérfana usando window.dispatchEvent.
• Utilice un identificador de mensaje único , como orphanMessageId.

2. Anular el registro de oyentes en script huérfano:

• En el script huérfano, defina un oyente para huérfanoMessageId.
• Dentro de este oyente, cancele el registro de todos los oyentes anteriores y anule las variables globales.
• Esto hace que el script antiguo sea elegible para la recolección de basura.

3. Script en segundo plano:

• Vuelva a inyectar el script de contenido al recargar/instalar la extensión.

4. Guión de contenido:

• Utilice funciones con nombre para que los detectores de eventos conserven sus referencias.
• Establezca una propiedad window.running para indicar una instancia activa.
• Al recibir el orphanMessageId, cancele el registro de los oyentes y marque el script como huérfano.

5. Script emergente:

• Compruebe si hay un script de contenido funcional antes de enviar mensajes.
• Utilice sureContentScript para garantizar la inyección del script.

Código de ejemplo:

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