// ==UserScript== // @name Telegram Web Stories Viewer Leaderboard // @namespace web.nextbyte.ai // @version 8.0 // @description Fast leaderboard showing who viewed your stories. Collects ALL viewers by scrolling fully. Tracks unique viewers, coverage %, and last 3 stories stats. Works from My Stories tab. Click 📊 to toggle! // @author NextByte // @match https://web.telegram.org/* // @grant none // ==/UserScript== (function() { 'use strict'; console.log('🚀 Telegram Stories Viewer Leaderboard v8.0'); // Store viewer data let viewerStats = {}; let isCollecting = false; let currentStoryIndex = 0; let totalStories = 0; let storyViewerCounts = []; let processedStories = 0; // Create leaderboard UI function createLeaderboardUI() { const existing = document.getElementById('story-viewer-leaderboard'); if (existing) existing.remove(); const leaderboard = document.createElement('div'); leaderboard.id = 'story-viewer-leaderboard'; leaderboard.style.cssText = ` position: fixed; top: 20px; right: 20px; width: 380px; max-height: 650px; background: linear-gradient(135deg, rgba(0, 0, 0, 0.98), rgba(36, 129, 204, 0.15)); border-radius: 16px; padding: 20px; color: white; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; z-index: 99999; overflow-y: auto; box-shadow: 0 12px 48px rgba(36, 129, 204, 0.4), 0 8px 24px rgba(0, 0, 0, 0.6); border: 2px solid rgba(36, 129, 204, 0.6); `; leaderboard.innerHTML = `

📊 Story Viewers

`; document.body.appendChild(leaderboard); console.log('✅ Leaderboard UI created'); // Event listeners const closeBtn = document.getElementById('close-leaderboard'); if (closeBtn) { closeBtn.addEventListener('click', () => { leaderboard.remove(); }); } const startBtn = document.getElementById('start-collection'); if (startBtn) { startBtn.addEventListener('click', startCollection); } const exportBtn = document.getElementById('export-data'); if (exportBtn) { exportBtn.addEventListener('click', exportData); } return leaderboard; } // Export data to CSV function exportData() { const sortedViewers = Object.entries(viewerStats) .map(([id, data]) => ({ id, ...data })) .sort((a, b) => b.count - a.count); if (sortedViewers.length === 0) { alert('No data to export. Please collect viewer data first.'); return; } let csv = 'Rank,Full Name,Nickname,User ID,View Count\n'; sortedViewers.forEach((viewer, index) => { const fullName = (viewer.name || 'Unknown').replace(/"/g, '""'); const nickname = (viewer.nickname || '').replace(/"/g, '""'); csv += `${index + 1},"${fullName}","${nickname}",${viewer.id},${viewer.count}\n`; }); const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' }); const link = document.createElement('a'); const url = URL.createObjectURL(blob); link.setAttribute('href', url); link.setAttribute('download', `telegram_story_viewers_${Date.now()}.csv`); link.style.visibility = 'hidden'; document.body.appendChild(link); link.click(); document.body.removeChild(link); } // Update leaderboard display function updateLeaderboard() { const content = document.getElementById('leaderboard-content'); const exportBtn = document.getElementById('export-data'); if (!content) return; const sortedViewers = Object.entries(viewerStats) .map(([id, data]) => ({ id, ...data })) .sort((a, b) => b.count - a.count); if (sortedViewers.length === 0) { content.innerHTML = '

No data yet. Click "Start Collecting Viewers" to begin.

'; if (exportBtn) exportBtn.style.display = 'none'; return; } if (exportBtn) exportBtn.style.display = 'block'; let html = '

'; sortedViewers.forEach((viewer, index) => { const medal = index === 0 ? '🥇' : index === 1 ? '🥈' : index === 2 ? '🥉' : `${index + 1}.`; const displayName = viewer.nickname ? `${viewer.name || 'Unknown'} (@${viewer.nickname})` : (viewer.name || 'Unknown'); const peerId = viewer.peerId || viewer.id; html += `

