Como Começar a Desenvolver Extensões de Navegador

Embora o desenvolvimento de extensões de navegador use tecnologias frontend, as APIs e os métodos de trabalho são diferentes das páginas web, então usar frameworks de desenvolvimento pode melhorar significativamente a eficiência. O desenvolvimento de extensões de navegador ainda é um campo de nicho em comparação com o desenvolvimento web e de aplicativos, e a comunidade de desenvolvedores é notavelmente menos ativa. Felizmente, todas as ferramentas de desenvolvimento necessárias estão disponíveis. Aqui está um resumo do que eu usei.

Atualmente, todos os principais navegadores seguem um padrão unificado para desenvolvimento de extensões: manifest v3, então o processo de desenvolvimento e a stack tecnológica são similares. Pode haver algumas diferenças nos detalhes, que vou apontar onde encontrei.

Frameworks de Desenvolvimento

Um framework de desenvolvimento qualificado deve pelo menos estabelecer a estrutura do repositório, suportar depuração com recarga instantânea, suportar dicas de tipos para interfaces de extensões de navegador, etc. Você pode escolher uma das seguintes stacks tecnológicas.

Template de Repositório de Código

React + typescript + vite + monorepo: https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite

Para ser preciso, é um template, não um framework. Ele inclui todas as características que um framework de desenvolvimento deveria ter. Para o desenvolvimento de extensões de navegador onde as interfaces não são muito complexas, eu pessoalmente prefiro templates de repositório que mostram todos os detalhes em vez de frameworks que ocultam os detalhes de implementação.

• Suporta HMR, sourcemap, etc.
• Usa pnpm + turbo para gerenciar monorepo
• Fornece implementações para todas as funcionalidades de extensões do Chrome, incluindo página inicial de abas, devtools, barra lateral, etc., facilitando a referência e substituição
• Empacotamento para Chrome, Firefox e outros navegadores principais. Compatibilidade padrão com Firefox
• Sem detalhes ocultos, todo o código está visível para facilitar o entendimento e modificação

Plasmo

Se você não gosta do template acima, pode considerar o framework Plasmo

• Suporta frameworks principais como React, Vue, Angular
• Suporta recursos de depuração como HMR
• Usa Parcel para empacotamento, não vite
• Alguns detalhes (como geração de manifesto, processo de renderização de UI de conteúdo) são encapsulados, tornando-os mais difíceis de entender

Depuração

• Carregamento da extensão
  • Execute npm dev no repositório
  • Abra extensões no Chrome: chrome://extensions/
  • Ative o “Modo desenvolvedor” -> Clique em “Carregar sem compactação” -> Selecione a pasta de saída compilada
• A depuração é implementada através do Chrome DevTools
  • Scripts de conteúdo: Selecione “Content Scripts” na aba “Fontes” para depurar código
  • O script de fundo é executado em um service worker, então abra chrome://extensions/ -> Encontre a extensão -> Clique em service worker para depurar código