Show HN: Crear una herramienta CLI para crear extensiones web sin configuración de build

(github.com/cezaraugusto)

4 puntos por GN⁺ 2024-05-02 | 1 comentarios | Compartir por WhatsApp

Introducción a Extension.js

Extension.js es una herramienta de desarrollo de extensiones cross-browser de tipo plug and play que no requiere configuración.
Soporta TypeScript, WebAssembly, React y JavaScript moderno para crear extensiones cross-browser.

Crear una nueva extensión

Podés crear una nueva extensión fácilmente con el siguiente comando
```
npx extension create my-extension
cd my-extension
npm run dev
```
Después de ejecutar el comando, cuando se abre una nueva instancia del navegador, podés comenzar a desarrollar de inmediato.

Usar Chrome Extension Samples

Podés comenzar a desarrollar rápidamente utilizando muestras del repositorio Chrome Extension Samples.
1. Abrí la terminal.
2. Navegá al directorio donde crearás el proyecto.
3. Ejecutá el siguiente comando
```
npx extension dev <sample-name>
```
- <sample-name> se debe reemplazar por el nombre de la muestra a usar de Chrome Extension Samples.

Ejemplo: solicitar la muestra page-redder

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

Usar Chrome Extension Samples en Microsoft Edge

Extension.js tiene soporte para varios navegadores, incluyendo Microsoft Edge.
Así se inicia una extensión compatible con Edge:
1. Abrí la terminal.
2. Navegá al directorio del proyecto deseado.
3. Ejecutá el siguiente comando
```
npx extension dev <sample-name> --browser=edge
```
- <sample-name> se debe reemplazar por el nombre de la muestra que se usará.

Ejemplo: ejecutar la muestra magic8ball en Edge

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

Ejecutar complementos de Mozilla en Edge

Para reducir la brecha entre Firefox y Edge, se pueden ejecutar complementos de Mozilla en Edge.
1. Navegá al directorio del proyecto.
2. Usá el siguiente comando
```
npx extension dev <addon-name> --browser=edge --polyfill=true
```
- Traé un complemento de Mozilla y ajústalo para Edge.

Ejemplo: ejecutar la muestra Apply CSS de MDN WebExtensions Examples en Edge

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

Usar Extension.js en una extensión existente

Si tu extensión existente ya usa un administrador de paquetes, podés instalar Extension.js y agregar scripts para ejecutarlo.
1. Instalar extension como devDependency
```
npm install extension --save-dev
```
2. Conectar los scripts de npm con los comandos de Extension.js
```
{
  "scripts": {
    "build": "extension build", 
    "dev": "extension dev",
    "start": "extension start"  
  },
  "devDependencies": {
    "extension": "latest"
  }
}
```
Durante el desarrollo usá npm run dev, para visualización de producción npm run start, y para build de producción npm run build.

Uso de un navegador específico para desarrollo

Estado de compatibilidad de navegadores de escritorio

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

☑️ = alta probabilidad de funcionamiento, pero sin soporte para el launcher del navegador
Estado de compatibilidad de navegadores móviles

Firefox Android	iOS Safari
⛔️	⛔️

Al dirigir la ejecución a un navegador específico, pasá la bandera --browser a los comandos dev/start.
- Ej: npx extension dev path/to/extension --browser=edge
Sugerencia: al pasar --browser="all" se cargan todos los navegadores disponibles de una vez.

Opinión de GN⁺

Extension.js se ve como una herramienta poderosa para desarrollar extensiones cross-browser. En especial, al poder usarla de inmediato sin configuración y soportar varios navegadores con facilidad, podría reducir mucho el tiempo de desarrollo.
También es una ventaja grande poder aprovechar muestras existentes como Chrome Extension Samples o MDN WebExtensions Examples. Incluso desarrolladores principiantes pueden empezar con relativa facilidad.
Sin embargo, parece que todavía hay navegadores como Firefox o Safari que no están totalmente soportados, así que conviene tener cuidado. Si el objetivo es un navegador específico, conviene evaluar usar las herramientas nativas de ese navegador.
Me intriga ver los pros y contras de comparar con herramientas similares como Plasmo y WebExtensions API. En particular, parece necesario comprobar si soporta especificaciones nuevas como Manifest V3.

1 comentarios

GN⁺ 2024-05-02

Comentario de Hacker News

Se presentó Extension.js como un framework útil para el desarrollo de extensiones de Chrome.
- Actualmente, el soporte para Firefox está incompleto.
Otros desarrolladores también compartieron que tuvieron dificultades al desarrollar extensiones de Chrome.
- En especial, aplicar estilos fue lo más engorroso.
- Esperan que Extension.js resuelva esos problemas.
El README de Extension.js también fue bien valorado porque está bien escrito.
Incluso un desarrollador que dudaba en agregar una extensión a su app por la complejidad de Google Play está considerando usar Extension.js.
Se sugirió que sería ideal que Extension.js incluyera también comunicación entre la extensión y las pestañas.
- Era incómodo leer desde el DOM o enviar mensajes a la pestaña activa desde la extensión.
Surgió la pregunta de comparar Extension.js con frameworks similares como Plasmo.
Se mencionó el síndrome del impostor que se vive al desarrollar una extensión de Chrome.
- Crear un nuevo proyecto era difícil.
- Se espera que Extension.js ayude a superar eso.
Para el soporte de Safari, se señaló que sería relativamente sencillo si se usa la herramienta CLI safari-web-extension-converter.
Basándose en la experiencia previa con extensiones de Chrome, alguien expresó curiosidad sobre las ventajas de Extension.js.
- ¿Qué función ofrece, además de simplemente copiar archivos?
- ¿Soporte multiplataforma? ¿Soporte de varios idiomas?
Se mostró expectativa por Extension.js de un desarrollador que sintió una falta de herramientas al crear extensiones de Chrome.