Web Check - мониторинг изменений на веб-страницах

🎉 Статус: ЗАПУЩЕНО В CHROME!

Web Check - Chrome расширение для отслеживания изменений элементов на веб-страницах с минимальными усилиями от пользователя.

✅ Текущее состояние

🚀 Что работает:

• ✅ Расширение установлено и запущено в Chrome
• ✅ Background Service Worker функционирует
• ✅ Content Scripts автоматически инжектируются
• ✅ Popup UI открывается и работает
• ✅ Options страница доступна
• ✅ Система сборки полностью автоматизирована

🎯 Текущая фаза: Отладка и тестирование

• Проверка core функций выбора элементов
• Тестирование создания и сохранения задач
• Отладка системы мониторинга
• UX улучшения и error handling

🎯 Основной функционал

Для пользователей:

1. Простой выбор элементов - кликните на элемент страницы для мониторинга
2. Настройка интервалов - от минут до дней
3. Автоматические уведомления - при обнаружении изменений
4. Управление задачами - добавление, редактирование, удаление

Для разработчиков:

• Manifest V3 совместимость
• Vue 3 + TypeScript современный стек
• Offscreen Documents API для фонового мониторинга
• Service Worker архитектура
• CSP совместимость

🚀 Быстрый старт

Установка для разработки

# Клонирование
git clone [repository-url]
cd web-check

# Установка зависимостей
pnpm install

# Сборка
./build.sh

# Установка в Chrome:
# 1. chrome://extensions/
# 2. Включить "Режим разработчика" 
# 3. "Загрузить распакованное расширение" → папка dist/

Команды разработки

# Сборка
./build.sh                  # Стандартная сборка
./build.sh clean            # Полная пересборка с очисткой

# Development
pnpm dev                    # Hot reload для разработки
pnpm lint                   # ESLint проверка
pnpm type-check             # TypeScript проверка

🏗️ Архитектура

Web Check Extension
├── 🔧 Background Service Worker    # Центральный координатор
├── 📝 Content Scripts             # Инжекция и выбор элементов
├── 🎨 Popup UI                    # Основной интерфейс пользователя
├── ⚙️ Options UI                  # Настройки расширения
├── 🖥️ Offscreen Manager           # Фоновый мониторинг
├── 📋 Task Queue System           # Управление задачами
├── 🛡️ Reliability Manager         # Обработка ошибок
└── 💾 Storage System              # Сохранение данных

📋 Технический стек

Frontend:

• Vue 3 (Composition API)
• TypeScript (строгая типизация)
• Tailwind CSS (утилитарные стили)
• Vite (сборка и bundling)

Chrome APIs:

• Manifest V3 (современный стандарт)
• Service Workers (background processing)
• Offscreen Documents (фоновые операции)
• chrome.storage (синхронизация данных)
• chrome.alarms (планировщик задач)
• chrome.scripting (динамическая инжекция)

Инструменты:

• pnpm (менеджер пакетов)
• ESLint (качество кода)
• Prettier (форматирование)

🔍 Отладка

Chrome DevTools:

# Background Service Worker
chrome-extension://[extension-id]/service-worker-loader.js

# Storage
DevTools → Application → Storage → Extensions

# Content Scripts  
DevTools → Sources → Content Scripts

# Alarms
DevTools → Application → Service Workers

Логирование:

Все компоненты используют структурированное логирование:

console.log('[Background] Message received:', data);
console.log('[Content] Element selected:', element);
console.log('[Storage] Task saved:', task);

📊 Статус компонентов

Компонент	Установка	Запуск	Функции	Тесты
Background SW	✅	✅	🔄	❌
Content Scripts	✅	✅	🔄	❌
Popup UI	✅	✅	🔄	❌
Options UI	✅	✅	🔄	❌
Storage API	✅	🔄	🔄	❌
Alarms API	✅	🔄	🔄	❌
Offscreen API	✅	🔄	🔄	❌

Легенда: ✅ Работает | 🔄 В разработке | ❌ Не готово

🎯 Roadmap

Ближайшие планы (1-2 недели):

• Отладка выбора элементов на страницах
• Тестирование создания и сохранения задач
• Проверка системы автоматического мониторинга
• UX улучшения и обработка ошибок
• Тестирование на различных сайтах

Долгосрочные цели:

• Расширенные типы мониторинга (текст, атрибуты, CSS)
• Экспорт/импорт конфигураций
• Аналитика и статистика изменений
• Интеграция с внешними сервисами
• Публикация в Chrome Web Store

📁 Структура проекта

web-check/
├── src/                    # Исходный код
│   ├── background/         # Service Worker
│   ├── content-script/     # Content Scripts
│   ├── ui/                 # Vue компоненты
│   ├── offscreen/          # Offscreen Documents
│   └── shared/             # Общие утилиты
├── dist/                   # Готовая сборка
├── docs/                   # Документация
├── public/                 # Статические файлы
├── build.sh               # Скрипт сборки
└── package.json           # Зависимости

🤝 Разработка

Вклад в проект:

1. Создайте fork проекта
2. Создайте feature branch
3. Сделайте changes с тестами
4. Отправьте pull request

Отчет об ошибках:

• Используйте GitHub Issues
• Приложите скриншоты
• Укажите версию Chrome
• Опишите шаги воспроизведения

📄 Лицензия

[Указать лицензию]

📞 Поддержка

• Документация: /docs папка
• Issues: GitHub Issues
• Разработка: см. docs/PROJECT_STATUS.md

---

🎉 Главное достижение: расширение установлено и работает в Chrome!
🎯 Текущий фокус: отладка core функциональности
📅 Последнее обновление: 31.05.2025