#Estructura de Directorios

Addfox adopta un diseño de convención sobre configuración. Comprender la estructura de directorios estándar te ayudará a comenzar rápidamente y seguir las mejores prácticas.

#Directorio Raíz del Proyecto

La estructura típica de un proyecto Addfox es la siguiente:

my-extension/
├── .addfox/           # Salida de build y caché (generado automáticamente)
├── app/               # Código fuente de la aplicación (configurable)
├── public/            # Recursos estáticos
├── addfox.config.ts   # Archivo de configuración de Addfox
└── package.json       # Dependencias del proyecto

#Directorio .addfox

.addfox es generado automáticamente por el framework y contiene:

• extension/ — Directorio de salida de build por defecto (puede modificarse mediante outDir)
• cache/ — Caché persistente de build (cache/build/), además de los profiles del navegador de dev (cache/browser-profile/) cuando keepBrowserProfile está habilitado

#Directorio app

app/ es el directorio de código fuente de la aplicación por defecto, donde se almacenan todos los entry points de extensión y archivos de manifest. Puede modificarse mediante la opción de configuración appDir:

// addfox.config.ts
export default defineConfig({
  appDir: "src",  // Cambiar al directorio src
});

#Estructura de Directorios Recomendada

app/
├── background/
│   └── index.ts          # Service Worker / Background script
├── content/
│   └── index.ts          # Content script
├── popup/
│   ├── index.html        # HTML del popup (opcional)
│   └── index.ts          # Script del popup
├── options/
│   ├── index.html        # HTML de la página de opciones (opcional)
│   └── index.ts          # Script de la página de opciones
├── sidepanel/
│   └── index.ts          # Side panel
├── manifest/
│   ├── manifest.json           # Configuración base
│   ├── manifest.chromium.json  # Override de Chrome
│   └── manifest.firefox.json   # Override de Firefox
└── ...

app/
├── background.ts         # Background script
├── content.ts            # Content script
├── popup.html            # Página popup
├── popup.ts              # Script popup
├── manifest.json         # Manifest de extensión
└── ...

#Directorio public

public/ se utiliza para almacenar recursos estáticos, que se copian tal cual al directorio de salida durante el build sin procesarse:

public/
├── icons/                # Iconos de extensión
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
├── _locales/             # Archivos de internacionalización
│   └── zh_CN/
│       └── messages.json
└── welcome.html          # Página de bienvenida

#Tipos de Entry Points

Addfox soporta los siguientes entry points integrados:

#Archivos de Configuración

#addfox.config.ts / addfox.config.js

Este es el archivo de configuración requerido de Addfox, utilizado para declarar:

• El manifest de la extensión (manifest)
• Los archivos de entry point (entry)
• El directorio de salida (outDir)
• Plugins y configuración de Rsbuild

#Ejemplo de Configuración Mínima

import { defineConfig } from "addfox";

export default defineConfig({
  // Cuando se omite la configuración, el framework descubre automáticamente
  // los entry points y el manifest desde app/
});

#Configuraciones Relacionadas

• appDir — Personalizar el directorio de aplicación
• entry — Configurar entry points manualmente
• outDir — Personalizar el directorio de salida
• manifest — Modos de configuración del manifest