#Запуск браузера

Addfox может автоматически запускать браузер и загружать расширение при разработке, повышая эффективность разработки.

#Быстрый старт

Запустите команду разработки:

pnpm

npm

yarn

bun

pnpm dev

npm run dev

yarn dev

bun run dev

При первом запуске сервера разработки автоматически:

1. Собирается расширение
2. Открывается браузер
3. Загружается расширение в разработке

#Использование Scripts для запуска (рекомендуется)

Настройте scripts в package.json для более лаконичного запуска разных браузеров:

{
  "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"
  }
}

После настройки используйте напрямую:

pnpm

npm

yarn

bun

# Chrome (по умолчанию)
pnpm dev

# Другие браузеры
pnpm dev:edge
pnpm dev:firefox

# Chrome (по умолчанию)
npm run dev

# Другие браузеры
npm run dev:edge
npm run dev:firefox

# Chrome (по умолчанию)
yarn dev

# Другие браузеры
yarn dev:edge
yarn dev:firefox

# Chrome (по умолчанию)
bun run dev

# Другие браузеры
bun run dev:edge
bun run dev:firefox

#Браузеры на базе Chromium

Addfox нативно поддерживает следующие браузеры на базе Chromium:

#Прямой запуск через CLI

Если не использовать scripts, можно напрямую указать браузер через CLI:

pnpm

npm

yarn

bun

# Chrome (по умолчанию)
pnpm addfox dev

# Другие браузеры
pnpm addfox dev -b edge
pnpm addfox dev -b brave
pnpm addfox dev -b vivaldi

# Chrome (по умолчанию)
npx addfox dev

# Другие браузеры
npx addfox dev -b edge
npx addfox dev -b brave
npx addfox dev -b vivaldi

# Chrome (по умолчанию)
yarn addfox dev

# Другие браузеры
yarn addfox dev -b edge
yarn addfox dev -b brave
yarn addfox dev -b vivaldi

# Chrome (по умолчанию)
bunx addfox dev

# Другие браузеры
bunx addfox dev -b edge
bunx addfox dev -b brave
bunx addfox dev -b vivaldi

#Конфигурация браузеров Chromium

Если браузер не находится в стандартном расположении, можно указать объект browser в конфигурации:

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

Каждая запись браузера поддерживает поля:

• path — путь к исполняемому файлу браузера
• profile — пользовательская директория user-data (профиля); относительные пути разрешаются относительно корня проекта (по умолчанию <outputRoot>/cache/browser-profile/<name>-user-data)
• keepBrowserProfile — сохранять профиль этого браузера между запусками, переопределяя верхнеуровневый keepBrowserProfile

// До (устарело)
export default defineConfig({
  browserPath: { chrome: "/path/to/chrome" },
});

// После
export default defineConfig({
  browser: { chrome: { path: "/path/to/chrome" } },
});

#Примеры для разных платформ

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" },
  },
});

#Кэширование пользовательских данных Chromium

По умолчанию при каждом запуске используется новая директория пользовательских данных. Для сохранения (например, состояния входа) добавьте в package.json:

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

Или запустите напрямую через 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

Или включите в конфигурации:

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

Или переопределите для отдельного браузера (приоритет выше верхнеуровневого keepBrowserProfile):

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

Пользовательские данные сохраняются в директории .addfox/cache/browser-profile/<name>-user-data.

#Firefox

Режим разработки Firefox использует инструмент web-ext для управления жизненным циклом расширения.

#Запуск Firefox

Используйте настроенный script:

pnpm dev:firefox

Или запустите напрямую через 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

#Особенности Firefox

• Перезагрузка расширения обрабатывается web-ext, а не WebSocket от Addfox
• Автоматически открывается Firefox и загружается расширение
• Поддерживается автоматическая перезагрузка при изменении файлов

#Конфигурация пути к Firefox

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

#Советы по отладке

#Просмотр Service Worker

1. Откройте chrome://extensions/
2. Найдите расширение в разработке
3. Нажмите "Service Worker" для просмотра консоли фонового скрипта

#Просмотр Content Script

1. На веб-странице правый клик → Просмотреть код
2. Переключитесь на панель Console
3. Выберите соответствующий контекст расширения

#Использование мониторинга ошибок

Добавьте debug script в package.json:

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

Затем запустите:

pnpm dev:debug

Или включите напрямую через CLI:

pnpm

npm

yarn

bun

pnpm addfox dev --debug

npx addfox dev --debug

yarn addfox dev --debug

bunx addfox dev --debug

#Связанная конфигурация

• browser — конфигурация браузера (путь, профиль, keepBrowserProfile)
• keepBrowserProfile / buildCache — конфигурация кэширования
• hotReload — конфигурация горячей перезагрузки
• debug — конфигурация мониторинга ошибок