Как я написал расширение для Chrome, которое спасает от ночных рейдов на Twitch

Привет, Хабр

Предыстория

У многих из нас есть привычка засыпать под стримы или просто оставлять вкладку открытой. Любимый стример, спокойный голос, фоновая игра — идеальная атмосфера для сна. Но есть одна проблема: когда стример завершает эфир, он часто запускает рейд — массовое перенаправление зрителей на другой канал.

И вот вы просыпаетесь в 3 часа ночи от громкой музыки или незнакомой речи на каком-то случайном канале.

Можно, конечно, каждый раз вручную нажимать «Отменить» в окне рейда. А как это сделать, когда ты не успел нажать эту кнопку или вовсе спишь. Что если сделать это автоматически? Так появилось идея расширения «Twitch Raid Blocker».

В этой статье я расскажу:

• Как устроены рейды на Twitch с технической точки зрения

• Как расширение обнаруживает и блокирует их

• Какие подводные камни встретились при разработке

• Как работает архитектура расширения на Manifest V3

Что такое рейд на Twitch

Рейд (raid) — это механизм, позволяющий стримеру перенаправить своих зрителей на другой канал в момент завершения трансляции. Для стримеров это способ поддержать коллег и обменяться аудиторией. Но для зрителей, которые уснули или отошли от компьютера, это может стать неприятным сюрпризом.

С технической точки зрения, при начале рейда Twitch показывает модальное окно с двумя вариантами:

• Присоединиться к рейду (перейти на другой канал)

• Отменить (остаться на текущей странице)

Наша задача — найти это окно и автоматически нажать кнопку «Отменить».

Архитектура расширения

Расширение построено по стандартной схеме для Manifest V3 и состоит из четырёх основных компонентов:

├── manifest.json      # Конфигурация
├── background.js      # Service Worker (инициализация)
├── content.js         # Content Script (основная логика)
├── popup.html/js      # Интерфейс управления
└── icons/             # Иконки

Manifest V3

Начнём с конфигурации. Manifest V3 — это третья версия спецификации расширений Chrome, которая принесла ряд изменений в целях безопасности и производительности.

{
  "manifest_version": 3,
  "name": "Котикс Блочит — Twitch Raid Blocker",
  "version": "2.1.2",
  "description": "Автоматически отменяет рейды на Twitch",
  "permissions": ["storage"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["https://*.twitch.tv/*"],
      "js": ["content.js"],
      "run_at": "document_idle"
    }
  ],
  "action": {
    "default_popup": "popup.html"
  }
}

Ключевые моменты:

• manifest_version: 3 — используем актуальную версию

• permissions: ["storage"] — минимальные разрешения, только для хранения статистики

• content_scripts — скрипт внедряется на все страницы Twitch

• run_at: "document_idle" — скрипт запускается после полной загрузки страницы

Обнаружение рейда: основная логика

Самая интересная часть — это content.js. Именно здесь происходит магия обнаружения и блокировки рейдов.

Шаг 1: Определение текстов рейда

Twitch поддерживает множество языков, но нам достаточно покрыть русский и английский. Создадим массивы с ключевыми фразами:

const RAID_TEXTS = [
  "проводит рейд", "начинает рейд", "вы присоединяетесь к рейду",
  "присоединяетесь к рейду", "вас перенаправляют", "скоро начнется рейд",
  "raiding", "starting raid", "you are joining a raid", "joining raid"
];

const CANCEL_TEXTS = [
  "отменить", "остаться", "покинуть", "не переходить",
  "cancel", "stay here", "stay on channel", "don't join", "dismiss"
];

Шаг 2: Нормализация текста

Текст на странице может содержать лишние пробелы, разные регистры и т.д. Приведём всё к единому виду:

function normalize(text) {
  return (text || "").replace(/\s+/g, " ").trim().toLowerCase();
}

function textIncludesAny(text, patterns) {
  const t = normalize(text);
  return patterns.some(p => t.includes(normalize(p)));
}

Шаг 3: Поиск модального окна

