#Introducción

Addfox es un marco de desarrollo de extensiones de navegador basado en Rsbuild, que te ayuda a desarrollar y construir extensiones para Chrome y Firefox en el mismo proyecto.

#¿Por qué elegir Addfox?

Desarrollar extensiones de navegador debería ser simple: solo necesitas tecnologías web como HTML, JavaScript y CSS. Pero en la realidad, problemas como la recarga en caliente, la depuración de errores y la integración con frameworks frontend han plagado a los desarrolladores.

El objetivo de Addfox es devolver la simplicidad al desarrollo de extensiones:

En la era de la IA, Addfox va un paso más allá, permitiendo que la IA comprenda y asista mejor en el desarrollo de tus extensiones:

• Estructura de proyecto amigable para IA — Genera automáticamente documentación estructurada como llms.txt, meta.md, etc., permitiendo que los asistentes de IA comprendan rápidamente la arquitectura y configuración del proyecto
• Salida de errores en terminal — Los errores durante el desarrollo se muestran directamente en la terminal, sin necesidad de abrir las DevTools del navegador, facilitando el uso de la función Ask AI en cualquier editor
• Soporte de Skills — Biblioteca de skills de IA reutilizables incorporada (como migrate-to-addfox, addfox-debugging, etc.), permitiendo que los asistentes de IA ayuden de manera más profesional en el desarrollo y la depuración
• Mínimas restricciones de código — No impone una forma específica de organizar el código, el código generado por IA puede integrarse perfectamente en el proyecto

Ya seas desarrollador o uses IA para asistirte en el desarrollo, Addfox ofrece una mejor experiencia.

#Características

#Para desarrolladores

Hot reload, soporte multi-navegador y configuración minimalista para entregar extensiones más rápido.

#Para IA

Meta estructurada, salida de errores en terminal y Skills para que la IA entienda y extienda tu extensión.

#Conceptos principales

Addfox encapsula los puntos de dolor comunes en el desarrollo de extensiones:

• Descubrimiento automático de entry — Coloca los archivos según la convención, sin necesidad de configurar entry manualmente
• Procesamiento inteligente de Manifest — Inyecta automáticamente las rutas construidas
• Recarga automática en desarrollo — WebSocket escucha la finalización de la construcción y actualiza la extensión automáticamente

#Comparación con otras soluciones

El ecosistema de desarrollo de extensiones de navegador es más rico gracias a estos excelentes frameworks. WXT aporta el rendimiento de Vite y un sistema de plugins bien diseñado, junto con una experiencia de desarrollo intuitiva basada en convenciones. Plasmo ofrece integración completa con servicios en la nube y excelente experiencia de desarrollo listo para usar. Extension.js es conocido por su simplicidad y facilidad de uso, ideal para desarrollo rápido de prototipos. Cada framework ha contribuido significativamente a reducir la barrera de entrada al desarrollo de extensiones.

Addfox aprende de estas excelentes prácticas mientras sigue su propio camino:

Ventajas únicas de Addfox:

• Velocidad extrema de Rsbuild — Arranque en frío y recarga en caliente más rápidos que las soluciones Vite/Parcel
• Diseño priorizando la IA — llms.txt incorporado, salida de errores estructurada y soporte de Skills, diseñado específicamente para desarrollo asistido por IA
• Máxima libertad — No impone estructura de archivos, sin APIs personalizadas, usa la forma de organizar código que prefieras
• Realmente independiente del framework — Sin necesidad de envolver componentes o adaptadores especiales, funciona perfectamente con cualquier framework de UI

#Inicio rápido

# Crear proyecto con el scaffolding
pnpm create addfox-app

# Entrar al directorio del proyecto
cd my-extension

# Iniciar servidor de desarrollo
pnpm dev

Edita el archivo app/popup/index.tsx, guarda y la extensión se recargará automáticamente.

#Siguientes pasos

• Guía de instalación — Pasos detallados para crear un proyecto
• Estructura del directorio — Comprende la organización del proyecto
• Referencia de configuración — Ver todas las opciones de configuración