☰

YouTube Enhancer (Real-Time Subscriber Count)

Display Real-Time Subscriber Count.

  1. // ==UserScript==
  2. // @name         YouTube Enhancer (Real-Time Subscriber Count)
  3. // @description  Display Real-Time Subscriber Count.
  4. // @icon         https://raw.githubusercontent.com/exyezed/youtube-enhancer/refs/heads/main/extras/youtube-enhancer.png
  5. // @version      1.4
  6. // @author       exyezed
  7. // @namespace    https://github.com/exyezed/youtube-enhancer/
  8. // @supportURL   https://github.com/exyezed/youtube-enhancer/issues
  9. // @license      MIT
  10. // @match        https://www.youtube.com/*
  11. // @grant        GM_xmlhttpRequest
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.     'use strict';
  16.  
  17.     const OPTIONS = ['subscribers', 'views', 'videos'];
  18.     const FONT_LINK = "https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap";
  19.     const STATS_API_URL = 'https://api.livecounts.io/youtube-live-subscriber-counter/stats/';
  20.     const DEFAULT_UPDATE_INTERVAL = 2000;
  21.     const DEFAULT_OVERLAY_OPACITY = 0.75;
  22.  
  23.     let overlay = null;
  24.     let isUpdating = false;
  25.     let intervalId = null;
  26.     let currentChannelName = null;
  27.     let updateInterval = parseInt(localStorage.getItem('youtubeEnhancerInterval')) || DEFAULT_UPDATE_INTERVAL;
  28.     let overlayOpacity = parseFloat(localStorage.getItem('youtubeEnhancerOpacity')) || DEFAULT_OVERLAY_OPACITY;
  29.  
  30.     const lastSuccessfulStats = new Map();
  31.     const previousStats = new Map();
  32.     
  33.     let previousUrl = location.href;
  34.     let isChecking = false;
  35.  
  36.     async function fetchChannel(url) {
  37.       if (isChecking) return null;
  38.       isChecking = true;
  39.       
  40.       try {
  41.         const response = await fetch(url, {
  42.           credentials: 'same-origin'
  43.         });
  44.         
  45.         if (!response.ok) return null;
  46.         
  47.         const html = await response.text();
  48.         const match = html.match(/var ytInitialData = (.+?);<\/script>/);
  49.         return match && match[1] ? JSON.parse(match[1]) : null;
  50.       } catch (error) {
  51.         return null;
  52.       } finally {
  53.         isChecking = false;
  54.       }
  55.     }
  56.  
  57.     async function getChannelInfo(url) {
  58.       const data = await fetchChannel(url);
  59.       if (!data) return null;
  60.       
  61.       try {
  62.         const channelName = data?.metadata?.channelMetadataRenderer?.title || "Unknown";
  63.         const channelId = data?.metadata?.channelMetadataRenderer?.externalId || null;
  64.         
  65.         return {channelName, channelId};
  66.       } catch (e) {
  67.         return null;
  68.       }
  69.     }
  70.  
  71.     function isChannelPageUrl(url) {
  72.       return url.includes('youtube.com/') && 
  73.              (url.includes('/channel/') || url.includes('/@')) && 
  74.              !url.includes('/video/') && 
  75.              !url.includes('/watch');
  76.     }
  77.  
  78.     function checkUrlChange() {
  79.       const currentUrl = location.href;
  80.       if (currentUrl !== previousUrl) {
  81.         previousUrl = currentUrl;
  82.         if (isChannelPageUrl(currentUrl)) {
  83.           setTimeout(() => getChannelInfo(currentUrl), 500);
  84.         }
  85.       }
  86.     }
  87.  
  88.     history.pushState = (function(f) {
  89.       return function() {
  90.         f.apply(this, arguments);
  91.         checkUrlChange();
  92.       };
  93.     })(history.pushState);
  94.  
  95.     history.replaceState = (function(f) {
  96.       return function() {
  97.         f.apply(this, arguments);
  98.         checkUrlChange();
  99.       };
  100.     })(history.replaceState);
  101.  
  102.     window.addEventListener('popstate', checkUrlChange);
  103.     setInterval(checkUrlChange, 1000);
  104.  
  105.     function init() {
  106.         loadFonts();
  107.         initializeLocalStorage();
  108.         addStyles();
  109.         observePageChanges();
  110.         addNavigationListener();
  111.         
  112.         if (isChannelPageUrl(location.href)) {
  113.           getChannelInfo(location.href);
  114.         }
  115.     }
  116.  
  117.     function loadFonts() {
  118.         const fontLink = document.createElement("link");
  119.         fontLink.rel = "stylesheet";
  120.         fontLink.href = FONT_LINK;
  121.         document.head.appendChild(fontLink);
  122.     }
  123.  
  124.     function initializeLocalStorage() {
  125.         OPTIONS.forEach(option => {
  126.             if (localStorage.getItem(`show-${option}`) === null) {
  127.                 localStorage.setItem(`show-${option}`, 'true');
  128.             }
  129.         });
  130.     }
  131.  
  132.     function addStyles() {
  133.         const style = document.createElement('style');
  134.         style.textContent = `
  135.             .settings-button {
  136.                 position: absolute;
  137.                 top: 12px;
  138.                 right: 12px;
  139.                 width: 16px;
  140.                 height: 16px;
  141.                 cursor: pointer;
  142.                 z-index: 2;
  143.                 transition: transform 0.3s ease;
  144.             }
  145.             .settings-button:hover {
  146.                 transform: rotate(45deg);
  147.             }
  148.             .settings-menu {
  149.                 position: absolute;
  150.                 top: 35px;
  151.                 right: 12px;
  152.                 background: rgba(0, 0, 0, 0.95);
  153.                 padding: 10px;
  154.                 border-radius: 6px;
  155.                 z-index: 2;
  156.                 display: none;
  157.             }
  158.             .settings-menu.show {
  159.                 display: flex;
  160.             }
  161.             .interval-slider, .opacity-slider {
  162.                 width: 160px;
  163.                 margin: 5px 0;
  164.                 height: 4px;
  165.             }
  166.             .interval-value, .opacity-value {
  167.                 color: white;
  168.                 font-size: 12px;
  169.                 margin-top: 3px;
  170.                 margin-bottom: 8px;
  171.             }
  172.             .setting-group {
  173.                 margin-bottom: 10px;
  174.             }
  175.             .setting-group:last-child {
  176.                 margin-bottom: 0;
  177.             }
  178.             @keyframes spin {
  179.                 from { transform: rotate(0deg); }
  180.                 to { transform: rotate(360deg); }
  181.             }
  182.         `;
  183.         document.head.appendChild(style);
  184.     }
  185.  
  186.     function createSettingsButton() {
  187.         const button = document.createElement('div');
  188.         button.className = 'settings-button';
  189.         
  190.         const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  191.         svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  192.         svg.setAttribute("viewBox", "0 0 512 512");
  193.         
  194.         const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
  195.         path.setAttribute("fill", "white");
  196.         path.setAttribute("d", "M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z");
  197.         
  198.         svg.appendChild(path);
  199.         button.appendChild(svg);
  200.         
  201.         return button;
  202.     }
  203.  
  204.     function createSettingsMenu() {
  205.         const menu = document.createElement('div');
  206.         menu.className = 'settings-menu';
  207.         menu.style.gap = '15px'; 
  208.         menu.style.width = '360px';
  209.     
  210.         const displaySection = createDisplaySection();
  211.         const controlsSection = createControlsSection();
  212.     
  213.         menu.appendChild(displaySection);
  214.         menu.appendChild(controlsSection);
  215.     
  216.         return menu;
  217.     }
  218.  
  219.     function createDisplaySection() {
  220.         const displaySection = document.createElement('div');
  221.         displaySection.style.flex = '1';
  222.         
  223.         const displayLabel = document.createElement('label');
  224.         displayLabel.textContent = 'Display Options';
  225.         displayLabel.style.marginBottom = '10px';
  226.         displayLabel.style.display = 'block';
  227.         displayLabel.style.fontSize = '16px';
  228.         displayLabel.style.fontWeight = 'bold';
  229.         displaySection.appendChild(displayLabel);
  230.     
  231.         OPTIONS.forEach(option => {
  232.             const checkboxContainer = document.createElement('div');
  233.             checkboxContainer.style.display = 'flex';
  234.             checkboxContainer.style.alignItems = 'center';
  235.             checkboxContainer.style.marginTop = '5px';
  236.     
  237.             const checkbox = document.createElement('input');
  238.             checkbox.type = 'checkbox';
  239.             checkbox.id = `show-${option}`;
  240.             checkbox.checked = localStorage.getItem(`show-${option}`) !== 'false';
  241.             checkbox.style.marginRight = '8px';
  242.             checkbox.style.cursor = 'pointer';
  243.     
  244.             const checkboxLabel = document.createElement('label');
  245.             checkboxLabel.htmlFor = `show-${option}`;
  246.             checkboxLabel.textContent = option.charAt(0).toUpperCase() + option.slice(1);
  247.             checkboxLabel.style.cursor = 'pointer';
  248.             checkboxLabel.style.color = 'white';
  249.             checkboxLabel.style.fontSize = '14px';
  250.     
  251.             checkbox.addEventListener('change', () => {
  252.                 localStorage.setItem(`show-${option}`, checkbox.checked);
  253.                 updateDisplayState();
  254.             });
  255.     
  256.             checkboxContainer.appendChild(checkbox);
  257.             checkboxContainer.appendChild(checkboxLabel);
  258.             displaySection.appendChild(checkboxContainer);
  259.         });
  260.  
  261.         return displaySection;
  262.     }
  263.  
  264.     function createControlsSection() {
  265.         const controlsSection = document.createElement('div');
  266.         controlsSection.style.flex = '1';
  267.         
  268.         const intervalLabel = document.createElement('label');
  269.         intervalLabel.textContent = 'Update Interval';
  270.         intervalLabel.style.display = 'block';
  271.         intervalLabel.style.marginBottom = '5px';
  272.         intervalLabel.style.fontSize = '16px';
  273.         intervalLabel.style.fontWeight = 'bold';
  274.     
  275.         const intervalSlider = document.createElement('input');
  276.         intervalSlider.type = 'range';
  277.         intervalSlider.min = '2';
  278.         intervalSlider.max = '10';
  279.         intervalSlider.value = updateInterval / 1000;
  280.         intervalSlider.step = '1';
  281.         intervalSlider.className = 'interval-slider';
  282.     
  283.         const intervalValue = document.createElement('div');
  284.         intervalValue.className = 'interval-value';
  285.         intervalValue.textContent = `${intervalSlider.value}s`;
  286.         intervalValue.style.marginBottom = '15px';
  287.         intervalValue.style.fontSize = '14px';
  288.     
  289.         intervalSlider.addEventListener('input', (e) => {
  290.             const newInterval = parseInt(e.target.value) * 1000;
  291.             intervalValue.textContent = `${e.target.value}s`;
  292.             updateInterval = newInterval;
  293.             localStorage.setItem('youtubeEnhancerInterval', newInterval);
  294.     
  295.             if (intervalId) {
  296.                 clearInterval(intervalId);
  297.                 intervalId = setInterval(() => {
  298.                     updateOverlayContent(overlay, currentChannelName);
  299.                 }, newInterval);
  300.             }
  301.         });
  302.     
  303.         const opacityLabel = document.createElement('label');
  304.         opacityLabel.textContent = 'Background Opacity';
  305.         opacityLabel.style.display = 'block';
  306.         opacityLabel.style.marginBottom = '5px';
  307.         opacityLabel.style.fontSize = '16px';
  308.         opacityLabel.style.fontWeight = 'bold';
  309.     
  310.         const opacitySlider = document.createElement('input');
  311.         opacitySlider.type = 'range';
  312.         opacitySlider.min = '50';
  313.         opacitySlider.max = '90';
  314.         opacitySlider.value = overlayOpacity * 100;
  315.         opacitySlider.step = '5';
  316.         opacitySlider.className = 'opacity-slider';
  317.     
  318.         const opacityValue = document.createElement('div');
  319.         opacityValue.className = 'opacity-value';
  320.         opacityValue.textContent = `${opacitySlider.value}%`;
  321.         opacityValue.style.fontSize = '14px';
  322.     
  323.         opacitySlider.addEventListener('input', (e) => {
  324.             const newOpacity = parseInt(e.target.value) / 100;
  325.             opacityValue.textContent = `${e.target.value}%`;
  326.             overlayOpacity = newOpacity;
  327.             localStorage.setItem('youtubeEnhancerOpacity', newOpacity);
  328.     
  329.             if (overlay) {
  330.                 overlay.style.backgroundColor = `rgba(0, 0, 0, ${newOpacity})`;
  331.             }
  332.         });
  333.     
  334.         controlsSection.appendChild(intervalLabel);
  335.         controlsSection.appendChild(intervalSlider);
  336.         controlsSection.appendChild(intervalValue);
  337.         controlsSection.appendChild(opacityLabel);
  338.         controlsSection.appendChild(opacitySlider);
  339.         controlsSection.appendChild(opacityValue);
  340.  
  341.         return controlsSection;
  342.     }
  343.  
  344.     function createSpinner() {
  345.         const spinnerContainer = document.createElement('div');
  346.         spinnerContainer.style.position = 'absolute';
  347.         spinnerContainer.style.top = '0';
  348.         spinnerContainer.style.left = '0';
  349.         spinnerContainer.style.width = '100%';
  350.         spinnerContainer.style.height = '100%';
  351.         spinnerContainer.style.display = 'flex';
  352.         spinnerContainer.style.justifyContent = 'center';
  353.         spinnerContainer.style.alignItems = 'center';
  354.         spinnerContainer.classList.add('spinner-container');
  355.  
  356.         const spinner = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  357.         spinner.setAttribute("viewBox", "0 0 512 512");
  358.         spinner.setAttribute("width", "64");
  359.         spinner.setAttribute("height", "64");
  360.         spinner.classList.add('loading-spinner');
  361.         spinner.style.animation = "spin 1s linear infinite";
  362.  
  363.         const secondaryPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
  364.         secondaryPath.setAttribute("d", "M0 256C0 114.9 114.1 .5 255.1 0C237.9 .5 224 14.6 224 32c0 17.7 14.3 32 32 32C150 64 64 150 64 256s86 192 192 192c69.7 0 130.7-37.1 164.5-92.6c-3 6.6-3.3 14.8-1 22.2c1.2 3.7 3 7.2 5.4 10.3c1.2 1.5 2.6 3 4.1 4.3c.8 .7 1.6 1.3 2.4 1.9c.4 .3 .8 .6 1.3 .9s.9 .6 1.3 .8c5 2.9 10.6 4.3 16 4.3c11 0 21.8-5.7 27.7-16c-44.3 76.5-127 128-221.7 128C114.6 512 0 397.4 0 256z");
  365.         secondaryPath.style.opacity = "0.4";
  366.         secondaryPath.style.fill = "white";
  367.  
  368.         const primaryPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
  369.         primaryPath.setAttribute("d",
  370.             "M224 32c0-17.7 14.3-32 32-32C397.4 0 512 114.6 512 256c0 46.6-12.5 90.4-34.3 128c-8.8 15.3-28.4 20.5-43.7 11.7s-20.5-28.4-11.7-43.7c16.3-28.2 25.7-61 25.7-96c0-106-86-192-192-192c-17.7 0-32-14.3-32-32z");
  371.         primaryPath.style.fill = "white";
  372.  
  373.         spinner.appendChild(secondaryPath);
  374.         spinner.appendChild(primaryPath);
  375.         spinnerContainer.appendChild(spinner);
  376.         return spinnerContainer;
  377.     }
  378.  
  379.     function createSVGIcon(path) {
  380.         const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  381.         svg.setAttribute("viewBox", "0 0 640 512");
  382.         svg.setAttribute("width", "2rem");
  383.         svg.setAttribute("height", "2rem");
  384.         svg.style.marginRight = "0.5rem";
  385.         svg.style.display = "none";
  386.  
  387.         const svgPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
  388.         svgPath.setAttribute("d", path);
  389.         svgPath.setAttribute("fill", "white");
  390.  
  391.         svg.appendChild(svgPath);
  392.         return svg;
  393.     }
  394.  
  395.     function createStatContainer(className, iconPath) {
  396.         const container = document.createElement('div');
  397.         Object.assign(container.style, {
  398.             display: 'flex',
  399.             flexDirection: 'column',
  400.             alignItems: 'center',
  401.             justifyContent: 'center',
  402.             visibility: 'hidden',
  403.             width: '33%',
  404.             height: '100%',
  405.             padding: '0 1rem'
  406.         });
  407.  
  408.         const numberContainer = document.createElement('div');
  409.         Object.assign(numberContainer.style, {
  410.             display: 'flex',
  411.             flexDirection: 'column',
  412.             alignItems: 'center',
  413.             justifyContent: 'center'
  414.         });
  415.  
  416.         const differenceElement = document.createElement('div');
  417.         differenceElement.classList.add(`${className}-difference`);
  418.         Object.assign(differenceElement.style, {
  419.             fontSize: '2.5rem',
  420.             height: '2.5rem',
  421.             marginBottom: '1rem'
  422.         });
  423.  
  424.         const digitContainer = createNumberContainer();
  425.         digitContainer.classList.add(`${className}-number`);
  426.         Object.assign(digitContainer.style, {
  427.             fontSize: '4rem',
  428.             fontWeight: 'bold',
  429.             lineHeight: '1',
  430.             height: '4rem',
  431.             fontFamily: 'inherit',
  432.             letterSpacing: '0.025em'
  433.         });
  434.  
  435.         numberContainer.appendChild(differenceElement);
  436.         numberContainer.appendChild(digitContainer);
  437.  
  438.         const labelContainer = document.createElement('div');
  439.         Object.assign(labelContainer.style, {
  440.             display: 'flex',
  441.             alignItems: 'center',
  442.             marginTop: '0.5rem'
  443.         });
  444.  
  445.         const icon = createSVGIcon(iconPath);
  446.         Object.assign(icon.style, {
  447.             width: '2rem',
  448.             height: '2rem',
  449.             marginRight: '0.75rem'
  450.         });
  451.  
  452.         const labelElement = document.createElement('div');
  453.         labelElement.classList.add(`${className}-label`);
  454.         labelElement.style.fontSize = '2rem';
  455.  
  456.         labelContainer.appendChild(icon);
  457.         labelContainer.appendChild(labelElement);
  458.  
  459.         container.appendChild(numberContainer);
  460.         container.appendChild(labelContainer);
  461.  
  462.         return container;
  463.     }
  464.  
  465.     function createOverlay(bannerElement) {
  466.         clearExistingOverlay();
  467.  
  468.         if (!bannerElement) return null;
  469.  
  470.         const overlay = document.createElement('div');
  471.         overlay.classList.add('channel-banner-overlay');
  472.         Object.assign(overlay.style, {
  473.             position: 'absolute',
  474.             top: '0',
  475.             left: '0',
  476.             width: '100%',
  477.             height: '100%',
  478.             backgroundColor: `rgba(0, 0, 0, ${overlayOpacity})`,
  479.             borderRadius: '15px',
  480.             zIndex: '1',
  481.             display: 'flex',
  482.             justifyContent: 'space-around',
  483.             alignItems: 'center',
  484.             color: 'white',
  485.             fontFamily: 'Rubik, sans-serif'
  486.         });
  487.  
  488.         const settingsButton = createSettingsButton();
  489.         const settingsMenu = createSettingsMenu();
  490.         overlay.appendChild(settingsButton);
  491.         overlay.appendChild(settingsMenu);
  492.  
  493.         settingsButton.addEventListener('click', (e) => {
  494.             e.stopPropagation();
  495.             settingsMenu.classList.toggle('show');
  496.         });
  497.  
  498.         document.addEventListener('click', (e) => {
  499.             if (!settingsMenu.contains(e.target) && !settingsButton.contains(e.target)) {
  500.                 settingsMenu.classList.remove('show');
  501.             }
  502.         });
  503.  
  504.         const spinner = createSpinner();
  505.         overlay.appendChild(spinner);
  506.  
  507.         const subscribersElement = createStatContainer('subscribers', "M144 160c-44.2 0-80-35.8-80-80S99.8 0 144 0s80 35.8 80 80s-35.8 80-80 80zm368 0c-44.2 0-80-35.8-80-80s35.8-80 80-80s80 35.8 80 80s-35.8 80-80 80zM0 298.7C0 239.8 47.8 192 106.7 192h42.7c15.9 0 31 3.5 44.6 9.7c-1.3 7.2-1.9 14.7-1.9 22.3c0 38.2 16.8 72.5 43.3 96c-.2 0-.4 0-.7 0H21.3C9.6 320 0 310.4 0 298.7zM405.3 320c-.2 0-.4 0-.7 0c26.6-23.5 43.3-57.8 43.3-96c0-7.6-.7-15-1.9-22.3c13.6-6.3 28.7-9.7 44.6-9.7h42.7C592.2 192 640 239.8 640 298.7c0 11.8-9.6 21.3-21.3 21.3H405.3zM416 224c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zM128 485.3C128 411.7 187.7 352 261.3 352H378.7C452.3 352 512 411.7 512 485.3c0 14.7-11.9 26.7-26.7 26.7H154.7c-14.7 0-26.7-11.9-26.7-26.7z");
  508.         const viewsElement = createStatContainer('views', "M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z");
  509.         const videosElement = createStatContainer('videos', "M0 128C0 92.7 28.7 64 64 64H320c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128zM559.1 99.8c10.4 5.6 16.9 16.4 16.9 28.2V384c0 11.8-6.5 22.6-16.9 28.2s-23 5-32.9-1.6l-96-64L416 337.1V320 192 174.9l14.2-9.5 96-64c9.8-6.5 22.4-7.2 32.9-1.6z");
  510.  
  511.         overlay.appendChild(subscribersElement);
  512.         overlay.appendChild(viewsElement);
  513.         overlay.appendChild(videosElement);
  514.         
  515.         bannerElement.appendChild(overlay);
  516.         updateDisplayState();
  517.         return overlay;
  518.     }
  519.  
  520.     function fetchWithGM(url, headers = {}) {
  521.         return new Promise((resolve, reject) => {
  522.             GM_xmlhttpRequest({
  523.                 method: "GET",
  524.                 url: url,
  525.                 headers: headers,
  526.                 onload: function(response) {
  527.                     if (response.status === 200) {
  528.                         resolve(JSON.parse(response.responseText));
  529.                     } else {
  530.                         reject(new Error(`Failed to fetch: ${response.status}`));
  531.                     }
  532.                 },
  533.                 onerror: function(error) {
  534.                     reject(error);
  535.                 },
  536.             });
  537.         });
  538.     }
  539.  
  540.     async function fetchChannelId(channelName) {
  541.         try {
  542.             const channelInfo = await getChannelInfo(window.location.href);
  543.             if (channelInfo && channelInfo.channelId) {
  544.                 return channelInfo.channelId;
  545.             }
  546.             
  547.             const metaTag = document.querySelector('meta[itemprop="channelId"]');
  548.             if (metaTag && metaTag.content) {
  549.                 return metaTag.content;
  550.             }
  551.             
  552.             const urlMatch = window.location.href.match(/channel\/(UC[\w-]+)/);
  553.             if (urlMatch && urlMatch[1]) {
  554.                 return urlMatch[1];
  555.             }
  556.             
  557.             throw new Error('Could not determine channel ID');
  558.         } catch (error) {
  559.             const metaTag = document.querySelector('meta[itemprop="channelId"]');
  560.             if (metaTag && metaTag.content) {
  561.                 return metaTag.content;
  562.             }
  563.             
  564.             const urlMatch = window.location.href.match(/channel\/(UC[\w-]+)/);
  565.             if (urlMatch && urlMatch[1]) {
  566.                 return urlMatch[1];
  567.             }
  568.             
  569.             throw new Error('Could not determine channel ID');
  570.         }
  571.     }
  572.     
  573.     async function fetchChannelStats(channelId) {
  574.         try {
  575.             let retries = 3;
  576.             let lastError;
  577.             
  578.             while (retries > 0) {
  579.                 try {
  580.                     const stats = await fetchWithGM(
  581.                         `${STATS_API_URL}${channelId}`,
  582.                         {
  583.                             origin: "https://livecounts.io",
  584.                             referer: "https://livecounts.io/",
  585.                         }
  586.                     );
  587.                     
  588.                     if (!stats || typeof stats.followerCount === 'undefined') {
  589.                         throw new Error('Invalid stats response');
  590.                     }
  591.                     
  592.                     lastSuccessfulStats.set(channelId, stats);
  593.                     return stats;
  594.                 } catch (e) {
  595.                     lastError = e;
  596.                     retries--;
  597.                     if (retries > 0) {
  598.                         await new Promise(resolve => setTimeout(resolve, 1000));
  599.                     }
  600.                 }
  601.             }
  602.             
  603.             if (lastSuccessfulStats.has(channelId)) {
  604.                 return lastSuccessfulStats.get(channelId);
  605.             }
  606.             
  607.             const fallbackStats = {
  608.                 followerCount: 0,
  609.                 bottomOdos: [0, 0],
  610.                 error: true
  611.             };
  612.             
  613.             const subCountElem = document.querySelector('#subscriber-count');
  614.             if (subCountElem) {
  615.                 const subText = subCountElem.textContent;
  616.                 const subMatch = subText.match(/[\d,]+/);
  617.                 if (subMatch) {
  618.                     fallbackStats.followerCount = parseInt(subMatch[0].replace(/,/g, ''));
  619.                 }
  620.             }
  621.             
  622.             return fallbackStats;
  623.             
  624.         } catch (error) {
  625.             throw error;
  626.         }
  627.     }
  628.  
  629.     function clearExistingOverlay() {
  630.         const existingOverlay = document.querySelector('.channel-banner-overlay');
  631.         if (existingOverlay) {
  632.             existingOverlay.remove();
  633.         }
  634.         if (intervalId) {
  635.             clearInterval(intervalId);
  636.             intervalId = null;
  637.         }
  638.         lastSuccessfulStats.clear();
  639.         previousStats.clear();
  640.         isUpdating = false;
  641.         overlay = null;
  642.     }
  643.  
  644.     function createDigitElement() {
  645.         const digit = document.createElement('span');
  646.         Object.assign(digit.style, {
  647.             display: 'inline-block',
  648.             width: '0.6em',
  649.             textAlign: 'center',
  650.             marginRight: '0.025em',
  651.             marginLeft: '0.025em'
  652.         });
  653.         return digit;
  654.     }
  655.  
  656.     function createCommaElement() {
  657.         const comma = document.createElement('span');
  658.         comma.textContent = ',';
  659.         Object.assign(comma.style, {
  660.             display: 'inline-block',
  661.             width: '0.3em',
  662.             textAlign: 'center'
  663.         });
  664.         return comma;
  665.     }
  666.  
  667.     function createNumberContainer() {
  668.         const container = document.createElement('div');
  669.         Object.assign(container.style, {
  670.             display: 'flex',
  671.             justifyContent: 'center',
  672.             alignItems: 'center',
  673.             letterSpacing: '0.025em'
  674.         });
  675.         return container;
  676.     }
  677.  
  678.     function updateDigits(container, newValue) {
  679.         const newValueStr = newValue.toString();
  680.         const digits = [];
  681.     
  682.         for (let i = newValueStr.length - 1; i >= 0; i -= 3) {
  683.             const start = Math.max(0, i - 2);
  684.             digits.unshift(newValueStr.slice(start, i + 1));
  685.         }
  686.     
  687.         while (container.firstChild) {
  688.             container.removeChild(container.firstChild);
  689.         }
  690.         
  691.         let digitIndex = 0;
  692.     
  693.         for (let i = 0; i < digits.length; i++) {
  694.             const group = digits[i];
  695.             for (let j = 0; j < group.length; j++) {
  696.                 const digitElement = createDigitElement();
  697.                 digitElement.textContent = group[j];
  698.                 container.appendChild(digitElement);
  699.                 digitIndex++;
  700.             }
  701.             if (i < digits.length - 1) {
  702.                 container.appendChild(createCommaElement());
  703.             }
  704.         }
  705.     
  706.         let elementIndex = 0;
  707.         for (let i = 0; i < digits.length; i++) {
  708.             const group = digits[i];
  709.             for (let j = 0; j < group.length; j++) {
  710.                 const digitElement = container.children[elementIndex];
  711.                 const newDigit = parseInt(group[j]);
  712.                 const currentDigit = parseInt(digitElement.textContent || '0');
  713.     
  714.                 if (currentDigit !== newDigit) {
  715.                     animateDigit(digitElement, currentDigit, newDigit);
  716.                 }
  717.                 elementIndex++;
  718.             }
  719.             if (i < digits.length - 1) {
  720.                 elementIndex++;
  721.             }
  722.         }
  723.     }
  724.  
  725.     function animateDigit(element, start, end) {
  726.         const duration = 1000;
  727.         const startTime = performance.now();
  728.  
  729.         function update(currentTime) {
  730.             const elapsed = currentTime - startTime;
  731.             const progress = Math.min(elapsed / duration, 1);
  732.             const easeOutQuart = 1 - Math.pow(1 - progress, 4);
  733.             const current = Math.round(start + (end - start) * easeOutQuart);
  734.             element.textContent = current;
  735.  
  736.             if (progress < 1) {
  737.                 requestAnimationFrame(update);
  738.             }
  739.         }
  740.  
  741.         requestAnimationFrame(update);
  742.     }
  743.  
  744.     function showContent(overlay) {
  745.         const spinnerContainer = overlay.querySelector('.spinner-container');
  746.         if (spinnerContainer) {
  747.             spinnerContainer.remove();
  748.         }
  749.  
  750.         const containers = overlay.querySelectorAll('div[style*="visibility: hidden"]');
  751.         containers.forEach(container => {
  752.             container.style.visibility = 'visible';
  753.         });
  754.  
  755.         const icons = overlay.querySelectorAll('svg[style*="display: none"]');
  756.         icons.forEach(icon => {
  757.             icon.style.display = 'block';
  758.         });
  759.     }
  760.  
  761.     function updateDifferenceElement(element, currentValue, previousValue) {
  762.         if (!previousValue) return;
  763.     
  764.         const difference = currentValue - previousValue;
  765.         if (difference === 0) {
  766.             element.textContent = '';
  767.             return;
  768.         }
  769.     
  770.         const sign = difference > 0 ? '+' : '';
  771.         element.textContent = `${sign}${difference.toLocaleString()}`;
  772.         element.style.color = difference > 0 ? '#1ed760' : '#f3727f';
  773.     
  774.         setTimeout(() => {
  775.             element.textContent = '';
  776.         }, 1000);
  777.     }
  778.  
  779.     function updateDisplayState() {
  780.         const overlay = document.querySelector('.channel-banner-overlay');
  781.         if (!overlay) return;
  782.     
  783.         const statContainers = overlay.querySelectorAll('div[style*="width"]');
  784.         if (!statContainers.length) return;
  785.     
  786.         let visibleCount = 0;
  787.         const visibleContainers = [];
  788.     
  789.         statContainers.forEach(container => {
  790.             const numberContainer = container.querySelector('[class$="-number"]');
  791.             if (!numberContainer) return;
  792.             
  793.             const type = numberContainer.className.replace('-number', '');
  794.             
  795.             const isVisible = localStorage.getItem(`show-${type}`) !== 'false';
  796.             
  797.             if (isVisible) {
  798.                 container.style.display = 'flex';
  799.                 visibleCount++;
  800.                 visibleContainers.push(container);
  801.             } else {
  802.                 container.style.display = 'none';
  803.             }
  804.         });
  805.     
  806.         visibleContainers.forEach(container => {
  807.             container.style.width = '';
  808.             container.style.margin = '';
  809.             
  810.             switch (visibleCount) {
  811.                 case 1:
  812.                     container.style.width = '100%';
  813.                     break;
  814.                 case 2:
  815.                     container.style.width = '50%';
  816.                     break;
  817.                 case 3:
  818.                     container.style.width = '33.33%';
  819.                     break;
  820.                 default:
  821.                     container.style.display = 'none';
  822.             }
  823.         });
  824.     
  825.         overlay.style.display = 'flex';
  826.     }
  827.  
  828.     async function updateOverlayContent(overlay, channelName) {
  829.         if (isUpdating || channelName !== currentChannelName) return;
  830.         isUpdating = true;
  831.         
  832.         try {
  833.             const channelId = await fetchChannelId(channelName);
  834.             const stats = await fetchChannelStats(channelId);
  835.             
  836.             if (channelName !== currentChannelName) {
  837.                 isUpdating = false;
  838.                 return;
  839.             }
  840.             
  841.             if (stats.error) {
  842.                 const containers = overlay.querySelectorAll('[class$="-number"]');
  843.                 containers.forEach(container => {
  844.                     if (container.classList.contains('subscribers-number') && stats.followerCount > 0) {
  845.                         updateDigits(container, stats.followerCount);
  846.                     } else {
  847.                         container.textContent = '---';
  848.                     }
  849.                 });
  850.                 return;
  851.             }
  852.  
  853.             const updateElement = (className, value, label) => {
  854.                 const numberContainer = overlay.querySelector(`.${className}-number`);
  855.                 const differenceElement = overlay.querySelector(`.${className}-difference`);
  856.                 const labelElement = overlay.querySelector(`.${className}-label`);
  857.                 
  858.                 if (numberContainer) {
  859.                     updateDigits(numberContainer, value);
  860.                 }
  861.                 
  862.                 if (differenceElement && previousStats.has(channelId)) {
  863.                     const previousValue = className === 'subscribers' ?
  864.                         previousStats.get(channelId).followerCount :
  865.                         previousStats.get(channelId).bottomOdos[className === 'views' ? 0 : 1];
  866.                     updateDifferenceElement(differenceElement, value, previousValue);
  867.                 }
  868.                 
  869.                 if (labelElement) {
  870.                     labelElement.textContent = label;
  871.                 }
  872.             };
  873.             
  874.             updateElement('subscribers', stats.followerCount, 'Subscribers');
  875.             updateElement('views', stats.bottomOdos[0], 'Views');
  876.             updateElement('videos', stats.bottomOdos[1], 'Videos');
  877.             
  878.             if (!previousStats.has(channelId)) {
  879.                 showContent(overlay);
  880.             }
  881.             
  882.             previousStats.set(channelId, stats);
  883.             
  884.         } catch (error) {
  885.             const containers = overlay.querySelectorAll('[class$="-number"]');
  886.             containers.forEach(container => {
  887.                 container.textContent = '---';
  888.             });
  889.         } finally {
  890.             isUpdating = false;
  891.         }
  892.     }
  893.  
  894.     function addOverlay(bannerElement) {
  895.         const channelName = window.location.pathname.split("/")[1].replace("@", "");
  896.  
  897.         if (channelName === currentChannelName && overlay) {
  898.             return;
  899.         }
  900.  
  901.         currentChannelName = channelName;
  902.         overlay = createOverlay(bannerElement);
  903.  
  904.         if (overlay) {
  905.             if (intervalId) {
  906.                 clearInterval(intervalId);
  907.             }
  908.  
  909.             intervalId = setInterval(() => {
  910.                 updateOverlayContent(overlay, channelName);
  911.             }, updateInterval);
  912.  
  913.             updateOverlayContent(overlay, channelName);
  914.         }
  915.     }
  916.  
  917.     function isChannelPage() {
  918.         return window.location.pathname.startsWith("/@") ||
  919.                window.location.pathname.startsWith("/channel/") ||
  920.                window.location.pathname.startsWith("/c/");
  921.     }
  922.  
  923.     function observePageChanges() {
  924.         const observer = new MutationObserver((mutations) => {
  925.             for (const mutation of mutations) {
  926.                 if (mutation.type === 'childList') {
  927.                     const bannerElement = document.getElementById('page-header-banner-sizer');
  928.                     if (bannerElement && isChannelPage()) {
  929.                         addOverlay(bannerElement);
  930.                         break;
  931.                     }
  932.                 }
  933.             }
  934.         });
  935.  
  936.         observer.observe(document.body, {
  937.             childList: true,
  938.             subtree: true
  939.         });
  940.     }
  941.  
  942.     function addNavigationListener() {
  943.         window.addEventListener("yt-navigate-finish", () => {
  944.             if (!isChannelPage()) {
  945.                 clearExistingOverlay();
  946.                 currentChannelName = null;
  947.             } else {
  948.                 const bannerElement = document.getElementById('page-header-banner-sizer');
  949.                 if (bannerElement) {
  950.                     addOverlay(bannerElement);
  951.                 }
  952.             }
  953.         });
  954.     }
  955.  
  956.     init();
  957. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址