Нам нужно найти элемент, который:

1. Содержит текст о рейде

2. Имеет кнопку «Отменить»

3. Видим на странице

4. Имеет достаточный размер

function findRaidContainers() {
  const all = [...document.querySelectorAll("div, section")];
  const result = [];

  for (const el of all) {
    if (processedContainers.has(el)) continue;

    if (!isVisible(el)) continue;

    const txt = normalize(el.innerText || el.textContent || "");
    if (textIncludesAny(txt, RAID_TEXTS) &&
        txt.length >= 15 &&
        isLargeEnough(el) &&
        isLikelyRaidModal(el)) {

      result.push(el);
      processedContainers.add(el);
      setTimeout(() => processedContainers.delete(el), CACHE_TTL);
    }
  }

  return result;
}

Здесь используется Set для кэширования уже обработанных контейнеров — это предотвращает повторную обработку одних и тех же элементов. TTL (time-to-live) установлен в 15 секунд.

Шаг 4: Проверка видимости элемента

Важно убедиться, что элемент действительно виден пользователю:

function isVisible(el) {
  if (!el) return false;
  try {
    const style = window.getComputedStyle(el);
    if (style.display === "none" ||
        style.visibility === "hidden" ||
        style.opacity === "0")
      return false;

    const rect = el.getBoundingClientRect();
    return rect.width > 0 && rect.height > 0;
  } catch (e) {
    return false;
  }
}

Шаг 5: Поиск кнопки отмены

Ищем кнопку внутри контейнера рейда:

function findCancelInside(container) {
  if (!container) return null;
  const buttons = container.querySelectorAll("button, [role='button']");

  for (const btn of buttons) {
    const txt = normalize(btn.innerText ||
                         btn.textContent ||
                         btn.getAttribute("aria-label") || "");
    if (!txt) continue;
    if (textIncludesAny(txt, CANCEL_TEXTS)) {
      return btn;
    }
  }
  return null;
}

Обратите внимание: мы проверяем не только innerText, но и aria-label — это важно для доступности и случаев, когда текст кнопки скрыт визуально.

Шаг 6: Клик по кнопке

Финальный шаг — симуляция клика:

function clickElement(el, reason = "") {
  if (!el || !isVisible(el)) return false;
  try {
    el.click();
    log("✅ Clicked:", reason);
    return true;
  } catch (e) {
    return false;
  }
}

Observer и периодическая проверка

DOM на современных сайтах динамически обновляется. Рейд может появиться в любой момент, поэтому нам нужно постоянно мониторить изменения.

Используем два подхода:

1. MutationObserver — реагирует на изменения DOM

2. setInterval — страховочный опрос каждые 2 секунды

function startObserver() {
  if (observer) observer.disconnect();
  if (scanInterval) clearInterval(scanInterval);

  try {
    observer = new MutationObserver(() => tryBlockRaid());
    observer.observe(document.body || document.documentElement, {
      childList: true,
      subtree: true,
      attributes: false
    });

    scanInterval = setInterval(() => tryBlockRaid(), 2000);
    console.log("[RAID BLOCK] ✅ Observer started");
  } catch (e) {
    console.error("[RAID BLOCK] ❌ Observer failed:", e);
  }
}

Почему оба метода? MutationObserver может пропустить некоторые изменения, особенно если они происходят очень быстро. Периодический опрос служит страховкой.

Защита от частых срабатываний

Чтобы не кликать по кнопке много раз подряд, введём ограничение:

let lastBlockTs = 0;

function canBlockNow() {
  const now = Date.now();
  if (now - lastBlockTs < 3000) return false;
  lastBlockTs = now;
  return true;
}

Минимальный интервал между блокировками — 3 секунды. Этого достаточно, чтобы обработать один рейд и не создавать нагрузку.

Хранение статистики

Пользователям интересно знать, сколько рейдов было заблокировано. Используем chrome.storage.local:

function incrementCount() {
  raidBlockCount += 1;
  log("✅ Raid blocked! Count =", raidBlockCount);
  saveCount();
}

