Fixed panel rendering & interaction for Telegram Web
порт CSV» выгружает все собранные данные в CSV-файл для последующего анализа в Excel или Google Sheets.
3. Описание элементов панели
Элемент Что делает
🇺🇦 «Зроблено в Україні» Заголовок панели + логотип
По реакциям Сортировка сообщений по количеству реакций (лайки, эмодзи)
Дата ↓ Новые сообщения сверху (по дате)
Дата ↑ Старые сообщения сверху (по дате)
По медиа Сортировка по количеству медиа (фото/видео)
По длине Сортировка по количеству символов текста
За 24ч Фильтр: только сообщения за последние 24 часа
Обновить Пересобирает данные, если не всё загрузилось
Экспорт CSV Выгружает таблицу (текст, реакции, медиа, дата)
Цветной график ТОП-10 Отображает первые 10 сообщений по выбранному критерию
4. Что показывает график
10 столбцов — 10 сообщений, отфильтрованных по кнопке.
Высота столбца — «сила» показателя (реакции, медиа или длина текста).
Цвет — случайный, для удобного различия.
5. Основные фишки
Поддержка Telegram Web /a/ (React) и /k/ (Angular).
Автоматическая перерисовка при смене чата (через MutationObserver).
Тёмная/светлая тема поддерживаются (используются CSS переменные Telegram).
Всё в одном файле — ставится одним кликом в Tampermonkey.
Сохранение позиции панели между перезагрузками.
Логотип «Зроблено в Україні» и 🇺🇦.
6. Пример интерфейса панели
🖼️ Пример/макет (как выглядит панель):
┌─────────────────────────────┐
│ 🇺🇦 Зроблено в Україні ✖ │
├─────────────────────────────┤
│ [По реакциям] [Дата ↓] [Дата ↑] │
│ [По медиа] [По длине] [За 24ч] │
│ [Обновить] [Экспорт CSV] │
│ ┌───────────────────────────┐ │
│ │ Цветной график ТОП-10 │ │
│ │ █ █ █ █ █ █ █ █ █ █ │ │
│ └───────────────────────────┘ │
└─────────────────────────────┘
— Панель плавает справа поверх Telegram Web.
— График сразу показывает ТОП-10 по реакциям (по умолчанию).
— Кнопками можно менять сортировки и фильтры.
7. Куда вставить скрипт
Установи расширение Tampermonkey.
Создай новый скрипт.
Вставь туда готовый код (я дал выше).
Сохрани.
Открой https://web.telegram.org/a/
или /k/ — панель появится справа.
✅ Что добавлено:
Панель с выбором языка.
Сохранение выбранного языка в localStorage.
Поддержка большинства распространённых языков: украинский, русский, английский, немецкий, французский, испанский, итальянский, португальский, польский, китайский, японский, корейский.
Кнопки панели меняют текст при смене языка.
https://web.telegram.org/k/ и /a/
тестел всё работает
--------------------------------
❌ Реальные причины жалоб (это не «у людей руки кривые»)
1️⃣ Панель создаётся слишком рано
В Telegram Web DOM лениво и динамически
document-end ≠ готовый интерфейс
В итоге:
либо панель не вставляется
либо вставляется под overlay → белый прямоугольник
2️⃣ z-index недостаточен
Telegram использует значения 100000+
Твой 99999 → панель есть, но под слоем
3️⃣ Chart.js может не загрузиться
CDN грузится асинхронно
init() не вызывается → canvas пустой → «белый блок»
4️⃣ Селекторы сообщений устарели
[class*="message"]
В /k и /a они разные → сортировка «ничего не видит»
✅ Что я исправил (минимально)
✔ Ждём загрузку Telegram UI
✔ Поднимаем z-index
✔ Безопасно ждём Chart.js
✔ Фиксим селекторы
✔ Панель всегда интерактивна
------------------------------
The issue was caused by Telegram Web changing its DOM structure and z-index layers.
The panel was injected too early and rendered behind UI overlays.
The script has been fixed by delaying initialization, increasing z-index, and updating selectors.
.png?locale=ko)
.png?locale=ko)
