Roulette Tabs

В цифрах

835

строк кода: скрипт 433, стили 263, окно расширения 127, манифест 12

0

внешних зависимостей и библиотек

3

интерфейса: панель ставки, колесо, окно расширения

5,5 с

спин: колесо 2–3 оборота, шарик 5 навстречу

×2 / ×36

выплата за цвет и за зеро

15

последних выпадений в истории

Что умеет

• включается на текущем сайте одной кнопкой; доступ запрашивается только к нему и снимается при выключении
• вкладки сайта в цветах рулетки: первая — зеро, дальше красная и чёрная по очереди, активная — в золотой рамке
• ставка вводится в поле, ставить можно на красное, чёрное или зеро
• «Крутить» или Enter в поле ставки — вкладки слетаются в колесо, колесо и шарик крутятся навстречу
• результат: какая вкладка и какой цвет выпали, выигрыш или проигрыш с суммой
• клик или Esc — вкладки разлетаются по местам, выпавшая трижды мигает
• история последних 15 выпадений цветными точками
• автопоиск нашёл не тот ряд кнопок — селектор вкладок задаётся вручную
• сайт работает как обычно: клики по вкладкам доходят, логика сайта не меняется

Как устроено

одно расширение

Без сервера, базы и бэкенда, всё работает в браузере. Две части: окно расширения и скрипт со стилями на странице.

вслепую

Доступа к целевому сайту не было, вёрстка известна только по скриншоту. Для разработки — демо-копия панели вкладок и маленький сервер на Node.js.

автопоиск вкладок

Группа из 4 и больше коротких однотипных кнопок или ссылок у общего родителя; role="tab" и классы со словом tab — в приоритете. Промах — селектор задаётся в окне расширения и подхватывается сразу через chrome.storage.sync.

перерисовка сайта

SPA вроде React затирают классы при переключении вкладок. MutationObserver с задержкой 200 мс возвращает покраску, а свои изменения и свои элементы пропускает, поэтому не уходит в бесконечный цикл.

доступ к одному сайту

Адреса сайта в коде нет: доступ объявлен необязательным и запрашивается по клику в окне расширения, скрипт регистрируется динамически через chrome.scripting. Запрос — сразу по клику, до любых асинхронных шагов, иначе Chrome его отклоняет.

перелёт в колесо

Каждая вкладка летит из своего места на странице в своё место на круге. Набор функций трансформации одинаковый, поэтому браузер плавно ведёт каждую часть; на обратном пути угол берётся ближайший кратный 360°, без лишнего оборота.

шарик точно на вкладке

Результат выбирается заранее через crypto.getRandomValues. Конечный угол шарика = угол колеса + угол выпавшей вкладки: кривые замедления разные, но приходят они одновременно. Со второй половины спина шарик падает с дорожки на вкладку с отскоком.

Как проверялось

ручные прогоны

На демо-странице: покраска всех 12 вкладок, возврат покраски после того, как страница затирает классы, сборка колеса, спин, выигрыш и проигрыш, закрытие по клику и Esc, возврат вкладок, история, пустая ставка.

состояние через консоль

Число покрашенных вкладок, появление и удаление оверлея, запущенные CSS-анимации при возврате вкладок.

синтаксис

node --check для всех скриптов, manifest.json разбирается как JSON. Ошибок в консоли браузера нет.

вне прогонов

Сам целевой сайт — доступа к нему не было. Окно расширения проверено на странице с заглушкой API Chrome.

Найденные баги

Скриншоты