${medal}

${displayName}

Viewed ${viewer.count} ${viewer.count === 1 ? 'story' : 'stories'}

`; }); html += '

'; content.innerHTML = html; } // Update status message function updateStatus(message) { const status = document.getElementById('leaderboard-status'); if (status) { status.textContent = message; } } // Update stats display function updateStats() { const statsDiv = document.getElementById('leaderboard-stats'); if (!statsDiv) return; const uniqueCount = Object.keys(viewerStats).length; const coverage = totalStories > 0 ? Math.round((processedStories / totalStories) * 100) : 0; const uniqueSpan = document.getElementById('stat-unique-count'); const processedSpan = document.getElementById('stat-processed-count'); const totalSpan = document.getElementById('stat-total-count'); const coverageSpan = document.getElementById('stat-coverage'); if (uniqueSpan) uniqueSpan.textContent = uniqueCount; if (processedSpan) processedSpan.textContent = processedStories; if (totalSpan) totalSpan.textContent = totalStories; if (coverageSpan) coverageSpan.textContent = coverage + '%'; const lastThree = storyViewerCounts.slice(-3).reverse(); let lastThreeHtml = ''; lastThree.forEach((count, idx) => { const storyNum = processedStories - idx; lastThreeHtml += `

Story ${storyNum}: ${count} viewers

