Twitch Stream Stats

Расширение для Chrome, которое парсит статистику Twitch-стримов в реальном времени

---

✨ Возможности

Функция	Описание
👁️ Зрители	Счётчик из трёх независимых источников (GQL × 2 + Helix) с усреднением и разбросом
💬 Чат	Live-лента сообщений и список ников через IRC WebSocket
🟢 Активность	Разделение участников на активных (писали <10 мин) и молчунов
📊 График	Динамика зрителей прямо в попапе (Chart.js)
🗂️ История	Таблица снапшотов за текущую сессию
💾 Архив	Автосохранение сессии при остановке или окончании стрима
📤 Экспорт	Выгрузка в JSON или полноценный интерактивный HTML-отчёт
🌐 i18n	Интерфейс на русском и английском
🔁 Авто-стоп	Парсинг останавливается автоматически, когда стрим заканчивается

---

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

twitch-stream-stats/
├── manifest.json       # MV3 манифест
├── background.js       # Service Worker: поллинг, IRC, GQL, архив
├── content.js          # Content script: определяет канал по URL
├── popup.html          # UI расширения
├── popup.js            # Логика попапа, рендеринг, экспорт
├── popup.css           # Стили (тёмная тема, JetBrains Mono + Syne)
├── i18n.js             # Локализация RU / EN
├── chart.umd.js        # Chart.js (локальная копия)
└── icons/
    ├── icon16.png
    ├── icon48.png
    └── icon128.png

---

⚙️ Как работает

 Twitch.tv                    Extension
─────────────────────────────────────────────────────
 Страница канала  ──►  content.js  ──►  SET_CHANNEL
                                           │
                              background.js (Service Worker)
                                    │
                    ┌───────────────┼───────────────┐
                    ▼               ▼               ▼
               GQL Main       GQL UseViewCount   Helix API
             (канал + стрим)  (независимый VC)  (viewer_count)
                    │               │               │
                    └───────────────┴───────────────┘
                                    │ max()
                              aggregated viewers
                                    │
                         ┌──────────┴──────────┐
                         ▼                     ▼
                  GQL ChatViewers         IRC WebSocket
                  (chatters count)     (JOIN/PART/PRIVMSG)
                         │                     │
                         └──────────┬──────────┘
                                    ▼
                              pollHistory[]
                                    │
                         ┌──────────┴──────────┐
                         ▼                     ▼
                      popup.js           savedSessions[]
                   (Stats / Chat /        (архив сессий)
                  History / Export)

Источники данных

• GQL Main - основной запрос: данные канала, stream ID, viewersCount, игра, заголовок
• GQL UseViewCount - независимый персистентный запрос viewer count (иногда показывает выше)
• Twitch Helix API - официальный REST API, используется как третий источник
• GQL ChatViewers - реальный счётчик участников чата (работает для каналов >1000)
• IRC WebSocket (wss://irc-ws.chat.twitch.tv) - анонимное подключение (justinfan*) для получения сообщений и JOIN/PART-событий

---

🚀 Установка

Из Chrome Webstore

Из исходников (Developer Mode)

1. Клонируйте репозиторий:

   git clone https://github.com/your-username/twitch-stream-stats.git

2. Откройте Chrome и перейдите на chrome://extensions/

3. Включите "Режим разработчика" (переключатель в правом верхнем углу)

4. Нажмите "Загрузить распакованное" и выберите папку с расширением

5. Значок расширения появится на панели инструментов

---

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

1. Перейдите на страницу любого канала twitch.tv/channelname - расширение автоматически определит канал
2. Откройте попап кликом на иконке
3. Нажмите Старт для начала сбора статистики
4. Переключайтесь между вкладками: Статистика → Чат → История → Настройки
5. При остановке или окончании стрима сессия автоматически сохранится в Архив
6. В разделе Настройки → Архив сессий можно выгрузить любую сессию в JSON или HTML-отчёт

Горячие действия

Элемент	Действие
Enter в поле канала	Начать мониторинг
Кнопка ↺	Немедленный опрос без ожидания
Кнопка Старт / Стоп	Включить / выключить автоматический поллинг
Пресеты интервала	1 мин · 5 мин · 15 мин · 1 ч

---

📤 Форматы экспорта

JSON

Содержит полную историю снапшотов, уникальные ники чата и все собранные сообщения:

{
  "channel": "channelname",
  "maxViewers": 12400,
  "avgViewers": 9300,
  "uniqueChatters": ["user1", "user2", "..."],
  "viewerHistory": [...],
  "recentMessages": [...]
}

HTML-отчёт

Самодостаточный HTML-файл (Chart.js встроен) с:

• 📈 Интерактивными графиками зрителей и чата с зумом
• 💬 Активностью чата (сообщений в минуту)
• 👥 Кликабельным списком участников с историей сообщений
• 🤐 Списком молчунов (>10 мин без сообщений)
• 👻 Динамикой анонимных (незарегистрированных) зрителей
• 📊 Полной таблицей истории опросов

---

🛡️ Разрешения

Разрешение	Зачем
storage	Сохранение истории, настроек, архива сессий
alarms	Периодический поллинг по расписанию
notifications	Уведомления о событиях (будущий функционал)
activeTab	Определение текущей вкладки
scripting	Инжект content script
https://www.twitch.tv/*	Content script на страницах Twitch
https://gql.twitch.tv/*	GQL API запросы
https://api.twitch.tv/*	Helix API запросы

Расширение не собирает и не отправляет никакие данные на сторонние серверы. Все данные хранятся локально в chrome.storage.local.

---

🔧 Настройки

• Интервал сбора - от 0.5 до 1440 минут (по умолчанию 5 мин)
• Язык интерфейса - RU / EN
• Очистка истории - удаление снапшотов текущей сессии
• Очистка архива - удаление всех сохранённых сессий
• Архив сессий - список до 50 последних сессий с возможностью экспорта каждой

---

🛠️ Технологии

• Chrome Extensions Manifest V3
• Twitch GQL API (неофициальный, публичный Client-ID)
• Twitch Helix API
• IRC WebSocket (wss://irc-ws.chat.twitch.tv)
• Chart.js 4 (встроен локально)
• Шрифты: Syne + JetBrains Mono