#browser

browser se utiliza para configurar los navegadores que se abren automáticamente y cargan la extensión durante el desarrollo: ruta del archivo ejecutable, directorio user-data (perfil) y conservación del perfil entre ejecuciones.

#Resumen

• Tipo: Record<BrowserName, { path?: string; profile?: string; keepBrowserProfile?: boolean }>
• Valor por defecto: undefined (usar ruta predeterminada del sistema)
• Requerido: No

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

#Navegadores basados en Chromium

Soporta los siguientes navegadores basados en Chromium:

#Ejemplo de configuración

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

#Usar CLI para iniciar

pnpm

npm

yarn

bun

pnpm dev -- -b chrome
pnpm dev -- -b edge
pnpm dev -- -b brave

npm run dev -- -b chrome
npm run dev -- -b edge
npm run dev -- -b brave

yarn dev -b chrome
yarn dev -b edge
yarn dev -b brave

bun run dev -- -b chrome
bun run dev -- -b edge
bun run dev -- -b brave

#Firefox

Firefox usa la herramienta web-ext para gestionar extensiones, la forma de configurar la ruta es la misma:

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

#Iniciar Firefox

pnpm

npm

yarn

bun

pnpm dev -- -b firefox

npm run dev -- -b firefox

yarn dev -b firefox

bun run dev -- -b firefox

#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" },
    firefox: { path: "/Applications/Firefox.app/Contents/MacOS/firefox" },
  },
});

#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" },
    firefox: { path: "/usr/bin/firefox" },
  },
});

#Obsoleto: browserPath

browserPath sigue funcionando pero muestra una advertencia de deprecación en la terminal. Migra a browser:

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

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

Si tanto browserPath como browser configuran una ruta para el mismo navegador, browser tiene prioridad.

#Configuraciones relacionadas

• guide/launch - Guía de inicio de navegador
• keepBrowserProfile / buildCache - Configuración de caché