#Inicio de navegador

Addfox puede iniciar automáticamente el navegador y cargar la extensión durante el desarrollo, mejorando la eficiencia de desarrollo.

#Inicio rápido

Ejecutar el comando de desarrollo:

pnpm

npm

yarn

bun

pnpm dev

npm run dev

yarn dev

bun run dev

El primer inicio del servidor de desarrollo hará automáticamente:

1. Construir la extensión
2. Abrir el navegador
3. Cargar la extensión en desarrollo

#Usar Scripts para iniciar (recomendado)

Configurar scripts en package.json permite iniciar diferentes navegadores más concisamente:

{
  "scripts": {
    "dev": "addfox dev",
    "dev:chrome": "addfox dev -b chrome",
    "dev:edge": "addfox dev -b edge",
    "dev:brave": "addfox dev -b brave",
    "dev:firefox": "addfox dev -b firefox"
  }
}

Después de la configuración, usar directamente:

pnpm

npm

yarn

bun

# Chrome (predeterminado)
pnpm dev

# Otros navegadores
pnpm dev:edge
pnpm dev:firefox

# Chrome (predeterminado)
npm run dev

# Otros navegadores
npm run dev:edge
npm run dev:firefox

# Chrome (predeterminado)
yarn dev

# Otros navegadores
yarn dev:edge
yarn dev:firefox

# Chrome (predeterminado)
bun run dev

# Otros navegadores
bun run dev:edge
bun run dev:firefox

#Navegadores basados en Chromium

Addfox soporta nativamente los siguientes navegadores basados en Chromium:

#Iniciar directamente a través de CLI

Si no usas scripts, también puedes especificar el navegador directamente desde CLI:

pnpm

npm

yarn

bun

# Chrome (predeterminado)
pnpm addfox dev

# Otros navegadores
pnpm addfox dev -b edge
pnpm addfox dev -b brave
pnpm addfox dev -b vivaldi

# Chrome (predeterminado)
npx addfox dev

# Otros navegadores
npx addfox dev -b edge
npx addfox dev -b brave
npx addfox dev -b vivaldi

# Chrome (predeterminado)
yarn addfox dev

# Otros navegadores
yarn addfox dev -b edge
yarn addfox dev -b brave
yarn addfox dev -b vivaldi

# Chrome (predeterminado)
bunx addfox dev

# Otros navegadores
bunx addfox dev -b edge
bunx addfox dev -b brave
bunx addfox dev -b vivaldi

#Configuración de navegadores Chromium

Si el navegador no está en la ubicación predeterminada, puedes especificar el objeto browser en la configuración:

// addfox.config.ts
export default defineConfig({
  browser: {
    chrome: { path: "/path/to/chrome" },
    edge: { path: "/path/to/edge" },
    brave: { path: "/path/to/brave" },
  },
});

Cada entrada de navegador soporta los campos:

• path — ruta del archivo ejecutable del navegador
• profile — directorio user-data (perfil) personalizado; las rutas relativas se resuelven desde la raíz del proyecto (por defecto: <outputRoot>/cache/browser-profile/<name>-user-data)
• keepBrowserProfile — conservar el perfil de este navegador entre ejecuciones, sobrescribiendo el keepBrowserProfile de nivel superior

// Antes (obsoleto)
export default defineConfig({
  browserPath: { chrome: "/path/to/chrome" },
});

// Después
export default defineConfig({
  browser: { chrome: { path: "/path/to/chrome" } },
});

#Ejemplos por plataforma

macOS:

export default defineConfig({
  browser: {
    chrome: { path: "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" },
    edge: { path: "/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge" },
  },
});

Windows:

export default defineConfig({
  browser: {
    chrome: { path: "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe" },
    edge: { path: "C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe" },
  },
});

Linux:

export default defineConfig({
  browser: {
    chrome: { path: "/usr/bin/google-chrome" },
    chromium: { path: "/usr/bin/chromium-browser" },
  },
});

#Caché de datos de usuario de Chromium

Por defecto, cada inicio usa un nuevo directorio de datos de usuario. Si necesitas conservarlo (como mantener el estado de inicio de sesión), agrega en package.json:

{
  "scripts": {
    "dev:keep-profile": "addfox dev -b chrome --keep-browser-profile",
    "dev:edge:keep-profile": "addfox dev -b edge --keep-browser-profile"
  }
}

O ejecutar directamente desde CLI:

pnpm

npm

yarn

bun

pnpm addfox dev --keep-browser-profile

npx addfox dev --keep-browser-profile

yarn addfox dev --keep-browser-profile

bunx addfox dev --keep-browser-profile

O habilitar en la configuración:

export default defineConfig({
  keepBrowserProfile: true,
});

O sobrescribir por navegador (tiene prioridad sobre el keepBrowserProfile de nivel superior):

export default defineConfig({
  browser: {
    chrome: { keepBrowserProfile: true },
  },
});

Los datos de usuario se guardan en el directorio .addfox/cache/browser-profile/<name>-user-data.

#Firefox

El modo de desarrollo de Firefox usa la herramienta web-ext para gestionar el ciclo de vida de la extensión.

#Iniciar Firefox

Usar el script configurado:

pnpm dev:firefox

O ejecutar directamente desde CLI:

pnpm

npm

yarn

bun

pnpm addfox dev -b firefox

npx addfox dev -b firefox

yarn addfox dev -b firefox

bunx addfox dev -b firefox

#Características de Firefox

• La recarga de extensión es manejada por web-ext, no por WebSocket de Addfox
• Abre automáticamente Firefox y carga la extensión al iniciar
• Soporta recarga automática cuando cambian los archivos

#Configuración de ruta de Firefox

export default defineConfig({
  browser: {
    firefox: { path: "/Applications/Firefox.app/Contents/MacOS/firefox" },
  },
});

#Técnicas de depuración

#Ver Service Worker

1. Abrir chrome://extensions/
2. Encontrar la extensión en desarrollo
3. Hacer clic en "Service Worker" para ver la consola del script de fondo

#Ver Content Script

1. Clic derecho en la página web → Inspeccionar
2. Cambiar al panel Console
3. Seleccionar el contexto correspondiente de la extensión

#Usar monitoreo de errores

Agregar script de debug en package.json:

{
  "scripts": {
    "dev:debug": "addfox dev --debug",
    "dev:firefox:debug": "addfox dev -b firefox --debug"
  }
}

Luego ejecutar:

pnpm dev:debug

O habilitar directamente desde CLI:

pnpm

npm

yarn

bun

pnpm addfox dev --debug

npx addfox dev --debug

yarn addfox dev --debug

bunx addfox dev --debug

#Configuraciones relacionadas

• browser - Configuración del navegador (ruta, perfil, keepBrowserProfile)
• keepBrowserProfile / buildCache - Configuración de caché
• hotReload - Configuración de recarga en caliente
• debug - Configuración de monitoreo de errores