Show HN: Criei uma ferramenta CLI para gerar extensões web sem configuração de build

 (github.com/cezaraugusto)
4 pontos por GN⁺ 2024-05-02 | 1 comentários | Compartilhar no WhatsApp
  • Extension.js é uma CLI para criar extensões web para Chrome, Edge e Firefox, permitindo começar o desenvolvimento apenas com npx extension@latest create my-extension e npm run dev
  • O objetivo é reduzir a fragmentação do Manifest V3, diferenças entre navegadores, ausência de hot reload em scripts de conteúdo e pipelines de build separados por destino a um fluxo de desenvolvimento sem configuração
  • Oferece Hot Module Replacement para scripts de background, conteúdo, popup e opções, com suporte de primeira classe a componentes React, Vue, Svelte e Preact, além de TypeScript
  • Com extension build --zip, é possível criar um ZIP de produção para envio à Chrome Web Store, Edge Add-ons e Firefox AMO, além de builds específicos por navegador, como --browser=firefox
  • Também pode ser adotado em extensões existentes adicionando extension@latest como dependência de desenvolvimento e conectando os scripts build, dev e preview

Problemas que o Extension.js busca resolver

  • Extension.js é uma ferramenta CLI para criar extensões para Chrome, Edge e Firefox
  • O fluxo básico de uso consiste em criar um novo projeto e depois iniciar o servidor de desenvolvimento
    • npx extension@latest create my-extension
    • cd my-extension
    • npm run dev
  • Funciona com npm, pnpm, yarn e bun
  • A documentação, os templates e os exemplos são fornecidos respectivamente em Documentation, Templates e Examples

Experiência de desenvolvimento e recursos principais

  • Foca em reduzir problemas comuns no desenvolvimento de extensões de navegador, como fragmentação do Manifest V3, diferenças entre navegadores, falta de hot reload para scripts de conteúdo e pipelines de build por destino
  • Hot Module Replacement é aplicado a scripts de background, content, popup e options
    • Inclui também componentes React, Vue, Svelte e Preact
  • Usa Manifest V3 por padrão e fornece adaptadores automáticos para os alvos Chrome, Edge e Firefox
  • Com uma única CLI, é possível executar tendo como alvo Chrome, Edge, Firefox e binários baseados em Chromium ou Gecko
  • Busca uma abordagem zero config, sem webpack, rollup ou plugins para manter
  • Oferece suporte de primeira classe a TypeScript, React, Vue, Svelte e Preact
  • Com extension build --zip, é possível criar builds de produção adequados para envio à Chrome Web Store e ao Firefox Add-ons
  • Também pode ser adicionado a extensões existentes como uma única devDependency

Diferenciais em relação a outras ferramentas de desenvolvimento de extensões

  • Apresenta as diferenças do Extension.js por recurso para usuários que já experimentaram Plasmo, WXT e CRXJS
  • É possível executar amostras do GitHub diretamente
  • Fornece binários de navegador gerenciados
    • Ex.: extension install firefox baixa uma build isolada do Firefox
  • Inclui HMR cross-browser para scripts de conteúdo, sem necessidade de conectar plugins separados
  • Permite criar ZIPs de produção para envio às lojas
    • Ex.: extension build --zip
  • Não é dependente de framework
  • Permite especificar binários personalizados de Chromium e Gecko
    • --chromium-binary
    • --gecko-binary

Frameworks e navegadores suportados

  • Os frameworks suportados e exemplos de execução são fornecidos como templates ou exemplos
  • Flags relacionadas a navegador podem ser usadas em extension dev, extension start e extension preview
    • --browser <chrome | edge | firefox> seleciona o navegador
    • --chromium-binary <path-to-binary> especifica um binário Chromium personalizado
    • --gecko-binary <path-to-binary> especifica um binário Gecko ou Firefox personalizado
  • Os navegadores suportados são Google Chrome, Microsoft Edge, Mozilla Firefox, baseados em Chromium e baseados em Gecko
  • Apple Safari aparece marcado como Next

