Браузерне розширення «Warsaw Beer Overlay» — встановлення та налаштування

Розширення накладає на сторінки крафтових магазинів твій особистий статус «вже пив» і, коли збіг точний, твою оцінку для пива з твоєї історії Untappd. Підтримувані магазини згруповано за країною, з якої вони відправляють замовлення:

Щоб усе запрацювало, потрібні три речі: (1) завантажити свою історію пив у бота, (2) отримати токен доступу, (3) встановити й налаштувати розширення. Нижче — по кроках.

Що видно без токена

Якщо прибрати токен під час “Sync my check-ins”, прогін зупиниться, а збережені персональні оцінки очистяться під час перевірки його статусу.

Розширення працює навіть без токена: на сторінках магазинів показуються глобальні рейтинги Untappd (бейдж із золотою зіркою) і посилання на пиво/пошук. Це дозволяє одразу побачити, як воно працює.

Товари, які магазин однозначно позначає як не-пиво всередині змішаного каталогу, отримують сірий ✕; він не потребує токена й не є посиланням. Сторінки, повністю присвячені мерчу, снекам або іншим не-пивним категоріям, розширення не змінює.

Персональні можливості вмикає токен (Частина 2): бейдж із зеленою галочкою «ти вже це пив» і твоєю оцінкою, пунктирна рамка з ? для неточних збігів, а також пошук відсутніх пив і синхронізація чекінів. Popup розширення підкаже «Not connected» (англійський інтерфейс), поки токен не додано.


Передумови


Частина 1. Реєстрація в боті та завантаження списку пив

Це робиться один раз у Telegram-боті. Саме історія Untappd дає розширенню дані про те, що ти вже пив (без неї бейджі не з'являться).

1.1. Запустити бота й обрати мову

  1. Відкрий бота в Telegram, надішли /start.
  2. За потреби зміни мову: /lang.

1.2. Прив'язати акаунт Untappd

Надішли:

/link <username>

де <username> — твій нік в Untappd (можна повний URL untappd.com/user/<username>). У відповідь: ✅ Прив'язано до untappd.com/user/<username>.

1.3. Завантажити історію пив (імпорт) — це і є «список пив»

  1. Надішли команду /import.
  2. Бот попросить файл експорту з Untappd: CSV, JSON або ZIP (до 20 MB).
  3. Де взяти експорт: в Untappd → Supporter → Account → Download History.
  4. Надішли файл боту як документ (вкладення, не текст).
  5. Бот покаже прогрес і завершить: ✅ Імпортовано N чекінів.

Після цього бот знає, що саме ти пив і як оцінив — це й використає розширення.

Щоденне оновлення прив'язаного Untappd-профілю також може додати твої оцінки для останніх 25 пив, які бачить бот. Якщо оцінки з імпортованих чекінів немає, розширення показує цю оцінку профілю; оцінка з чекіну має пріоритет. Для решти історії користуйся імпортом або «Sync my check-ins».

Можна оновлювати історію будь-коли, надіславши новий експорт через /import.

1.4. Отримати токен доступу для розширення

Надішли:

/extension

Бот відповість інструкцією та токеном у вигляді копійованого блоку (<code>…</code>), адресою API і посиланням на Chrome Web Store. Zip-файлів бот більше не надсилає.

Важливо: токен ротується 1:1 — кожен виклик /extension створює новий токен і анулює попередній. Якщо колись зробиш /extension ще раз, не забудь оновити токен у налаштуваннях розширення.

Скопіюй токен — він знадобиться в Частині 3.


Частина 2. Встановлення розширення

Розширення встановлюється з Chrome Web Store — збирати з сорсів не потрібно, і бот більше не надсилає zip-файли.

2.1. Встановити зі стору

Відкрий сторінку розширення й натисни «Add to Chrome» / «Додати в Chrome»:

https://chromewebstore.google.com/detail/fdelmnhijeiojadcaihfdpecfcldbndg

Якщо бачиш «This item is not available» / «Item not available» — залогінься в Google-акаунт у браузері й онови сторінку. Розширення позначене як 18+ (пивна тематика), тому стор ховає його від незалогінених відвідувачів і не показує в пошуку. За прямим посиланням воно доступне будь-кому залогіненому.

Розширення з'явиться у списку. Закріпи його іконку на панелі (необов'язково, але зручно).

