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

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 браузеру

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

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

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

macOS:

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

Windows:

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

Linux:

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

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

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

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

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

pnpm

npm

yarn

bun

pnpm addfox dev --cache
# или
pnpm addfox dev -c

npx addfox dev --cache
# или
npx addfox dev -c

yarn addfox dev --cache
# или
yarn addfox dev -c

bunx addfox dev --cache
# или
bunx addfox dev -c

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

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

Пользовательские данные сохраняются в директории .addfox/cache/.

#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({
  browserPath: {
    firefox: "/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

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

• browserPath — конфигурация пути к исполняемому файлу браузера
• cache — конфигурация кэширования
• hotReload — конфигурация горячей перезагрузки
• debug — конфигурация мониторинга ошибок