Build, empacotamento e navegadores gerenciados

  • O build de produção é executado com npx extension@latest build
  • O pacote ZIP para envio às lojas é gerado com npx extension@latest build --zip
  • Builds específicos por navegador também são possíveis
    • Ex.: npx extension@latest build --browser=firefox --zip
  • Flags úteis de build são fornecidas
    • --zip: empacota como ZIP para upload em lojas
    • --zip-source: inclui os arquivos-fonte para revisão de código-fonte pela loja
    • --zip-filename <name>: controla o nome do arquivo de saída
    • --polyfill: ativa o polyfill webextension cross-browser
  • O Extension.js pode baixar e gerenciar binários de navegador isolados para sessões de desenvolvimento limpas
    • npx extension@latest install firefox
    • npx extension@latest install --browser=all
    • npx extension@latest install --where

Extensões existentes e execução de amostras

  • Em extensões existentes, ele é instalado como dependência de desenvolvimento
    • npm install extension@latest --save-dev
  • É possível usá-lo conectando extension build, extension dev e extension preview aos scripts do package.json
    • npm run dev: desenvolvimento
    • npm run build: build de produção
    • npm run preview: verificar a saída de produção
  • É possível trazer e executar diretamente amostras do Chrome Extension Samples
  • A comunidade e os exemplos estão disponíveis em Discord, GitHub issues e examples
  • A licença é MIT

Leituras relacionadas

