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

(github.com/cezaraugusto)

4 pontos por GN⁺ 2024-05-02 | 1 comentários | Compartilhar no WhatsApp

Introdução ao Extension.js

O Extension.js é uma ferramenta de desenvolvimento de extensões para diferentes navegadores no formato plug-and-play, sem necessidade de configuração
Suporta TypeScript, WebAssembly, React e JavaScript moderno por padrão, permitindo criar extensões multiplataforma

É possível criar uma nova extensão facilmente com o comando abaixo
```
npx extension create my-extension
cd my-extension
npm run dev
```
Após a execução dos comandos, você pode começar a desenvolver imediatamente quando uma nova instância do navegador é aberta

Exemplo: solicitar a amostra page-redder

npx extension dev https://github.com/GoogleChrome/chrome-extensions-samples/… --browser=edge

Exemplo: executar a amostra magic8ball no Edge

npx extension dev https://github.com/GoogleChrome/chrome-extensions-samples/… --browser=edge

Exemplo: executar a amostra Apply CSS do MDN WebExtensions Examples no Edge

npx extension dev https://github.com/mdn/webextensions-examples/tree/main/apply-css --browser=edge --polyfill=true

Se a extensão existente já usa um gerenciador de pacotes, é possível instalar o pacote do Extension.js e começar a executar scripts após a instalação
1. Instale o extension como devDependency
```
npm install extension --save-dev
```
2. Conecte os scripts do npm aos comandos do Extension.js
```
{
  "scripts": {
    "build": "extension build", 
    "dev": "extension dev",
    "start": "extension start"  
  },
  "devDependencies": {
    "extension": "latest"
  }
}
```
Use npm run dev para desenvolvimento, npm run start para visualização em modo de produção e npm run build para build de produção

Brave	Chrome	Edge	Firefox	Opera	Safari	Vivaldi
☑️	✅	✅	⛔️	☑️	⛔️	☑️

Firefox Android	iOS Safari
⛔️	⛔️

Para direcionar um navegador específico, passe a flag --browser para os comandos dev/start
- Ex.: npx extension dev path/to/extension --browser=edge
Dica: passar --browser="all" carrega todos os navegadores disponíveis de uma vez

O Extension.js parece uma ferramenta poderosa para desenvolvimento de extensões multiplataforma. Em especial, por poder ser usado imediatamente sem configuração e permitir suporte simples a vários navegadores, ele pode reduzir bastante o tempo de desenvolvimento.
É também uma grande vantagem poder aproveitar exemplos existentes, como os do Chrome Extension Samples e do MDN WebExtensions Examples. Isso parece facilitar bastante o início para desenvolvedores iniciantes.
No entanto, alguns navegadores, como Firefox ou Safari, parecem ainda não ser totalmente suportados, então é bom ter cautela. Se o foco for um único navegador, pode valer a pena considerar o uso das ferramentas de desenvolvimento específicas desse navegador.
Fico curioso para ver os prós e contras em comparação com ferramentas similares como Plasmo e a WebExtensions API. Em especial, parece necessário verificar como fica o suporte a especificações recentes como o Manifest V3.

GN⁺ 2024-05-02

Apresenta-se o Extension.js, um framework útil para desenvolvimento de extensões do Chrome
- O suporte atual ao Firefox ainda não está perfeito
Outros desenvolvedores também relataram dificuldades ao desenvolver extensões do Chrome
- Em especial, a aplicação de estilos era complicada
- Espera-se que o Extension.js resolva esses problemas
O README do Extension.js também recebeu elogios por estar bem escrito
Um desenvolvedor que evitava adicionar uma extensão ao app por causa da complexidade do Google Play também está considerando usar o Extension.js
Foi sugerido que seria ótimo incluir no Extension.js a comunicação entre a extensão e a aba
- Era inconveniente ler do DOM ou enviar mensagens da extensão para a aba ativa
Foi levantada uma pergunta sobre comparar com frameworks semelhantes, como o Plasmo
Foi mencionada a “síndrome do impostor” (Imposter Syndrome) ao desenvolver extensões do Chrome
- É difícil iniciar um projeto novo
- Espera-se que o Extension.js possa resolver isso
Sugeriu-se que o suporte ao Safari pode ser relativamente simples com a ferramenta CLI safari-web-extension-converter
Com base na experiência anterior em desenvolver extensões do Chrome, foi expressa curiosidade sobre as vantagens do Extension.js
- O que ele faz além de copiar arquivos?
- Suporte entre navegadores? Suporte a idiomas?
Um desenvolvedor que sentia falta de ferramentas para desenvolver extensões do Chrome expressou expectativas sobre o Extension.js