AddFox
  • Русский

      • Горячее обновление (HMR)

      Команда addfox dev предоставляет опыт горячего обновления при разработке: после сохранения кода происходит автоматическая пересборка, и через WebSocket отправляется уведомление браузерному расширению о перезагрузке.

      Механизм работы

      Изменение исходного кода
    ↓
Rsbuild Watch пересборка
    ↓
Завершение сборки → WebSocket уведомление
    ↓
Перезагрузка браузерного расширения
    ↓
Автоматическое обновление страницы

      Механизм горячего обновления для разных entry

      Background / Service Worker

      Background скрипт использует механизм перезагрузки расширения:

      1. Изменение кода → пересборка Rsbuild
      2. Завершение сборки → WebSocket отправляет команду перезагрузки
      3. Вызов chrome.runtime.reload() для перезагрузки всего расширения
      4. Service Worker перезапускается, загружается новый код
      Потеря состояния

      После перезагрузки Service Worker теряет состояние в памяти. Для постоянного хранения данных используйте API chrome.storage.

      Content Script

      Content Script использует механизм повторной инъекции:

      1. Изменение кода → пересборка Rsbuild
      2. Завершение сборки → перезагрузка расширения
      3. Content Script автоматически инжектируется в соответствующие страницы
      4. Открытые вкладки можно настроить для автоматического обновления (см. конфигурацию)
      // addfox.config.ts
export default defineConfig({
  hotReload: {
    autoRefreshContentPage: true,  // Автоматически обновлять страницу при изменении content, по умолчанию true
  },
});
      Отличие от Background

      Content Script выполняется в окружении веб-страницы, после перезагрузки повторно инжектируется на соответствующие страницы, не требуется ручного обновления страницы управления расширением.

      Popup / Options / Sidepanel

      Entry типа страницы используют механизм Rsbuild HMR:

      1. Изменение кода → Rsbuild пытается HMR горячую замену
      2. При успешном HMR → локальное обновление страницы, сохранение состояния
      3. При неудаче HMR → автоматический откат к обновлению страницы
      Преимущества HMR
      • Более быстрая скорость обновления
      • Сохранение состояния компонентов (например, ввод форм)
      • Более плавный опыт разработки
      Ограничения HTML шаблона

      Из-за механизма Rsbuild файлы HTML шаблонов (например, popup/index.html) не поддерживают истинное HMR горячую замену.
      При изменении HTML шаблона Addfox откатывается к обновлению страницы или перезагрузке расширения.

      Особая обработка Firefox

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

      • Перезагрузка расширения обрабатывается web-ext, а не WebSocket от Addfox
      • При первом запуске автоматически открывается Firefox и загружается расширение
      • Поддерживается автоматическая перезагрузка (livereload)
      Info

      При разработке с Firefox убедитесь, что Firefox установлен. Addfox автоматически вызовет web-ext для обработки загрузки и перезагрузки расширения Firefox.

      Использование

      # Запуск сервера разработки (автоматическое включение HMR)
addfox dev

# Указание целевого браузера
addfox dev -b chrome
addfox dev -b firefox

      Процесс первого запуска

      После выполнения addfox dev:

      1. Первоначальная сборка завершена
      2. Автоматический запуск браузера в соответствии с конфигурацией
      3. Загрузка расширения в разработке
      4. Автоматическое открытие страниц popup/options расширения (если настроено open)

      Параметры конфигурации

      Порт горячей перезагрузки

      // addfox.config.ts
export default defineConfig({
  hotReload: {
    port: 23333,              // Порт WebSocket, по умолчанию 23333
    autoRefreshContentPage: true,  // Автоматически обновлять страницу при изменении content, по умолчанию true
  },
});

      Следующие шаги

      • Конфигурация browserPath — настройка автоматического открытия браузера при разработке
      • Отладка monitor — использование панели мониторинга ошибок для отладки
      • config/hot-reload — полный список параметров горячей перезагрузки