1 comentários

 
GN⁺ 2024-05-02
Comentários do Hacker News

  • Projeto bacana. Estou pensando em usar também na minha extensão (https://github.com/herrherrmann/omnivore-list-popup)
    Até agora eu vinha cuidando por conta própria, com scripts, do build da extensão e do gerenciamento do modo de desenvolvimento, mas já estava vendo se dava para fazer isso de forma mais prática com web-ext
    Só que meu navegador principal é o Firefox, e o Extension.js ainda não parece oferecer suporte completo ao Firefox

    • Um Mozilla Add-On pode rodar no Chrome ou no Edge com a flag --polyfill, mas hoje ainda é preciso adicionar a extensão manualmente no Firefox
      Há planos de incluir suporte ao Firefox em breve, mas por enquanto não há um launcher de navegador

  • É exatamente a ferramenta de que eu precisava agora. Obrigado por criar e compartilhar, e espero que o suporte ao Firefox fique bom
    Issue de suporte ao Firefox: https://github.com/cezaraugusto/extension.js/issues/5

    • Seria ótimo se ajudasse especialmente a lidar com requisitos conflitantes no manifest.json
      Por exemplo, há diferenças entre páginas de evento e service workers em segundo plano, ou casos em que as permissões exigidas ou proibidas variam de forma inconsistente entre navegadores
    • Seria bom acrescentar mais detalhes na issue de suporte ao Firefox no GitHub. A comunidade talvez possa ajudar a resolver

  • Estou meio confuso. Já escrevi uma extensão só para Chrome em JavaScript, e começar foi basicamente copiar alguns arquivos do site de documentação de extensões do Chrome
    Não configurei IDE à parte e nem sei bem o que deveria fazer
    Quero entender o que essa ferramenta faz além de copiar alguns arquivos. Fico me perguntando se é suporte cross-browser ou suporte a várias linguagens

    • Nesse caso, o Extension.js pode cuidar de detalhes de configuração que são fáceis de deixar passar no desenvolvimento web comum
      Depois de copiar alguns arquivos da documentação de extensões do Chrome, você precisa ativar manualmente o “modo de desenvolvedor” no navegador e adicionar os arquivos. Quando altera o código, precisa recarregar manualmente os vários contextos de execução afetados pela extensão do navegador para ver as mudanças. Para testar em vários navegadores, é preciso repetir esse processo em cada um
      Se quiser usar dependências de pacotes como TypeScript ou frameworks JavaScript, você precisa depender de algum framework de abstração para extensões já existente e aprender uma nova abordagem, ou criar sua própria configuração com ferramentas como webpack, Parcel ou esbuild. A essa altura, o desenvolvimento de extensões de navegador pode ficar complexo e frustrante
      O Extension.js simplifica isso automatizando o processo de empacotar e executar a extensão em navegadores de desenvolvimento. Ele oferece recarregamento automático para todos os contextos de execução, inclusive áreas do navegador que não são HTML/CSS/JavaScript, e também dá suporte a dependências de código como TypeScript e React só com a instalação, sem mágica de configuração adicional. Também roda simultaneamente em vários navegadores

  • Bom projeto. Fiz minha primeira extensão para Chrome com https://crxjs.dev/vite-plugin/getting-started, mas deu bastante trabalho fazer os estilos funcionarem direito
    Talvez tenha sido por ser meu primeiro desenvolvimento de extensão de navegador: https://chromewebstore.google.com/detail/bettermenu-for-door...
    Ainda tenho muita coisa para fazer, então também vou dar uma olhada neste projeto

  • Muito legal. Até o README está lindo e bem feito
    Eu vinha adiando colocar uma extensão no app porque o Google Play é uma bagunça, mas pretendo experimentar isso

  • Legal. Fico curioso para saber como ele se compara ao Plasmo, um framework parecido
    https://www.plasmo.com/

    • Acho que a maior diferença é que o Plasmo é um framework. Ou seja, para criar uma nova extensão, você precisa aprender a abstração dele e depender de exemplos feitos para essa abstração
      Também precisa seguir arquivos de configuração e regras específicas que não estão necessariamente relacionados à própria extensão de navegador
      Já o Extension.js permite criar extensões com as APIs padrão de extensões e abstrai apenas os arquivos de configuração. Não é preciso aprender detalhes específicos da ferramenta. Assim, se exemplos do Chrome ou da MDN funcionam tendo o arquivo de manifesto como única referência, não é necessário refatorá-los para usar no Extension.js, o que facilita iniciar um novo projeto e criar protótipos
    • O Plasmo parece muito útil. Fico curioso para saber se você já o usou de fato no desenvolvimento de extensões

  • Já fiz algumas extensões. Uma era meio de brincadeira: quando o imgur mudou a cor do coração e todo mundo reclamou, ela mudava essa cor
    Toda vez que faço uma extensão para Chrome, tenho uma forte síndrome do impostor. Por algum motivo, é difícil demais criar um novo projeto, então uma ferramenta assim seria muito boa

    • Concordo totalmente. Acho que desenvolver extensões deveria ser divertido por natureza. Espero que o Extension.js ajude no seu próximo projeto

  • Gostei. Seria bom se também passasse um pouco de mágica na comunicação entre extensão e abas
    Toda vez que faço uma extensão, ler o DOM ou enviar mensagens da extensão para a aba ativa é sempre doloroso

    • O Plasmo tem uma biblioteca de mensageria que vale olhar
      https://docs.plasmo.com/framework/messaging
    • Não está nos planos imediatos, mas enquanto isso certamente deve haver alguma boa biblioteca no npm
    • Fico curioso se você pode compartilhar mais sobre o que nesse processo é especialmente frustrante ou confuso

  • Adicionei uma issue. Suporte ao Safari deve ser relativamente simples usando a ferramenta CLI safari-web-extension-converter da Apple

  • Parece bom. Pretendo experimentar na minha extensão Vim for Docs
    É uma pena o Firefox não ser suportado, mas, de qualquer forma, também não há exatamente uma ferramenta de build de extensões que dê suporte tanto ao Firefox quanto a navegadores baseados em Chromium

    • O suporte ao Firefox deve entrar na próxima atualização. Pode esperar por isso