O Google usa tecnologia de IA na tradução de conteúdos para seu idioma de preferência. As traduções com IA podem ter erros.

Testar o encerramento do service worker com o Puppeteer

Este guia explica como criar extensões mais robustas testando o encerramento de service worker usando o Puppeteer. É importante estar preparado para lidar com o encerramento a qualquer momento, porque isso pode acontecer sem aviso prévio, resultando na perda de qualquer estado não persistente no service worker. Consequentemente, as extensões precisam salvar estados importantes e ser capazes de processar solicitações assim que forem iniciadas novamente quando houver um evento para processar.

Antes de começar

Clone ou faça o download do repositório chrome-extensions-samples. Vamos usar a extensão de teste em /functional-samples/tutorial.terminate-sw/test-extension, que envia uma mensagem ao service worker sempre que um botão é clicado e adiciona texto à página se uma resposta for recebida.

Você também precisa instalar o Node.JS, que é o ambiente de execução em que o Puppeteer é criado.

Etapa 1: iniciar o projeto Node.js

Crie os seguintes arquivos em um novo diretório. Juntos, eles criam um novo projeto Node.js e fornecem a estrutura básica de um conjunto de testes do Puppeteer usando o Jest como um executor de testes. Consulte Testar extensões do Chrome com Puppeteer para saber mais sobre essa configuração.

package.json:

{
  "name": "puppeteer-demo",
  "version": "1.0",
  "dependencies": {
    "jest": "^29.7.0",
    "puppeteer": "^24.8.1"
  },
  "scripts": {
    "start": "jest ."
  },
  "devDependencies": {
    "@jest/globals": "^29.7.0"
  }
}

index.test.js:

const puppeteer = require('puppeteer');

const SAMPLES_REPO_PATH = 'PATH_TO_SAMPLES_REPOSITORY';
const EXTENSION_PATH = `${SAMPLES_REPO_PATH}/functional-samples/tutorial.terminate-sw/test-extension`;
const EXTENSION_ID = 'gjgkofgpcmpfpggbgjgdfaaifcmoklbl';

let browser;

beforeEach(async () => {
  browser = await puppeteer.launch({
    // Set to 'new' to hide Chrome if running as part of an automated build.
    headless: false,
    pipe: true,
    enableExtensions: [EXTENSION_PATH]
  });
});

afterEach(async () => {
  await browser.close();
  browser = undefined;
});

Perceba que nosso teste carrega o test-extension do repositório de amostras. O manipulador de browser.runtime.onMessage depende do estado definido no manipulador do evento browser.runtime.onInstalled. Como resultado, o conteúdo de data será perdido quando o service worker for encerrado, e a resposta a mensagens futuras vai falhar. Vamos corrigir isso depois de escrever o teste.

service-worker-broken.js:

let data;

browser.runtime.onInstalled.addListener(() => {
  data = { version: browser.runtime.getManifest().version };
});

browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
  sendResponse(data.version);
});

Etapa 2: instalar dependências

Execute npm install para instalar as dependências necessárias.

Etapa 3: escrever um teste básico

Adicione o teste a seguir à parte de baixo de index.test.js. Isso abre a página de teste da nossa extensão de teste, clica no elemento de botão e aguarda uma resposta do service worker.

test('can message service worker', async () => {
  const page = await browser.newPage();
  await page.goto(`chrome-extension://${EXTENSION_ID}/page.html`);

  // Message without terminating service worker
  await page.click('button');
  await page.waitForSelector('#response-0');
});

Execute o teste com npm start e confira se ele foi concluído com sucesso.

Etapa 4: encerrar o service worker

Adicione a seguinte função auxiliar, que encerra o service worker:

/**
 * Stops the service worker associated with a given extension ID. This is done
 * by creating a new Chrome DevTools Protocol session, finding the target ID
 * associated with the worker and running the Target.closeTarget command.
 *
 * @param {Page} browser Browser instance
 * @param {string} extensionId Extension ID of worker to terminate
 */
async function stopServiceWorker(browser, extensionId) {
  const host = `chrome-extension://${extensionId}`;

  const target = await browser.waitForTarget((t) => {
    return t.type() === 'service_worker' && t.url().startsWith(host);
  });

  const worker = await target.worker();
  await worker.close();
}

Por fim, atualize o teste com o seguinte código. Agora encerre o service worker e clique no botão novamente para verificar se você recebeu uma resposta.

test('can message service worker when terminated', async () => {
  const page = await browser.newPage();
  await page.goto(`chrome-extension://${EXTENSION_ID}/page.html`);

  // Message without terminating service worker
  await page.click('button');
  await page.waitForSelector('#response-0');

  // Terminate service worker
  await stopServiceWorker(page, EXTENSION_ID);

  // Try to send another message
  await page.click('button');
  await page.waitForSelector('#response-1');
});

Etapa 5: executar o teste

Execute npm start. O teste vai falhar, o que indica que o service worker não respondeu após ser encerrado.

Etapa 6: corrigir o service worker

Em seguida, corrija o service worker removendo a dependência dele do estado temporário. Atualize a extensão de teste para usar o código a seguir, que está armazenado em service-worker-fixed.js no repositório.

service-worker-fixed.js:

browser.runtime.onInstalled.addListener(() => {
  browser.storage.local.set({ version: browser.runtime.getManifest().version });
});

browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
  browser.storage.local.get('version').then((data) => {
    sendResponse(data.version);
  });
  return true;
});

Aqui, salvamos a versão em browser.storage.local em vez de uma variável global para manter o estado entre os ciclos de vida do service worker. Como o armazenamento só pode ser acessado de forma assíncrona, também retornamos "true" do listener onMessage para garantir que o callback sendResponse permaneça ativo.

Etapa 7: executar o teste novamente

Execute o teste novamente com npm start. Agora ele vai passar.

Próximas etapas

Agora você pode aplicar a mesma abordagem à sua própria extensão. Considere o seguinte:

Crie seu pacote de testes para oferecer suporte à execução com ou sem encerramento inesperado do service worker. Em seguida, execute os dois modos individualmente para deixar mais claro o que causou uma falha.
Escreva código para encerrar o service worker em pontos aleatórios dentro de um teste. Essa pode ser uma boa maneira de descobrir problemas difíceis de prever.
Aprenda com as falhas de teste e tente programar de forma defensiva no futuro. Por exemplo, adicione uma regra de linting para desencorajar o uso de variáveis globais e tente mover os dados para um estado mais persistente.