Show HN: Crean una herramienta CLI para generar extensiones web sin configuración de build

 (github.com/cezaraugusto)
4 puntos por GN⁺ 2024-05-02 | 1 comentarios | Compartir por WhatsApp
  • Extension.js es una CLI para construir extensiones web para Chrome, Edge y Firefox, y permite empezar a desarrollar solo con npx extension@latest create my-extension y npm run dev
  • Busca reducir la fragmentación de Manifest V3, las diferencias entre navegadores, la falta de hot reload en content scripts y los pipelines de build separados por destino mediante un flujo de desarrollo sin configuración
  • Ofrece Hot Module Replacement para scripts de background, content, popup y options, con soporte de primera clase para componentes de React, Vue, Svelte, Preact y TypeScript
  • Con extension build --zip se pueden crear ZIPs de producción para enviar a Chrome Web Store, Edge Add-ons y Firefox AMO, y también hacer builds por navegador con opciones como --browser=firefox
  • También puede adoptarse en extensiones existentes agregando extension@latest como dependencia de desarrollo y conectando los scripts build, dev y preview

El problema que Extension.js busca resolver

  • Extension.js es una herramienta CLI para crear extensiones de Chrome, Edge y Firefox
  • El flujo de uso básico consiste en crear un proyecto nuevo y luego ejecutar el servidor de desarrollo
    • npx extension@latest create my-extension
    • cd my-extension
    • npm run dev
  • Funciona con npm, pnpm, yarn y bun
  • La documentación, las plantillas y los ejemplos están disponibles en Documentation, Templates y Examples, respectivamente

Experiencia de desarrollo y funciones clave

  • Se enfoca en reducir la fragmentación de Manifest V3, las diferencias entre navegadores, la ausencia de hot reload en content scripts y los problemas de pipelines de build por destino en el desarrollo de extensiones
  • El Hot Module Replacement se aplica a scripts de background, content, popup y options
    • También incluye componentes de React, Vue, Svelte y Preact
  • Usa Manifest V3 por defecto y ofrece adaptadores automáticos para Chrome, Edge y Firefox
  • Con una sola CLI puede ejecutarse sobre Chrome, Edge, Firefox y binarios basados en Chromium o Gecko
  • Apunta a una experiencia zero config, sin webpack, rollup ni plugins que haya que mantener
  • Ofrece soporte de primera clase para TypeScript, React, Vue, Svelte y Preact
  • Con extension build --zip se pueden generar builds de producción listas para enviar a Chrome Web Store y Firefox Add-ons
  • También puede agregarse a extensiones existentes como una sola devDependency

Qué lo diferencia de otras herramientas de desarrollo para extensiones

  • Presenta las diferencias de Extension.js por función para usuarios que ya han usado Plasmo, WXT o CRXJS
  • Se pueden ejecutar muestras de GitHub directamente
  • Proporciona binarios de navegador administrados
    • Ejemplo: extension install firefox descarga un build aislado de Firefox
  • Incluye HMR multiplataforma entre navegadores para content scripts sin necesidad de conectar plugins adicionales
  • Puede generar ZIPs de producción para envío a tiendas
    • Ejemplo: extension build --zip
  • No depende de un framework específico
  • Permite especificar binarios personalizados de Chromium y Gecko
    • --chromium-binary
    • --gecko-binary

Frameworks y navegadores compatibles

  • Los frameworks compatibles y ejemplos de ejecución están disponibles como plantillas o ejemplos
  • En extension dev, extension start y extension preview pueden usarse flags relacionados con el navegador
    • --browser <chrome | edge | firefox> permite elegir el navegador
    • --chromium-binary <path-to-binary> permite indicar un binario personalizado de Chromium
    • --gecko-binary <path-to-binary> permite indicar un binario personalizado de Gecko o Firefox
  • Los navegadores compatibles son Google Chrome, Microsoft Edge, Mozilla Firefox, y navegadores basados en Chromium o Gecko
  • Apple Safari aparece marcado como Next

Build, empaquetado y navegadores administrados

  • El build de producción se ejecuta con npx extension@latest build
  • El paquete ZIP para enviar a las tiendas se genera con npx extension@latest build --zip
  • También se pueden hacer builds por navegador
    • Ejemplo: npx extension@latest build --browser=firefox --zip
  • Se ofrecen flags de build útiles
    • --zip: empaqueta como ZIP para subir a las tiendas
    • --zip-source: incluye los archivos fuente para la revisión del código fuente en la tienda
    • --zip-filename <name>: controla el nombre del archivo de salida
    • --polyfill: activa el webextension polyfill multiplataforma entre navegadores
  • Extension.js puede descargar y administrar binarios de navegador aislados para mantener sesiones de desarrollo limpias
    • npx extension@latest install firefox
    • npx extension@latest install --browser=all
    • npx extension@latest install --where

Extensiones existentes y ejecución de muestras

  • En extensiones existentes se instala como dependencia de desarrollo
    • npm install extension@latest --save-dev
  • Puede usarse conectando extension build, extension dev y extension preview en los scripts de package.json
    • npm run dev: desarrollo
    • npm run build: build de producción
    • npm run preview: revisar la salida de producción
  • Se pueden traer y ejecutar directamente muestras de Chrome Extension Samples
  • La comunidad y los ejemplos están disponibles en Discord, GitHub issues y examples
  • La licencia es MIT

Lecturas relacionadas

