Como remover script órfão após atualização da extensão do Chrome

Problema

Recarregar acidentalmente uma extensão do Chrome, especialmente aquelas no modo de desenvolvedor, pode criar conteúdo órfão roteiros. Esses scripts permanecem em execução em segundo plano, mas perdem a comunicação com o restante da extensão, resultando em erros como "contexto de extensão invalidado" e "runtime.lastError não verificado".

Solução

O órfão script de conteúdo ainda pode receber mensagens DOM. Para removê-lo:

1. Enviar mensagem do novo script de conteúdo:

• No novo script de conteúdo funcional, envie uma mensagem para o script órfão usando window.dispatchEvent.
• Use um identificador de mensagem exclusivo , como orphanMessageId.

2. Cancelar registro de ouvintes em script órfão:

• No script órfão, defina um ouvinte para orphanMessageId.
• Dentro deste ouvinte, cancele o registro de todos os ouvintes anteriores e anule variáveis ​​globais.
• Isso torna o script antigo elegível para coleta de lixo.

3. Script em segundo plano:

• Injete novamente o script de conteúdo ao recarregar/instalar a extensão.

4. Script de conteúdo:

• Use funções nomeadas para ouvintes de eventos para preservar suas referências.
• Defina uma propriedade window.running para indicar uma instância ativa.
• Ao receber o orphanMessageId, cancele o registro dos ouvintes e marque o script como órfão.

5. Script pop-up:

• Verifique se um script de conteúdo funcional está presente antes de enviar mensagens.
• Utilize garantirContentScript para garantir a injeção de script.

Código de exemplo:

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