☰

YouTube Enhancer (Reveal Views & Upload Time)

Reveal Views & Upload Time.

当前为 2025-03-11 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         YouTube Enhancer (Reveal Views & Upload Time)
  3. // @description  Reveal Views & Upload Time.
  4. // @icon         https://raw.githubusercontent.com/exyezed/youtube-enhancer/refs/heads/main/extras/youtube-enhancer.png
  5. // @version      1.2
  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. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     const badgeStyles = `
  17.         @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
  18.         
  19.         #secondary-inner .revealViewsAndUploadTime {
  20.             height: 36px;
  21.             font-size: 14px;
  22.             font-weight: 500;
  23.             border-radius: 8px;
  24.             padding: 0 16px;
  25.             font-family: inherit;
  26.             border: 1px solid transparent;
  27.             margin-bottom: 10px;
  28.             width: 100%;
  29.             box-sizing: border-box;
  30.             display: flex;
  31.             align-items: center;
  32.             justify-content: center;
  33.             gap: 8px;
  34.             cursor: pointer;
  35.         }
  36.         html[dark] #secondary-inner .revealViewsAndUploadTime {
  37.             background-color: #ffffff1a;
  38.             color: var(--yt-spec-text-primary, #fff);
  39.         }
  40.         html:not([dark]) #secondary-inner .revealViewsAndUploadTime {
  41.             background-color: #0000000d;
  42.             color: var(--yt-spec-text-primary, #030303);
  43.         }
  44.         html[dark] #secondary-inner .revealViewsAndUploadTime:hover {
  45.             background-color: #ffffff33;
  46.         }
  47.         html:not([dark]) #secondary-inner .revealViewsAndUploadTime:hover {
  48.             background-color: #00000014;
  49.         }
  50.         #secondary-inner .revealViewsAndUploadTime .separator {
  51.             margin: 0 2px;
  52.             width: 1px;
  53.             height: 24px;
  54.             opacity: 0.3;
  55.         }
  56.         html[dark] #secondary-inner .revealViewsAndUploadTime .separator {
  57.             background-color: var(--yt-spec-text-secondary, #aaa);
  58.         }
  59.         html:not([dark]) #secondary-inner .revealViewsAndUploadTime .separator {
  60.             background-color: var(--yt-spec-text-secondary, #606060);
  61.         }
  62.  
  63.         .revealViewsAndUploadTime-shorts {
  64.             height: 48px;
  65.             font-size: 14px;
  66.             font-weight: 500;
  67.             border-radius: 36px;
  68.             padding: 0 16px;
  69.             font-family: inherit;
  70.             position: absolute;
  71.             top: 16px;
  72.             right: 16px;
  73.             z-index: 1000;
  74.             background-color: rgba(0, 0, 0, 0.3);
  75.             color: #fff;
  76.             display: flex;
  77.             align-items: center;
  78.             gap: 8px;
  79.         }
  80.         .revealViewsAndUploadTime-shorts .separator {
  81.             margin: 0 2px;
  82.             width: 1px;
  83.             height: 36px;
  84.             opacity: 0.3;
  85.             background-color: #fff;
  86.         }
  87.  
  88.         .material-symbols-outlined {
  89.             font-size: 24px;
  90.             line-height: 1;
  91.             font-variation-settings:
  92.                 'FILL' 0,
  93.                 'wght' 150,
  94.                 'GRAD' 0,
  95.                 'opsz' 24;
  96.         }
  97.     `;
  98.  
  99.     function createBadge(viewCount, uploadTime, uploadDate, isShorts = false) {
  100.         if (isShorts) {
  101.             const badge = document.createElement('div');
  102.             badge.className = 'revealViewsAndUploadTime-shorts';
  103.     
  104.             const viewIcon = document.createElement('span');
  105.             viewIcon.className = 'material-symbols-outlined';
  106.             viewIcon.textContent = 'visibility';
  107.     
  108.             const viewSpan = document.createElement('span');
  109.             viewSpan.textContent = viewCount;
  110.     
  111.             const separator1 = document.createElement('div');
  112.             separator1.className = 'separator';
  113.     
  114.             const dateIcon = document.createElement('span');
  115.             dateIcon.className = 'material-symbols-outlined';
  116.             dateIcon.textContent = 'calendar_month';
  117.     
  118.             const dateSpan = document.createElement('span');
  119.             dateSpan.textContent = uploadDate;
  120.     
  121.             const separator2 = document.createElement('div');
  122.             separator2.className = 'separator';
  123.     
  124.             const timeIcon = document.createElement('span');
  125.             timeIcon.className = 'material-symbols-outlined';
  126.             timeIcon.textContent = 'schedule';
  127.     
  128.             const timeSpan = document.createElement('span');
  129.             timeSpan.textContent = uploadTime;
  130.     
  131.             badge.appendChild(viewIcon);
  132.             badge.appendChild(viewSpan);
  133.             badge.appendChild(separator1);
  134.             badge.appendChild(dateIcon);
  135.             badge.appendChild(dateSpan);
  136.             badge.appendChild(separator2);
  137.             badge.appendChild(timeIcon);
  138.             badge.appendChild(timeSpan);
  139.     
  140.             return badge;
  141.         } else {
  142.             const badge = document.createElement('div');
  143.             badge.className = 'revealViewsAndUploadTime';
  144.     
  145.             const mainIcon = document.createElement('span');
  146.             mainIcon.className = 'material-symbols-outlined';
  147.             mainIcon.textContent = 'visibility';
  148.     
  149.             const dataSpan = document.createElement('span');
  150.             dataSpan.textContent = viewCount;
  151.     
  152.             const separator = document.createElement('div');
  153.             separator.className = 'separator';
  154.     
  155.             const timeIcon = document.createElement('span');
  156.             timeIcon.className = 'material-symbols-outlined';
  157.             timeIcon.textContent = 'schedule';
  158.     
  159.             const timeSpan = document.createElement('span');
  160.             timeSpan.textContent = uploadTime;
  161.     
  162.             badge.appendChild(mainIcon);
  163.             badge.appendChild(dataSpan);
  164.             badge.appendChild(separator);
  165.             badge.appendChild(timeIcon);
  166.             badge.appendChild(timeSpan);
  167.     
  168.             let isShowingViews = true;
  169.             badge.addEventListener('click', () => {
  170.                 if (isShowingViews) {
  171.                     mainIcon.textContent = 'calendar_month';
  172.                     dataSpan.textContent = uploadDate;
  173.                     timeIcon.textContent = 'schedule';
  174.                     timeIcon.style.display = '';
  175.                 } else {
  176.                     mainIcon.textContent = 'visibility';
  177.                     dataSpan.textContent = viewCount;
  178.                     timeIcon.textContent = 'schedule';
  179.                     timeIcon.style.display = '';
  180.                 }
  181.                 isShowingViews = !isShowingViews;
  182.             });
  183.     
  184.             return badge;
  185.         }
  186.     }
  187.  
  188.     function getVideoId() {
  189.         const urlObj = new URL(window.location.href);
  190.         if (urlObj.pathname.includes('/watch')) {
  191.             return urlObj.searchParams.get('v');
  192.         } else if (urlObj.pathname.includes('/video/')) {
  193.             return urlObj.pathname.split('/video/')[1];
  194.         } else if (urlObj.pathname.includes('/shorts/')) {
  195.             return urlObj.pathname.split('/shorts/')[1];
  196.         }
  197.         return null;
  198.     }
  199.  
  200.     function formatNumber(number) {
  201.         return new Intl.NumberFormat('en-US').format(number);
  202.     }
  203.  
  204.     function formatDate(dateString) {
  205.         const date = new Date(dateString);
  206.         const today = new Date();
  207.         const yesterday = new Date(today);
  208.         yesterday.setDate(yesterday.getDate() - 1);
  209.  
  210.         if (date.toDateString() === today.toDateString()) {
  211.             return 'Today';
  212.         } else if (date.toDateString() === yesterday.toDateString()) {
  213.             return 'Yesterday';
  214.         } else {
  215.             const options = {
  216.                 weekday: 'long',
  217.                 day: '2-digit',
  218.                 month: '2-digit',
  219.                 year: 'numeric',
  220.             };
  221.             const formattedDate = new Intl.DateTimeFormat('en-GB', options).format(date);
  222.             const [dayName, datePart] = formattedDate.split(', ');
  223.             return `${dayName}, ${datePart.replace(/\//g, '/')}`;
  224.         }
  225.     }
  226.  
  227.     function formatTime(dateString) {
  228.         const date = new Date(dateString);
  229.         const options = {
  230.             hour: '2-digit',
  231.             minute: '2-digit',
  232.             second: '2-digit',
  233.             hour12: false
  234.         };
  235.         return new Intl.DateTimeFormat('en-GB', options).format(date);
  236.     }
  237.  
  238.     function getApiKey() {
  239.         const scripts = document.getElementsByTagName('script');
  240.         for (const script of scripts) {
  241.             const match = script.textContent.match(/"INNERTUBE_API_KEY":\s*"([^"]+)"/);
  242.             if (match && match[1]) return match[1];
  243.         }
  244.         return null;
  245.     }
  246.  
  247.     function getClientInfo() {
  248.         const scripts = document.getElementsByTagName('script');
  249.         let clientName = null;
  250.         let clientVersion = null;
  251.         
  252.         for (const script of scripts) {
  253.             const nameMatch = script.textContent.match(/"INNERTUBE_CLIENT_NAME":\s*"([^"]+)"/);
  254.             const versionMatch = script.textContent.match(/"INNERTUBE_CLIENT_VERSION":\s*"([^"]+)"/);
  255.             
  256.             if (nameMatch && nameMatch[1]) clientName = nameMatch[1];
  257.             if (versionMatch && versionMatch[1]) clientVersion = versionMatch[1];
  258.         }
  259.         
  260.         return { clientName, clientVersion };
  261.     }
  262.  
  263.     async function fetchVideoInfo(videoId) {
  264.         try {
  265.             const apiKey = getApiKey();
  266.             if (!apiKey) return null;
  267.             
  268.             const { clientName, clientVersion } = getClientInfo();
  269.             if (!clientName || !clientVersion) return null;
  270.             
  271.             const response = await fetch(`https://www.youtube.com/youtubei/v1/player?key=${apiKey}`, {
  272.                 method: 'POST',
  273.                 headers: {
  274.                     'Content-Type': 'application/json',
  275.                 },
  276.                 body: JSON.stringify({
  277.                     videoId: videoId,
  278.                     context: {
  279.                         client: {
  280.                             clientName: clientName,
  281.                             clientVersion: clientVersion,
  282.                         }
  283.                     }
  284.                 })
  285.             });
  286.             
  287.             if (!response.ok) return null;
  288.             const data = await response.json();
  289.             
  290.             let viewCount = "Unknown";
  291.             if (data.videoDetails?.viewCount) {
  292.                 viewCount = formatNumber(data.videoDetails.viewCount);
  293.             }
  294.             
  295.             let publishDate = "Unknown";
  296.             if (data.microformat?.playerMicroformatRenderer?.publishDate) {
  297.                 publishDate = data.microformat.playerMicroformatRenderer.publishDate;
  298.             }
  299.             
  300.             return {
  301.                 viewCount,
  302.                 uploadDate: publishDate
  303.             };
  304.         } catch (error) {
  305.             return null;
  306.         }
  307.     }
  308.  
  309.     function updateBadge(viewCount, uploadTime, uploadDate, isShorts = false) {
  310.         let badge = document.querySelector(isShorts ? '.revealViewsAndUploadTime-shorts' : '.revealViewsAndUploadTime');
  311.         if (badge) {
  312.             badge.remove();
  313.         }
  314.         insertBadge(viewCount, uploadTime, uploadDate, isShorts);
  315.     }
  316.  
  317.     function insertBadge(viewCount, uploadTime, uploadDate, isShorts = false) {
  318.         if (isShorts) {
  319.             const target = document.querySelector('ytd-reel-video-renderer[is-active]');
  320.             if (target && !document.querySelector('.revealViewsAndUploadTime-shorts')) {
  321.                 const badge = createBadge(viewCount, uploadTime, uploadDate, isShorts);
  322.                 target.appendChild(badge);
  323.             }
  324.         } else {
  325.             const targetElement = document.querySelector('#secondary-inner #panels');
  326.             if (targetElement && !document.querySelector('.revealViewsAndUploadTime')) {
  327.                 const badge = createBadge(viewCount, uploadTime, uploadDate, isShorts);
  328.                 targetElement.parentNode.insertBefore(badge, targetElement);
  329.             }
  330.         }
  331.     }
  332.  
  333.     function addStyles() {
  334.         if (!document.querySelector('#revealViewsAndUploadTime-styles')) {
  335.             const styleElement = document.createElement('style');
  336.             styleElement.id = 'revealViewsAndUploadTime-styles';
  337.             styleElement.textContent = badgeStyles;
  338.             document.head.appendChild(styleElement);
  339.         }
  340.     }
  341.  
  342.     async function updateBadgeWithInfo(videoId, isShorts = false) {
  343.         updateBadge('Loading...', 'Loading...', 'Loading...', isShorts);
  344.         try {
  345.             const videoInfo = await fetchVideoInfo(videoId);
  346.             if (videoInfo) {
  347.                 const uploadTime = formatTime(videoInfo.uploadDate);
  348.                 const formattedUploadDate = formatDate(videoInfo.uploadDate);
  349.                 updateBadge(videoInfo.viewCount, uploadTime, formattedUploadDate, isShorts);
  350.             } else {
  351.                 updateBadge('Error', 'Error', 'Error', isShorts);
  352.             }
  353.         } catch (error) {
  354.             updateBadge('Error', 'Error', 'Error', isShorts);
  355.         }
  356.     }
  357.  
  358.     function init() {
  359.         addStyles();
  360.         const videoId = getVideoId();
  361.         const isShorts = window.location.pathname.startsWith('/shorts/');
  362.         if (videoId) {
  363.             updateBadgeWithInfo(videoId, isShorts);
  364.         } else {
  365.             updateBadge('N/A', 'N/A', 'N/A', isShorts);
  366.         }
  367.     }
  368.  
  369.     function observePageChanges() {
  370.         let lastVideoId = getVideoId();
  371.         let lastUrl = location.href;
  372.  
  373.         const observer = new MutationObserver(() => {
  374.             if (location.href !== lastUrl) {
  375.                 lastUrl = location.href;
  376.                 const isShorts = window.location.pathname.startsWith('/shorts/');
  377.                 const currentVideoId = getVideoId();
  378.                 if (currentVideoId && currentVideoId !== lastVideoId) {
  379.                     lastVideoId = currentVideoId;
  380.                     updateBadgeWithInfo(currentVideoId, isShorts);
  381.                 } else if (!currentVideoId) {
  382.                     updateBadge('Not a video', 'Not a video', 'Not a video', isShorts);
  383.                 }
  384.             }
  385.         });
  386.  
  387.         observer.observe(document.body, { childList: true, subtree: true });
  388.     }
  389.  
  390.     if (document.readyState === 'loading') {
  391.         document.addEventListener('DOMContentLoaded', () => {
  392.             init();
  393.             observePageChanges();
  394.         });
  395.     } else {
  396.         init();
  397.         observePageChanges();
  398.     }
  399.  
  400.     window.addEventListener('yt-navigate-start', function() {
  401.         const isShorts = window.location.pathname.startsWith('/shorts/');
  402.         updateBadge('Loading...', 'Loading...', 'Loading...', isShorts);
  403.     });
  404.  
  405.     window.addEventListener('yt-navigate-finish', function() {
  406.         const isShorts = window.location.pathname.startsWith('/shorts/');
  407.         const videoId = getVideoId();
  408.         if (videoId) {
  409.             updateBadgeWithInfo(videoId, isShorts);
  410.         } else {
  411.             updateBadge('Not a video', 'Not a video', 'Not a video', isShorts);
  412.         }
  413.     });
  414. })();