YouTube Tracker - Браузерное расширение

Полнофункциональное расширение для браузеров Chrome/Edge, которое отслеживает вашу активность на YouTube и предоставляет детальную статистику (криво)

Возможности

• ⏱️ Отслеживание времени - точный подсчет времени просмотра видео
• 📊 Статистика - графики и диаграммы вашей активности
• 📅 Календарь просмотров - тепловая карта активности по дням
• 👍 Лайки и дизлайки - отслеживание ваших оценок
• ✅ Просмотренные видео - автоматическая пометка завершенных видео
• 📱 Адаптивный дизайн - работает на всех размерах экранов

Screenshots

Как установить

1. Собрать проект

npm install
npm run build

2. Установить в браузер

Chrome / Edge:

1. Откройте chrome://extensions/ (или edge://extensions/)
2. Включите Режим разработчика (Developer mode)
3. Нажмите Загрузить распакованное расширение (Load unpacked)
4. Выберите папку dist из собранного проекта

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

1. Откройте любое видео на YouTube
2. Расширение автоматически начнет отслеживать:
   • Время просмотра
   • Название видео и канала
   • Лайки/дизлайки
   • Процент завершения
3. Нажмите на иконку расширения, чтобы увидеть статистику

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

youtube-tracker/
├── public/
│   ├── manifest.json      # Конфигурация расширения
│   ├── background.js      # Service worker для хранения данных
│   └── content.js         # Content script для отслеживания YouTube
├── src/
│   ├── App.tsx           # Главный компонент
│   ├── pages/            # Страницы
│   │   ├── Dashboard.tsx
│   │   ├── VideoList.tsx
│   │   ├── Calendar.tsx
│   │   └── Statistics.tsx
│   ├── hooks/
│   │   └── useYouTubeData.ts  # Hook для загрузки данных
│   ├── utils/
│   │   └── storage.ts    # Утилиты для работы с Chrome Storage
│   └── types/
│       └── data.ts       # TypeScript типы

Как это работает

Content Script (content.js)

• Запускается на всех страницах YouTube
• Отслеживает открытие видео через URL
• Использует MutationObserver для SPA навигации
• Каждые 5 секунд отправляет обновления времени просмотра
• Отслеживает клики на кнопки лайк/дизлайк
• Определяет завершение видео (>95% просмотра)

Background Service Worker (background.js)

• Получает сообщения от content script
• Сохраняет данные в chrome.storage.local
• Обновляет статистику по дням
• Управляет структурой данных

React UI

• Читает данные из Chrome Storage
• Автоматически обновляется при изменениях
• Отображает графики и статистику
• Полностью адаптивный дизайн

Chrome Storage API

Данные хранятся локально в браузере:

// Структура хранения
{
  videos: VideoStats[],      // Массив просмотренных видео
  dailyStats: DayStats[]     // Статистика по дням
}

Разработка

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

# Запуск в режиме разработки
npm run dev

# Сборка production версии
npm run build

Технологии

• React + TypeScript - UI
• Tailwind CSS - стилизация
• Recharts - графики и диаграммы
• Chrome Extension API - взаимодействие с браузером
• Vite - сборка проекта

Особенности реализации

Отслеживание на YouTube

YouTube - это Single Page Application, поэтому:

• Используем MutationObserver для отслеживания изменений URL
• Ищем video элемент динамически
• Следим за обновлениями DOM для кнопок лайк/дизлайк

Хранение данных

• Видео группируются по дням
• Один и тот же videoId может быть несколько раз (разные дни)
• Статистика агрегируется по датам
• Максимум 10MB в Chrome local storage

Производительность

• Обновления времени каждые 5 секунд (не перегружаем систему)
• Эффективная структура данных
• Автоматическая очистка старых данных (опционально)

Лицензия

Проект распространяется под лицензией MIT.

Автор

YouTube Tracker — расширение для отслеживания активности на YouTube
Автор: TeGaLeX15