AddFox
  • Español

      • Ejemplos

      Esta página lista los ejemplos de extensión en el repositorio de addfox, cada ejemplo es un directorio independiente con package.json y addfox.config.ts. Después de instalar dependencias con pnpm / npm / yarn / bun en la raíz del repositorio, ejecuta dev o build en el directorio del ejemplo correspondiente para ejecutar o construir.

      EjemploDescripciónEnlace del repositorio
      addfox-with-vuePlantilla Vue 3: popup, options, content, background, con comunicación de mensajes simple.examples/addfox-with-vue
      addfox-with-reactPlantilla React: popup, options, content, background, con comunicación de mensajes simple.examples/addfox-with-react
      addfox-with-preactPlantilla Preact: popup, options, content, background, con comunicación de mensajes simple.examples/addfox-with-preact
      addfox-with-sveltePlantilla Svelte: popup, options, content, background, con comunicación de mensajes simple.examples/addfox-with-svelte
      addfox-with-solidPlantilla Solid: popup, options, content, background, con comunicación de mensajes simple.examples/addfox-with-solid
      addfox-with-react-shadcnReact + shadcn/ui: cinco entradas popup, options, content, background, sidepanel, Tailwind + biblioteca de componentes.examples/addfox-with-react-shadcn
      addfox-with-devtoolsTypeScript nativo puro: solo background + devtools_page, sin React/Vue, demostración de extensión DevTools.examples/addfox-with-devtools
      addfox-with-content-uiEjemplo de Content UI: demuestra el montaje de UI de extensión en la página.examples/addfox-with-content-ui
      addfox-with-content-ui-reactEjemplo de Content UI en React.examples/addfox-with-content-ui-react
      addfox-with-tailwindcssEjemplo de integración de Tailwind CSS.examples/addfox-with-tailwindcss
      addfox-with-unoEjemplo de integración de UnoCSS.examples/addfox-with-uno
      addfox-with-vue-tsxEjemplo de Vue + TSX.examples/addfox-with-vue-tsx
      addfox-with-firefoxEjemplo de construcción y ejecución con objetivo Firefox.examples/addfox-with-firefox
      addfox-with-mv2Ejemplo de compatibilidad con Manifest V2 (para migración/comparación).examples/addfox-with-mv2
      addfox-with-manifest-entriesEjemplo de declarar entradas mediante campos de manifest.examples/addfox-with-manifest-entries
      addfox-with-react-entry-falseEscenario de entry: false (Rsbuild gestiona las entradas por sí mismo) en React.examples/addfox-with-react-entry-false
      addfox-with-single-fileEjemplo de estructura mínima/archivo único.examples/addfox-with-single-file
      addfox-with-sandboxEjemplo de página sandbox.examples/addfox-with-sandbox
      addfox-with-newtab-overrideEjemplo de sobrescritura de nueva pestaña del navegador.examples/addfox-with-newtab-override
      addfox-with-history-overrideEjemplo de sobrescritura de página de historial.examples/addfox-with-history-override
      addfox-with-bookmarks-overrideEjemplo de sobrescritura de página de marcadores.examples/addfox-with-bookmarks-override
      addfox-with-rstestEjemplo de integración de pruebas unitarias con Rstest.examples/addfox-with-rstest
      addfox-with-rstest-e2eEjemplo de pruebas con Rstest + E2E.examples/addfox-with-rstest-e2e
      addfox-with-env-varsEjemplo de inyección y alcance de variables de entorno (incluyendo ADDFOX_PUBLIC_ y variables privadas).examples/addfox-with-env-vars

      Forma de ejecución

      Después de ejecutar la instalación en la raíz del repositorio de addfox, entra en cualquier directorio de ejemplo:

      pnpm
      npm
      yarn
      bun
      pnpm install
cd examples/addfox-with-vue   # u otro ejemplo
pnpm dev                   # modo desarrollo
pnpm build                 # construcción

      El producto de construcción está en .addfox/extension (o outputRoot/outDir configurado por el ejemplo), carga este directorio en el navegador; cuando uses dev, el framework puede abrir automáticamente el navegador y cargar la extensión.