AddFox
  • Español

      • Construye mejores extensiones de navegadorpara desarrolladores e IA

      Acelera el desarrollo de tus extensiones de navegador. Basado en Rsbuild, rápido, simple y libre.

      Comenzar
      pnpm create addfox-app
      Ver en GitHub
      bash
      $ addfox dev
      [Addfox] 0.0.1 with Rsbuild 0.4.x
      [Addfox] ● Parse config 25ms
      EntryFile
      backgroundapp/background.ts
      contentapp/content/index.ts
      popupapp/popup/index.tsx
      [Addfox] ● Rsbuild ready 136ms
      [Rsbuild] start building app\content\index.ts
      [Rsbuild] ready built in 0.08 s
      [Addfox] ● Dev server http://localhost:3000 2ms
      [Addfox] ● Extension size: 1.24 MB
      🔒chrome-extension://.../welcome.html

      Addfox + React

      Your extension is ready. Happy building!

      Para desarrolladores

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

      HMR ultrarrápido

      Usa un Reloader independiente para controlar las actualizaciones de la extensión; no solo es rápido, content_script y background logran HMR ultrarrápido.

      ReloaderExtensionAddfoxRsbuild

      Soporte completo de navegadores

      Soporta navegadores principales basados en Chromium y Firefox. Sin configuración, identifica automáticamente la ruta de instalación predeterminada del navegador y lo inicia.

      ChromeFirefoxOperaBrave
      VivaldiArcYandexChromium

      Independiente del framework

      Puedes usar Vanilla, o también frameworks como Vue, React, Preact, Svelte, Solid o React+UnoCSS.

      VueReactPreactSvelteSolid
      TypeScriptJavaScript

      Soporte para content-ui

      Proporciona el método integrado createContentUI para integrar fácilmente Iframe, ShadowDom y contenido nativo.

      https://example.com/article
      Translate
      Original
      Selected text...
      Translation
      Translated result
      EN → ZH

      Ecosistema Rstack

      Soporte integrado para Rsdoctor y Rstest, permitiendo análisis rápido del bundle y pruebas unitarias y e2e.

      Soporte de salida Zip

      Genera automáticamente el paquete zip de la extensión al construir, facilitando la instalación y distribución.

      Para IA

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

      Soporte para llms.txt y metadatos markdown

      Proporciona información clara del plugin, errores y prompts para ayudar al desarrollo con AI agent.

      AIllms.txtMmeta.md!error.mdAI Agent

      Monitoreo de errores amigable con IA

      Habilita la salida de errores en terminal con --debug. Sin necesidad de operar en el navegador, domina todos los errores del plugin, facilitando el uso de Ask AI en cualquier Editor.

      bash
      $ addfox dev --debug
      error
      --- BEGIN AI PROMPT ---
      You are a frontend and browser extension development expert, proficient with the Addfox framework.
      This is an Addfox-based browser extension runtime error (MV3).
      Before proposing fixes:
      1) Read `.addfox/llms.txt` first.
      2) Apply the `addfox-debugging` skills to analyze this report (and `.addfox/error.md` / `.addfox/meta.md` if available).
      --- END AI PROMPT ---
      --- Addfox extension error ---
      bundler: rsbuild
      front-end-framework: React
      entry: content
      type: error
      time: 2026/3/21 20:58:51
      message: fff is not defined
      location: chrome-extension://fbnnalickbkocmeokpogajmocmcejemg/content/index.js:2966:1
      stack:
      ReferenceError: fff is not defined
      at ./app/content/index.ts (chrome-extension://fbnnalickbkocmeokpogajmocmcejemg/content/index.js:1635:45)
      at __webpack_require__ (chrome-extension://fbnnalickbkocmeokpogajmocmcejemg/content/index.js:2962:29)
      at chrome-extension://fbnnalickbkocmeokpogajmocmcejemg/content/index.js:4125:27
      at chrome-extension://fbnnalickbkocmeokpogajmocmcejemg/content/index.js:4126:3
      ---------------------------
      --- BEGIN AI PROMPT ---
      You are a frontend and browser extension development expert, proficient with the Addfox framework.
      This is an Addfox-based browser extension runtime error (MV3).
      Before proposing fixes:
      1) Read `.addfox/llms.txt` first.
      2) Apply the `addfox-debugging` skills to analyze this report (and `.addfox/error.md` / `.addfox/meta.md` if available).
      --- END AI PROMPT ---
      --- Addfox extension error ---
      bundler: rsbuild
      front-end-framework: React
      entry: content
      type: error
      time: 2026/3/21 20:58:51
      message: fff is not defined
      location: chrome-extension://fbnnalickbkocmeokpogajmocmcejemg/content/index.js:2966:1
      stack:
      ReferenceError: fff is not defined
      at ./app/content/index.ts (chrome-extension://fbnnalickbkocmeokpogajmocmcejemg/content/index.js:1635:45)
      at __webpack_require__ (chrome-extension://fbnnalickbkocmeokpogajmocmcejemg/content/index.js:2962:29)
      at chrome-extension://fbnnalickbkocmeokpogajmocmcejemg/content/index.js:4125:27
      at chrome-extension://fbnnalickbkocmeokpogajmocmcejemg/content/index.js:4126:3
      ---------------------------

      Soporte de Skills

      Skills extensibles, con soporte para Agent y automatización.

      migrate-to-addfox
      addfox-best-practices
      extension-functions-best-practices
      addfox-debugging
      addfox-testing
      migrate-to-addfox
      addfox-best-practices
      extension-functions-best-practices
      addfox-debugging
      addfox-testing
      migrate-to-addfox
      addfox-best-practices
      extension-functions-best-practices
      addfox-debugging
      addfox-testing
      migrate-to-addfox
      addfox-best-practices
      extension-functions-best-practices
      addfox-debugging
      addfox-testing
      addfox-debugging
      addfox-testing
      addfox-best-practices
      migrate-to-addfox
      extension-functions-best-practices
      addfox-debugging
      addfox-testing
      addfox-best-practices
      migrate-to-addfox
      extension-functions-best-practices
      addfox-debugging
      addfox-testing
      addfox-best-practices
      migrate-to-addfox
      extension-functions-best-practices
      addfox-debugging
      addfox-testing
      addfox-best-practices
      migrate-to-addfox
      extension-functions-best-practices

      Palabras del creador

      "
      Gomi
      Gomi
      Creator of VideoRoll and AddFox
      Soy Gomi, creador de la extensión de navegador Video Roll. Aunque mi extensión se convirtió en destacada en Chrome Web Store y Edge, con más de 35K usuarios, aún sentí insatisfacción durante el desarrollo de extensiones de navegador. Tras probar Parcel, Vite y otras herramientas, decidí resolver algunos dolores del desarrollo de extensiones. Aunque existen soluciones excelentes como WXT y Plasmo, me negué rotundamente a reinventar la rueda. La velocidad de Rsbuild y el paradigma de desarrollo amigable con IA me fascinaron, así que creé Addfox.

      Preguntas frecuentes

      Respuestas rápidas a preguntas comunes sobre Addfox

      Sí, Addfox es completamente de código abierto bajo licencia MIT. Puedes ver el código fuente en GitHub, contribuir al proyecto o hacer Fork según tus necesidades.
      Actualmente Addfox se enfoca en navegadores basados en Chromium (Chrome, Edge, Arc, Brave, etc.) y Firefox. Debido a que la API de extensiones y los requisitos de empaquetado de Safari son diferentes, no se soporta Safari por ahora.
      ¡Por supuesto! Addfox es independiente del framework, soporta React, Vue, Preact, Svelte, Solid y JavaScript/TypeScript nativo. Puedes usar tu framework favorito con muy poca configuración.
      WXT, Plasmo y Extension.js son frameworks excelentes que han impulsado enormemente el ecosistema de desarrollo de extensiones de navegador. WXT aporta el rendimiento de Vite y un sistema de plugins bien diseñado; Plasmo ofrece integración completa con servicios en la nube y excelente experiencia de desarrollo; Extension.js es conocido por su simplicidad. Addfox elige un camino diferente: construir sobre Rsbuild para velocidad extrema; diseñado específicamente para desarrollo asistido por IA, proporcionando metadatos estructurados y salida de errores en terminal; máxima flexibilidad con mínimas convenciones—puedes organizar tu código como prefieras mientras disfrutas de hot reload y soporte multi-navegador listo para usar.