2.2. Оновлення

Оновлення приходять автоматично — Chrome сам підтягує нові версії зі стору. Нічого качати, розпаковувати й перезавантажувати не треба.

Якщо в тебе є токен розширення, бот надішле повідомлення в Telegram, коли нова версія справді доїде до користувачів (не в момент, коли її подали на рев'ю). Не хочеш такі повідомлення — надішли боту /announce off.

Переходиш зі старої unpacked-версії? Встав токен в Options (Частина 3) і видали стару копію в chrome://extensions. Токен той самий — його не треба перевидавати: він не прив'язаний до ID розширення й поки що працює в обох копіях одночасно. Стару копію варто прибрати, бо дві встановлені версії малюватимуть бейджі на тій самій сторінці магазину й дублюватимуть одна одну.

Для розробників: збірка з сорсів. Якщо хочеш зібрати сам: cd extension && npm install && npm run build → завантаж extension/dist/. Той самий npm run build кладе поруч архів extension/warsaw-beer-overlay-<версія>.zip.


Частина 3. Налаштування розширення

На самій сторінці налаштувань угорі є посилання «Read the setup guide →», яке веде назад до цієї інструкції — зручно, якщо ти потрапив на Options, не бачивши гайд раніше.

Сторінка автоматично підлаштовується під світлу або темну тему браузера. Save позначено як основну дію, Test connection — як допоміжну; при керуванні з клавіатури активне поле або кнопка має помітну рамку фокуса.

  1. Відкрий сторінку налаштувань розширення:

  2. У поле «Token» встав токен, отриманий від бота (/extension).

  3. Поле «API URL» залиш за замовчуванням: https://beer-api.ysilvestrov-ai.uk (зміни лише якщо в тебе власний інстанс API).

  4. (Необов'язково) Постав галочку «Find missing beers via Untappd (uses your Untappd session)» — тоді розширення дошукуватиме пиво, якого ще немає в каталозі бота, через твою власну Untappd-сесію/IP: бот повертає параметри пошуку, а розширення робить браузерний запит до публічного Algolia API Untappd і відправляє боту тільки JSON з кандидатами. Пошук обмежено кількома запитами на сторінку, з повагою до анти-бан-лімітів. Браузер попросить дозвіл на доступ до untappd.com і *.algolia.net — погодься. За замовчуванням вимкнено.

    Окремо від цієї галочки, для Flasker. На сторінках flasker.com.ua розширення і без цього дозволу автоматично завантажує у фоні сторінки всіх видимих товарів. Звідти воно читає категорію товару, броварню та опубліковане магазином посилання на Untappd. Так пиво без указаного об'єму не губиться, а підтверджені магазином келихи, сувеніри та інші товари не надсилаються на звірку як пиво й отримують червоний ✕. Запити йдуть лише на сам flasker.com.ua — новий дозвіл браузера для цього не потрібен. Це також працює для імпортних позицій, які Flasker позначає загальним брендом «Імпортне пиво»: розширення не вважає цей напис назвою броварні, а звіряє товар з опублікованим Untappd-посиланням. Розширення також зберігає рік видання та прибирає скорочення стилю з назви Flasker, тож бейдж не губиться для вінтажів і Imperial Stout. Якщо назва товару починається з назви самого пива, а не броварні, розширення теж зберігає її повністю — наприклад, для «Love on Tap».

  5. Натисни «Save».

  6. Натисни «Test connection»:


Частина 4. Використання

  1. Відкрий будь-який магазин зі списку вище — напряму або через каталог «Supported shops» у popup, описаний нижче.

  2. Розширення автоматично зчитує сітку пив на сторінці, надсилає її боту на звірку й малює кутовий бейдж на картках. Що означають бейджі:

    На великій сторінці готові картки отримують свій звичний бейдж, поки пізніші ще можуть показувати стан перевірки — не треба чекати, доки перевіриться весь каталог.

    Кольорові лише два знаки — зелена галочка й золота зірка. Це картки, між якими ти обираєш; решта сіра навмисно, щоб не відбирати увагу.

    Бейдж Що означає
    зелена галочка + оцінка (напр. 4.2) ти вже пив це пиво, показано твою оцінку; клік відкриває Untappd
    зелена галочка + золота зірка з оцінкою ти вже пив, але оцінки не ставив — показано глобальну; клік відкриває Untappd
    зелена галочка без числа ти вже пив; ані твоєї, ані глобальної оцінки ще нема
    золота зірка + оцінка ти ще не пив, показано глобальну оцінку; клік відкриває Untappd
    золота зірка без числа ти ще не пив, а оцінок на Untappd поки замало для рейтингу
    будь-який із них у пунктирній рамці з ? збіг неточний — пиво знайдено, але певності нема; клік відкриває Untappd для перевірки. За такого збігу галочка означає лише «схоже, ти це пив», тому твою оцінку не показуємо. Якщо є зірка з числом, це все одно глобальна оцінка — не знак, що ти не ставив свою
    лупа на Untappd не знайшли; клік відкриває пошук із підставленою назвою
    сіре кільце картка чекає черги
    сіра дуга, що обертається саме зараз перевіряємо це пиво
    сіра стрілка перезавантаження цього разу до цієї картки не дійшли. Наведи мишу — підкаже; перезавантаж сторінку, і ці картки продовжать перевірятися
    трикутник із ! перевірити не вдалося: Untappd не відповів, обірвався зв'язок або картка не розібралася. Наведи мишу — скаже, що саме
    сірий ✕ магазин сам класифікував товар як не пиво; бейдж не клікабельний

    Кожен бейдж має підпис для екранного читача, який промовляє стан словами, і показує той самий текст, якщо навести мишу. Наприклад, ✅ ? ⭐ 3.6 промовляється й показує «Непевний збіг. Схоже, ти це пив. Глобальна оцінка 3,6». Якщо бейджа нема взагалі — розширення на цій сторінці не працює (ціла категорія не-пива).

  3. Це працює і для SPA-навігації: коли магазин перемальовує список (фільтри, пагінація), накладка оновлюється сама.

Галочка + твоя оцінка з'являються лише для пив із твоєї історії (потрібен /import, Частина 1). Зірка показується і для пив, яких ти ще не пив, якщо вони вже є в каталозі бота. Число без зірки після галочки — завжди твоє; число із зіркою — глобальне. Без токена особистих бейджів не буває взагалі.

Пунктирна рамка з ? означає, що жоден рядок таблиці про власну оцінку не застосовується без застереження: ми не знаємо напевно, чи це саме те пиво. Наприклад, ✅ ? ⭐ 3.6 означає «схоже, ти це пив; 3.6 — глобальна оцінка», а не «ти не ставив оцінку». Рамка з'являється й на пиві, якого ти ще не пив: раніше неточний збіг там виглядав так само, як точний, і жодного сигналу «перевір сам» не було.

Якщо сторінка товару в магазині сама посилається на Untappd, розширення бере це посилання — тоді бейдж показує саме те пиво, навіть коли магазин написав назву інакше. Коли посилання суперечить броварні, яку називає сам магазин, бейдж лишається обережним — у пунктирній рамці з ?: пиво знайдено, але певності немає, перевір кліком.

Кнопка розширення на панелі (popup)

Клік по іконці розширення на панелі браузера відкриває невелике меню. Кнопки розташовані за важливістю — головна дія вгорі, службова внизу:

Поки токен не збережено, popup ставить блок «Not connected» з кнопкою «Get a token» одразу під заголовком — це і є перша дія, на яку потрапляє Tab. Кнопка «Sync my check-ins» у цьому стані неактивна й підписана Add a token to sync your check-ins.: без токена синхронізація все одно не відбулася б, тож розширення не питає зайвого дозволу на доступ до untappd.com і не показує помилку з'єднання.

Щойно ти збережеш токен (Частина 3), цей блок зникає, а «Sync my check-ins» знову стає головною кнопкою. Посилання «Read the setup guide →» нікуди не дівається — воно просто переїжджає вниз, у підвал popup'а, над «Clear all cache».

Popup підхоплює тему браузера: у темній темі він теж темний.

Зміна акаунта Untappd

/link <username> перемикає акаунт, історію якого показує бот і розширення. Попередні чекіни й оцінки зберігаються окремо: повторний /link зі старим username відновить їх. Новий акаунт починає з власної порожньої історії; запусти для нього «Sync my check-ins» або імпорт. Дані імпорту, зробленого до першої прив’язки, при першому /link відносяться до обраного акаунта.

Якщо змінити акаунт під час синхронізації чи імпорту, процес зупиниться; вже збережені дані залишаться у початкового акаунта. Запусти процес знову для поточного акаунта. Розширення покаже «Untappd account changed — start a new sync for the linked account.»; його лічильник не підміняє історію нового акаунта.

Після зміни акаунта стару версію розширення потрібно оновити. Без оновлення синхронізація може показувати загальну помилку; нова версія пояснює вимогу: «Update the extension, then start a new sync for the linked account.». Для незміненого акаунта звичайна синхронізація старої версії продовжує працювати.

«Sync my check-ins» — синхронізація чекінів без Supporter

Кнопка «Sync my check-ins» у popup'і завантажує твою історію чекінів прямо з твоєї Untappd-сесії в браузері й відправляє її боту — це альтернатива /import, для якої не потрібен Untappd Supporter.

Команда /status у боті показує час останньої активності синхронізації та останню відому кількість чекінів на Untappd. Навіть однакові числа не доводять, що після того не було нових чекінів. Якщо бот знає випиті пива без імпортованих чекінів, він покаже їхню кількість і підкаже запустити «Sync my check-ins».


Усунення несправностей

Симптом Що зробити
Test connection → health Перевір поле «API URL» і доступ до інтернету/тунелю.
Test connection → unauthorized Токен застарів або невірний. Зроби /extension, встав новий токен, Save.
Test connection → network Браузер не дотягнувся до API: для нестандартного URL дай дозвіл на хост (Save ще раз або chrome://extensions → Деталі); перевір мережу.
Бейджі не з'являються 1) Ти на підтримуваному сайті зі списку вище? 2) Чи зроблено /import? 3) Перезавантаж сторінку.
Зробив /extension повторно — перестало працювати Старий токен анульовано. Встав новий токен у налаштуваннях і Save.
Змінив API URL — не фетчить Під час Save браузер просить дозвіл на хост — погодься (або додай дозвіл у chrome://extensions → Деталі).
Щось інше не так: не те пиво чи рейтинг, нема бейджа, кнопка нічого не робить Надішли боту /report, обери Розширення, опиши, що бачиш, і додай скріншот. Бот перевірить, чи проблема вже відома, і відповість посиланням. Скріншоти лишаються на нашому сервері й не публікуються.

Коротко (швидкий старт)

  1. У боті: /start → /link <username> → /import (надіслати експорт Untappd) → /extension (скопіювати токен; бот дасть і посилання на стор).
  2. Встанови розширення зі стору: https://chromewebstore.google.com/detail/fdelmnhijeiojadcaihfdpecfcldbndg (побачив «Item not available» — залогінься в Google і онови сторінку).
  3. Options розширення → встав токен → Save → Test connection → ✅.
  4. Зайди на підтримуваний магазин — бейджі «вже пив» + оцінка з'являться самі.
  5. Оновлення приходять самі зі стору — качати нічого не треба.

Збережені позначки й оцінки магазинів перевіряються для поточного акаунта. Після зміни /link або токена відкрий сторінку магазину знову чи натисни «Refresh this page»: старі оцінки не використовуються. Якщо сервер тимчасово недоступний, розширення не показує неперевірені збережені особисті результати.