1 comentarios

 
GN⁺ 2024-05-02
Comentarios de Hacker News

  • Excelente proyecto. Estoy pensando en usarlo también para mi extensión (https://github.com/herrherrmann/omnivore-list-popup)
    Hasta ahora manejaba con scripts propios la compilación de la extensión y el modo de desarrollo, pero ya estaba viendo si podía hacerlo más cómodo con web-ext
    Sin embargo, mi navegador principal es Firefox, y parece que Extension.js todavía no lo soporta por completo

    • Los Mozilla Add-ons pueden ejecutarse en Chrome o Edge agregando la bandera --polyfill, pero por ahora en Firefox hay que añadir la extensión manualmente
      Hay planes de incorporar soporte para Firefox en el corto plazo, pero por ahora no hay un lanzador de navegador

  • Es justo la herramienta que necesito ahora. Gracias por crearla y compartirla; espero que el soporte para Firefox salga bien
    Issue de soporte para Firefox: https://github.com/cezaraugusto/extension.js/issues/5

    • En especial, sería bueno que ayudara a manejar los requisitos conflictivos de manifest.json
      Por ejemplo, las diferencias entre páginas de eventos y service workers en segundo plano, o los casos en que los permisos requeridos o prohibidos por cada navegador no son consistentes
    • Sería bueno que agregues más detalles al issue de soporte para Firefox en GitHub. La comunidad también podría ayudar a resolverlo

  • Estoy algo confundido. Ya escribí una extensión solo para Chrome en JavaScript, y empezar fue básicamente copiar algunos archivos del sitio de documentación de extensiones de Chrome
    No configuré nada especial en el IDE, y tampoco sé muy bien qué tendría que hacer
    Quiero entender qué aporta esta herramienta más allá de copiar algunos archivos. Me pregunto si es soporte cross-browser o soporte multilenguaje

    • En ese caso, Extension.js puede encargarse de detalles de configuración que en el desarrollo web común suelen pasarse por alto
      Después de copiar algunos archivos desde la documentación de extensiones de Chrome, hay que activar manualmente el “modo de desarrollador” en el navegador y agregar los archivos. Si cambias el código, para ver los cambios debes recargar manualmente los distintos contextos de ejecución a los que afecta la extensión del navegador. Si quieres probar en varios navegadores, hay que repetir ese proceso en cada uno
      Si quieres usar dependencias de paquetes como TypeScript o algún framework de JavaScript, tienes que depender de un framework de abstracción de extensiones ya existente y aprender su nuevo enfoque, o armar tu propia configuración con herramientas como webpack, Parcel o esbuild. Para ese punto, desarrollar extensiones de navegador puede volverse complejo y frustrante
      Extension.js simplifica esto automatizando el proceso de empaquetar y ejecutar la extensión en un navegador de desarrollo. Soporta recarga automática en todos los contextos de ejecución, incluyendo las áreas del navegador que no son HTML/CSS/JavaScript, y también soporta dependencias de código como TypeScript y React con solo instalarlas, sin magia adicional de configuración. También se ejecuta en varios navegadores al mismo tiempo

  • Buen proyecto. Hice mi primera extensión de Chrome con https://crxjs.dev/vite-plugin/getting-started, pero me costó bastante hacer que los estilos funcionaran correctamente
    Quizá fue porque era mi primer desarrollo de extensión de navegador: https://chromewebstore.google.com/detail/bettermenu-for-door...
    Todavía tengo mucho por hacer, así que también voy a revisar este proyecto

  • Realmente genial. Hasta el README está hermoso
    Como Google Play es un desastre, venía posponiendo agregarle una extensión a mi app, pero pienso probar esto

  • Genial. Me pregunto cómo se compara con Plasmo, un framework similar
    https://www.plasmo.com/

    • Creo que la diferencia más grande es que Plasmo es un framework. Es decir, para crear una nueva extensión tienes que aprender su abstracción y depender de ejemplos adaptados a esa abstracción
      También hay que seguir archivos de configuración y reglas específicas que no necesariamente tienen que ver con las extensiones de navegador en sí
      En cambio, Extension.js permite crear extensiones con las API estándar de extensiones y solo abstrae los archivos de configuración. No necesitas aprender detalles propios de la herramienta. Por eso, si los ejemplos de Chrome o MDN funcionan tomando el archivo de manifiesto como única referencia, no hace falta refactorizarlos para usarlos con Extension.js, lo que facilita iniciar proyectos nuevos y hacer prototipos
    • Plasmo se ve muy útil. Me pregunto si lo has usado realmente para desarrollar extensiones

  • He creado algunas extensiones. Una fue de broma: cuando imgur cambió el color del corazón y todos se quejaban, hice una extensión para cambiar ese color
    Cada vez que hago una extensión de Chrome me pega fuerte el síndrome del impostor. Por alguna razón, crear un proyecto nuevo se siente demasiado difícil, así que una herramienta como esta sería realmente buena

    • Totalmente de acuerdo. El desarrollo de extensiones debería ser divertido, ¿no? Espero que Extension.js te ayude en tu próximo proyecto

  • Me gusta. También estaría bueno que le agregaran un poco de magia a la comunicación entre la extensión y las pestañas
    Cada vez que hago una extensión, leer el DOM o enviar mensajes desde la extensión a la pestaña activa siempre es doloroso

    • Plasmo tiene una biblioteca de mensajería que vale la pena revisar
      https://docs.plasmo.com/framework/messaging
    • No está en los planes inmediatos, pero mientras tanto seguramente debe haber alguna buena biblioteca en npm
    • Me pregunto si podrías compartir más sobre qué parte de ese proceso te resulta especialmente frustrante o confusa

  • Agregué un issue. El soporte para Safari parece que sería relativamente sencillo usando la herramienta CLI safari-web-extension-converter de Apple

  • Se ve bien. Voy a probarlo con mi extensión, Vim for Docs
    Es una lástima que no soporte Firefox, pero de todas formas tampoco es que exista una herramienta de build de extensiones que soporte tanto Firefox como navegadores basados en Chromium

    • El soporte para Firefox entrará en la próxima actualización. Puedes esperarlo con ganas