Cloudhood — это мощное браузерное расширение, которое позволяет пользователям управлять HTTP заголовками запросов, которые будут встроены во все веб-запросы. Построено на современных веб-технологиях с использованием архитектуры Feature-Sliced Design.
- Управление заголовками: Создание, редактирование и управление пользовательскими HTTP заголовками
- Система профилей: Организация заголовков в переиспользуемые профили
- Кроссплатформенность: Работает в Chrome и Firefox
- Импорт/Экспорт: Обмен профилями между устройствами и участниками команды
- Применение в реальном времени: Заголовки применяются мгновенно к веб-запросам
- Современный UI: Чистый, интуитивный интерфейс на React и TypeScript
Переопределения заголовков управляются через popup расширения Chrome (React приложение), сохраняются в локальном хранилище браузера и применяются к исходящим запросам страниц с помощью Chrome Declarative Net Request API.
- Карта проекта - Подробная карта архитектуры и структуры проекта
- Диаграммы архитектуры - Визуальные схемы архитектуры и потоков данных
- Руководство разработчика - Полное руководство для разработчиков
- Node.js >= 20.0.0
- pnpm >= 10.10.0
- Браузер Chrome или Firefox
# Клонирование репозитория
git clone https://github.com/cloud-ru-tech/cloudhood.git
cd cloudhood
# Установка зависимостей
pnpm install
# Запуск сервера разработки для Chrome
pnpm dev:chrome
# Запуск сервера разработки для Firefox
pnpm dev:firefox- Откройте
chrome://extensions/ - Включите "Режим разработчика"
- Нажмите "Загрузить распакованное расширение"
- Выберите папку
build/chrome
- Соберите расширение и запустите watcher для разработки:
pnpm build:firefox pnpm dev:firefox
- Откройте
about:debugging#/runtime/this-firefox - Нажмите "Загрузить временное дополнение"
- Выберите файл
build/firefox/manifest.json
Watcher пересобирает popup при изменении его исходных файлов. Автоматический reload для Firefox сейчас не поддерживается, поэтому после пересборки нажмите "Перезагрузить" для Cloudhood на странице about:debugging. Если изменился src/background.ts, остановите watcher, выполните pnpm build:firefox и снова запустите pnpm dev:firefox.
# Запуск unit тестов
pnpm test:unit
# Запуск с покрытием
pnpm test:unit --coverage# Установка браузеров (только первый раз)
pnpm exec playwright install
# Запуск E2E тестов
pnpm test:e2e
# Запуск в CI режиме
pnpm test:e2e:ciДля E2E тестов всегда импортируйте фикстуры:
import { expect, test } from './fixtures';# Разработка для Chrome с hot reload
pnpm dev:chrome
# Watcher для разработки под Firefox
pnpm dev:firefox
# Сборка для Chrome
pnpm build:chromium
# Сборка для Firefox
pnpm build:firefox
# Сборка для всех браузеров
pnpm build
# Линтинг кода
pnpm lintПроект следует архитектуре Feature-Sliced Design:
src/
├── app/ # Инициализация приложения
├── pages/ # Страницы (композиция виджетов)
├── widgets/ # UI блоки высокого уровня
├── features/ # Пользовательские функции
├── entities/ # Бизнес-сущности
└── shared/ # Общие ресурсы- Frontend: React 18 + TypeScript
- Управление состоянием: Effector
- UI библиотека: @cloud-ru/ds-* (дизайн-система Cloud.ru)
- Сборщик: Vite
- Тестирование: Vitest + Playwright
- Архитектура: Feature-Sliced Design
pnpm build:chromiumРасширение будет собрано в директории build/chrome.
pnpm build:firefoxРасширение будет собрано в директории build/firefox.
npm run build:firefox-sourcesСоздает ZIP архив с исходным кодом, необходимым для подачи в Firefox Add-ons. Mozilla требует предоставления исходного кода для расширений, использующих инструменты сборки или минификацию.
Запустите workflow Release из ветки main, чтобы опубликовать синхронный релиз. Workflow:
- Определяет следующую общую версию по коммитам после последнего тега
v* - Применяет одинаковую версию к
package.jsonи manifest-файлам обоих браузеров - Собирает расширения для Chrome и Firefox
- Создает ZIP архивы для обеих платформ
- Создает архив исходного кода для подачи в Firefox Add-ons
- Публикует в Chrome Web Store и Firefox Add-ons (с исходным кодом)
- Создает GitHub Release со всеми архивами и списком коммитов
См. настройку релизов для подробностей автоматизации.
- Создайте feature branch от
main - Внесите изменения следуя архитектуре FSD
- Добавьте тесты для новой функциональности
- Запустите
pnpm lintи исправьте ошибки - Запустите
pnpm test:unit && pnpm test:e2e - Создайте Pull Request
- Используйте TypeScript строго
- Следуйте архитектуре Feature-Sliced Design
- Добавляйте комментарии к сложной логике
- Используйте Effector для управления состоянием
- Пишите тесты для новой функциональности
Используйте conventional commits:
feat: добавить функциональность экспорта профилей
fix: исправить ошибку сохранения заголовков
docs: обновить документацию
test: добавить тесты для утилит- Chrome Web Store: Установить Cloudhood
- Firefox Add-ons: Установить Cloudhood
- GitHub Releases: Последние релизы
- Privacy Policy: Cloudhood Privacy Policy
Cloudhood разработан командой Cloud.ru — ведущего российского облачного провайдера, предлагающего комплексные облачные решения и сервисы.
Сделано с ❤️ командой Cloud.ru