`; }); const lastThreeDiv = document.getElementById('stat-last-three'); if (lastThreeDiv) { lastThreeDiv.innerHTML = lastThreeHtml || '

No stories processed yet

'; } } // Sleep function function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } // Wait for element function waitForElement(selector, timeout = 5000) { return new Promise((resolve) => { const element = document.querySelector(selector); if (element) { resolve(element); return; } const observer = new MutationObserver(() => { const element = document.querySelector(selector); if (element) { observer.disconnect(); resolve(element); } }); observer.observe(document.body, { childList: true, subtree: true }); setTimeout(() => { observer.disconnect(); resolve(null); }, timeout); }); } // Scroll to load all viewers async function scrollToLoadAllViewers(element) { return new Promise(async (resolve) => { let lastHeight = element.scrollHeight; let noChangeCount = 0; const maxAttempts = 1000; let attempts = 0; console.log('🔄 Starting scroll to load all viewers...'); while (attempts < maxAttempts && noChangeCount < 50) { element.scrollTop = element.scrollHeight; await sleep(20); if (element.scrollHeight === lastHeight) { noChangeCount++; } else { noChangeCount = 0; lastHeight = element.scrollHeight; } attempts++; } console.log(`✅ Scroll complete. Final height: ${lastHeight}`); resolve(); }); } // Collect viewers from current story async function collectViewersFromStory() { return new Promise(async (resolve) => { try { // Click the viewers button in the footer const viewersButton = document.querySelector('._ViewerStoryFooterRight_13e91_342 button, [class*="ViewerStoryFooterRight"] button'); if (viewersButton) { console.log('Found viewers button, clicking...'); viewersButton.click(); } else { // Try alternative - find button near views count const viewsSpan = document.querySelector('[class*="ViewerStoryFooterLeft"] .i18n'); if (viewsSpan && viewsSpan.textContent.includes('view')) { const btn = viewsSpan.closest('[class*="ViewerStoryFooter"]')?.querySelector('button'); if (btn) { console.log('Found viewers button via views span, clicking...'); btn.click(); } } } await sleep(300); // Wait for viewers list to appear let viewersContainer = null; // Try to find in right column first const rightColumn = document.querySelector('#column-right, [class*="column-right"]'); if (rightColumn && rightColumn.offsetParent !== null) { viewersContainer = rightColumn; console.log('Found viewers in right column'); } else { // Try to find popup/modal viewersContainer = await waitForElement('[class*="popup"], [class*="modal"], [class*="Popup"], [class*="Modal"], [class*="drawer"]', 3000); } if (!viewersContainer) { console.log('Viewers container not found for story', currentStoryIndex + 1); updateStatus(`⚠️ Story ${currentStoryIndex + 1}/${totalStories}: Could not open viewers list`); await sleep(50); resolve(); return; } // Find scrollable element let scrollable = viewersContainer.querySelector('.scrollable-y, [class*="scrollable"]'); if (!scrollable) { const containers = viewersContainer.querySelectorAll('[style*="overflow"], [class*="scroll"]'); for (const container of containers) { if (container.scrollHeight > container.clientHeight) { scrollable = container; break; } } } if (scrollable) { console.log(`Scrolling to load all viewers...`); await scrollToLoadAllViewers(scrollable); await sleep(100); } else { console.log('⚠️ Could not find scrollable container'); if (viewersContainer.scrollHeight > viewersContainer.clientHeight) { await scrollToLoadAllViewers(viewersContainer); await sleep(100); } } // Parse viewer elements let viewerElements = viewersContainer.querySelectorAll('a.chatlist-chat[data-peer-id]'); if (viewerElements.length < 50) { const altElements = viewersContainer.querySelectorAll('[data-peer-id]'); if (altElements.length > viewerElements.length) { viewerElements = altElements; console.log(`Using alternative selector, found ${viewerElements.length} viewers`); } } console.log(`Found ${viewerElements.length} viewers in this story`); // Track viewers for this story const storyViewerCount = viewerElements.length; storyViewerCounts.push(storyViewerCount); // Parse viewer data viewerElements.forEach(element => { const peerId = element.getAttribute('data-peer-id'); if (!peerId) return; let name = 'Unknown'; let nameElement = element.querySelector('.peer-title-inner'); if (!nameElement) { nameElement = element.querySelector('.peer-title'); } if (nameElement) { name = nameElement.textContent.trim(); } let nickname = ''; let subtitleElement = element.querySelector('.peer-subtitle-inner'); if (!subtitleElement) { subtitleElement = element.querySelector('.dialog-subtitle-span-last'); } if (!subtitleElement) { subtitleElement = element.querySelector('.row-subtitle'); } if (subtitleElement) { const subtitleText = subtitleElement.textContent.trim(); if (subtitleText.startsWith('@')) { nickname = subtitleText.substring(1); } } if (!viewerStats[peerId]) { viewerStats[peerId] = { name: name, nickname: nickname, count: 0, peerId: peerId }; } viewerStats[peerId].count++; }); // Close viewers popup/panel const closeButton = viewersContainer.querySelector('.popup-close, [class*="close"], button[title*="close"]'); if (closeButton) { console.log('Closing viewers list...'); closeButton.click(); } else { console.log('Pressing Escape to close viewers list...'); document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', code: 'Escape', keyCode: 27 })); } await sleep(50); updateLeaderboard(); updateStats(); resolve(); } catch (e) { console.error('Error collecting viewers:', e); resolve(); } }); } // Go to next story async function goToNextStory() { try { const storyViewer = document.querySelector('#stories-viewer, [class*="story-viewer"]'); if (storyViewer) { const event = new KeyboardEvent('keydown', { key: 'ArrowRight', code: 'ArrowRight', keyCode: 39, bubbles: true, cancelable: true }); storyViewer.dispatchEvent(event); document.dispatchEvent(event); await sleep(100); return true; } } catch (e) { console.error('Error going to next story:', e); } return false; } // Scroll to find total stories async function scrollToFindTotalStories() { return new Promise(async (resolve) => { try { let storiesList = document.querySelector('.sidebar-content, [class*="sidebar"]'); if (!storiesList) { const scrollables = document.querySelectorAll('[class*="scroll"]'); for (const el of scrollables) { if (el.scrollHeight > el.clientHeight) { storiesList = el; break; } } } if (!storiesList) { console.log('Could not find stories list'); resolve(); return; } let lastHeight = storiesList.scrollHeight; let noChangeCount = 0; while (noChangeCount < 10) { storiesList.scrollTop = storiesList.scrollHeight; await sleep(100); if (storiesList.scrollHeight === lastHeight) { noChangeCount++; } else { noChangeCount = 0; lastHeight = storiesList.scrollHeight; } } // Look for total count indicator const countElements = document.querySelectorAll('[class*="counter"], [class*="count"]'); for (const el of countElements) { const text = el.textContent.trim(); const match = text.match(/(\d+)\/(\d+)/); if (match) { totalStories = parseInt(match[2]); console.log('Found total stories:', totalStories); resolve(); return; } } resolve(); } catch (e) { console.error('Error scrolling to find total stories:', e); resolve(); } }); } // Main collection function async function startCollection() { if (isCollecting) { console.log('Already collecting...'); return; } isCollecting = true; viewerStats = {}; storyViewerCounts = []; processedStories = 0; currentStoryIndex = 0; const statsDiv = document.getElementById('leaderboard-stats'); if (statsDiv) statsDiv.style.display = 'block'; updateStatus('📍 Scrolling to find total stories...'); await scrollToFindTotalStories(); if (totalStories === 0) { updateStatus('⚠️ Could not determine total stories. Make sure you are on My Stories page.'); isCollecting = false; return; } updateStatus(`📍 Found ${totalStories} stories. Starting collection...`); await sleep(500); // Iterate through all stories for (let i = 0; i < totalStories; i++) { if (!isCollecting) break; currentStoryIndex = i; processedStories = i + 1; updateStatus(`⏳ Processing story ${i + 1}/${totalStories}...`); console.log(`Processing story ${i + 1}/${totalStories}`); await collectViewersFromStory(); if (i < totalStories - 1) { await goToNextStory(); await sleep(150); } updateStats(); } updateStatus(`✅ Collection complete! Processed ${processedStories}/${totalStories} stories`); updateLeaderboard(); updateStats(); isCollecting = false; } // Create toggle button function createToggleButton() { const existing = document.getElementById('story-leaderboard-toggle'); if (existing) existing.remove(); const button = document.createElement('button'); button.id = 'story-leaderboard-toggle'; button.style.cssText = ` position: fixed; bottom: 20px; right: 20px; width: 70px; height: 70px; border-radius: 50%; background: linear-gradient(135deg, #2481cc, #1a5fa0); border: 3px solid #fff; color: white; font-size: 32px; cursor: pointer; z-index: 99999; box-shadow: 0 8px 24px rgba(36, 129, 204, 0.6), 0 4px 12px rgba(0, 0, 0, 0.5); transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; font-weight: bold; `; button.innerHTML = '📊'; button.title = 'Toggle Story Viewers Leaderboard (Ctrl+Shift+L)'; button.addEventListener('mouseover', () => { button.style.transform = 'scale(1.1)'; button.style.boxShadow = '0 6px 16px rgba(0, 0, 0, 0.4)'; }); button.addEventListener('mouseout', () => { button.style.transform = 'scale(1)'; button.style.boxShadow = '0 8px 24px rgba(36, 129, 204, 0.6), 0 4px 12px rgba(0, 0, 0, 0.5)'; }); button.addEventListener('click', () => { const existing = document.getElementById('story-viewer-leaderboard'); if (existing) { existing.remove(); } else { createLeaderboardUI(); } }); document.body.appendChild(button); console.log('✅ Toggle button created'); } // Keyboard shortcut document.addEventListener('keydown', (e) => { if (e.ctrlKey && e.shiftKey && e.code === 'KeyL') { const existing = document.getElementById('story-viewer-leaderboard'); if (existing) { existing.remove(); } else { createLeaderboardUI(); } } }); // Initialize function initialize() { console.log('🎯 Initializing script...'); try { createToggleButton(); createLeaderboardUI(); console.log('✅ Script initialized successfully'); } catch (e) { console.error('❌ Initialization error:', e); } } // Wait for DOM to be ready if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initialize); } else { initialize(); } // Also initialize on window load window.addEventListener('load', initialize); // Retry initialization after a delay setTimeout(initialize, 1000); })();