function saveCount() {
  chrome.storage.local.set({ raidBlockCount }, () => {
    notifyPopup();
  });
}

Данные сохраняются даже после перезагрузки браузера и синхронизируются с popup.

Popup: интерфейс управления

Интерфейс сделан минималистичным: переключатель включения/выключения, счётчик заблокированных рейдов и кнопка сброса.

HTML

<h1>🐱 КОТИКС БЛОЧИТ</h1>

<div class="row">
  <label for="toggleSwitch">Включить блокировку</label>
  <label class="switch">
    <input type="checkbox" id="toggleSwitch">
    <span class="slider"></span>
  </label>
</div>

<div class="status" id="statusText">Статус: ON</div>

<div class="row counter">
  RAID BLOCK: <span id="counterValue">0</span>
</div>

<button id="clearBtn">🗑️ Сбросить счётчик</button>

CSS (темная тема в стиле Twitch)

body {
  width: 280px;
  padding: 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #0e0e10;
  color: #efeff1;
  margin: 0;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  border-radius: 50%;
  transition: 0.3s;
}

input:checked + .slider {
  background-color: #f8a0a7;
}

JavaScript: реактивное обновление

chrome.storage.onChanged.addListener((changes, area) => {
  if (area !== "local") return;

  if (changes.raidBlockCount) {
    counterValue.textContent = String(changes.raidBlockCount.newValue || 0);
  }

  if (changes.raidBlockEnabled) {
    const enabled = changes.raidBlockEnabled.newValue !== false;
    toggle.checked = enabled;
    statusText.textContent = "Статус: " + (enabled ? "ON" : "OFF");
  }
});

Это обеспечивает мгновенное обновление интерфейса при изменении данных из любого компонента расширения.

Background Script: инициализация

Service Worker в Manifest V3 заменяет собой старый background page. Он запускается при установке расширения и инициализирует значения по умолчанию:

chrome.runtime.onInstalled.addListener(async () => {
  const data = await chrome.storage.local.get([
    "raidBlockEnabled",
    "raidBlockCount"
  ]);

  const updates = {};

  if (typeof data.raidBlockEnabled === "undefined") {
    updates.raidBlockEnabled = true;
  }

  if (typeof data.raidBlockCount === "undefined") {
    updates.raidBlockCount = 0;
  }

  if (Object.keys(updates).length > 0) {
    await chrome.storage.local.set(updates);
  }
});

Подводные камни при разработке

1. Динамическая природа Twitch

Twitch — это SPA (Single Page Application) на React. Элементы постоянно перерисовываются, классы могут меняться. Поэтому мы не полагаемся на конкретные селекторы или классы, а используем текстовый анализ и семантические признаки (наличие кнопки отмены, размер элемента).

2. Ложные срабатывания

Первоначально расширение могло реагировать на любые упоминания слова «рейд» в чате. Решение: требовать наличие кнопки отмены внутри контейнера и минимальный размер элемента (150×50 пикселей).

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

Первоначальная версия сканировала весь DOM каждую секунду. Это создавало нагрузку. Оптимизации:

• Кэширование обработанных контейнеров (TTL 15 секунд)

• Увеличение интервала опроса до 2 секунд

• Ранний выход при отсутствии видимых элементов

4. Manifest V3 ограничения

В Manifest V3 background script работает как Service Worker и может быть остановлен в любой момент. Поэтому вся критичная логика вынесена в content script, который работает непосредственно на странице.

Безопасность и приватность

Расширение запрашивает минимальные разрешения:

• storage — только для хранения локальной статистики

• Не собирает никакие персональные данные

• Не отправляет данные на внешние серверы

• Весь код выполняется локально в браузере

Исходный код открыт и доступен для аудита.

Заключение

Если вы тоже страдаете от ночных рейдов — надеюсь, это расширение вам поможет. А если вы разработчик — возможно, некоторые приёмы из статьи пригодятся в ваших проектах.

Ссылка на репозиторий: GitHub