Atualizar uma extensão do Chrome do Manifest V2 para o Manifest V3 é uma etapa crítica para os desenvolvedores, já que o Google descontinuou o suporte para o Manifest V2. Neste artigo, percorreremos o processo de atualização de uma extensão Pomodoro Timer, originalmente construída com Manifest V2, para o padrão Manifest V3 mais recente.

Minha história

Eu tinha uma extensão do Pomodoro Timer que fiz há 4 anos por nada e recebi uma notificação do Google de que precisava atualizar o Manifest.

A versão original do meu Pomodoro Timer foi algo que eu mesmo projetei, com um rugido do T-Rex como notificação de fim de ciclo?. Foi peculiar e divertido, fiquei até surpreso ao ver 24 pessoas usando.

Era assim que parecia:

Minha esposa recentemente começou a aprender design e como preciso atualizar o Manifest, pedi a ela para atualizar o design. O resultado está no final do artigo. Spoiler: acho que ficou ótimo.

Por que atualizar para o Manifesto V3?

O Manifest V3 introduz várias mudanças importantes destinadas a melhorar a privacidade, a segurança e o desempenho nas extensões do Chrome. Essas mudanças incluem:

• Service Workers: As páginas de segundo plano são substituídas por service workers, que são mais eficientes porque não são executados continuamente.
• Segurança aprimorada: Escopos de permissão reduzidos e introdução da API declarativaNetRequest para gerenciar solicitações de rede.
• Melhor desempenho: Ao otimizar a forma como as extensões interagem com os recursos do navegador, a V3 garante um melhor gerenciamento de recursos.

Etapa 1: Compreendendo as principais diferenças

Antes de mergulhar na atualização, é importante entender as principais mudanças entre o Manifesto V2 e V3:

1. Scripts em segundo plano: Na V2, os scripts em segundo plano eram executados continuamente. Na V3, eles são substituídos por service workers que são executados somente quando necessário.
2. Permissões: O Manifest V3 requer declaração explícita de todas as permissões, e certas permissões foram descontinuadas ou substituídas.
3. Alterações de API: Algumas APIs foram removidas ou substituídas, e o sistema de mensagens entre diferentes componentes da extensão foi atualizado.

Etapa 2: atualizando o arquivo de manifesto

Veja como você atualizaria o arquivo manifest.json de V2 para V3 para uma extensão Pomodoro Timer:

Exemplo de manifesto original V2:

{
  "name": "Pomodoro Clock",
  "version": "1.1.0",
  "description": "Simple background timer for productivity",
  "manifest_version": 2,
  "permissions": ["storage"],
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "img/tomato16.png",
      "32": "img/tomato32.png",
      "48": "img/tomato48.png",
      "128": "img/tomato128.png"
    }
  },
  "icons": {
    "16": "img/tomato16.png",
    "32": "img/tomato32.png",
    "48": "img/tomato48.png",
    "128": "img/tomato128.png"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "options_page": "options.html"
}

Exemplo de manifesto V3 atualizado:

{
  "name": "Pomodoro Timer & Focus Clock",
  "version": "2.0.1",
  "description": "Boost productivity with this simple Pomodoro timer. Focus on tasks, minimize distractions, and manage your time effectively.",
  "manifest_version": 3,
  "permissions": ["storage","notifications","alarms"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "img/tomato16.png",
      "32": "img/tomato32.png",
      "48": "img/tomato48.png",
      "128": "img/tomato128.png"
    }
  },
  "icons": {
    "16": "img/tomato16.png",
    "32": "img/tomato32.png",
    "48": "img/tomato48.png",
    "128": "img/tomato128.png"
  },
  "background": {
    "service_worker": "background.js"
  }
}

Principais alterações no manifesto:

Roteiro de fundo:

• V2: "background": {"scripts": ["background.js"]}
• V3: "background": {"service_worker": "background.js"}

Na V3, os scripts em segundo plano são substituídos por service workers. Os prestadores de serviço só funcionam quando necessário, melhorando a eficiência dos recursos.

Ação versus ação do navegador:

• V2: "ação_do_navegador": { ... }
• V3: "ação": { ... }

browser_action foi substituído por action, que consolida a funcionalidade e simplifica o manifesto.

Etapa 3: Atualizando o script em segundo plano para usar service workers

Minha extensão usou um setInterval() simples em segundo plano, com service worker esse comportamento não funcionará, porque para economizar recursos do navegador ele é executado apenas quando necessário.

No meu caso, tive que modificar o cronômetro e armazenar o carimbo de data e hora no armazenamento, usar alarmes para agendar a execução do código de acionamento do chamador de notificação.

E, claro, usei as notificações integradas do Chrome para enviar notificações e se livrar da irritante traseira do t-rex. Se eu for lido pelos primeiros usuários da minha extensão, sinto muito por isso?

Não haverá um exemplo de código aqui porque é muito específico.

Conclusão

Aqui está o resultado. Eu acho que é muito legal. Minimalista e fácil de usar

A atualização não foi tão difícil, o principal é entender a diferença entre um script de segundo plano antigo e um service worker, mas tome cuidado com os Alarmes, até consegui travar o Chrome algumas vezes durante o teste?

Sinta-se à vontade para experimentar a extensão Pomodoro Timer & Focus Clock atualizada e boa sorte ao atualizar a sua!