☰

Return YouTube Trending

Re-display the Explore/Trending Button in the Side Menu on YouTube

目前为 2022-10-21 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name            Return YouTube Trending
  3. // @name:de         YouTube Trends wieder anzeigen
  4. // @version         1.0.0
  5. // @description     Re-display the Explore/Trending Button in the Side Menu on YouTube
  6. // @description:de  Zeigt die Entdecken/Trends-Schaltfläche im Seitenmenü auf YouTube wieder an
  7. // @author          TalkLounge (https://github.com/TalkLounge)
  8. // @namespace       https://github.com/TalkLounge/return-youtube-trending
  9. // @license         MIT
  10. // @match           https://www.youtube.com/*
  11. // @require         https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js
  12. // @grant           none
  13. // ==/UserScript==
  14.  
  15. (function ($, undefined) { // Safe jQuery import, Thanks to https://stackoverflow.com/a/29363547
  16.     $(function () {
  17.         window.setInterval(() => {
  18.             if ($('a[title="Explore"]').length) { // Return when button exists
  19.                 return;
  20.             }
  21.  
  22.             const lang = navigator.language || navigator.userLanguage;
  23.             const translations = {
  24.                 "en": "Explore",
  25.                 "de": "Entdecken"
  26.             };
  27.             const translation = translations[lang] || translations["en"];
  28.             const html = `
  29.             <div class="style-scope ytd-guide-section-renderer" is-primary="" line-end-style="none">
  30.                 <a id="endpoint" class="yt-simple-endpoint style-scope ytd-guide-entry-renderer" tabindex="-1" role="tablist" title="Explore" href="/feed/explore">
  31.                     <tp-yt-paper-item class="style-scope ytd-guide-entry-renderer" role="tab" style-target="host" tabindex="0" aria-disabled="false" aria-selected="false">
  32.                         <div style="display: inline-flex; align-items: center; justify-content: center; position: relative; vertical-align: middle; fill: var(--iron-icon-fill-color, currentcolor); stroke: var(--iron-icon-stroke-color, none); margin-left: var(--iron-icon_-_margin-left); margin-bottom: var(--iron-icon_-_margin-bottom); width: var(--iron-icon_-_width, var(--iron-icon-width, 24px)); height: var(--iron-icon_-_height, var(--iron-icon-height, 24px)); margin-top: var(--iron-icon_-_margin-top);" class="guide-icon style-scope ytd-guide-entry-renderer">
  33.                             <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;" class="style-scope yt-icon">
  34.                                 <g class="style-scope yt-icon">
  35.                                     <path d="M9.8,9.8l-3.83,8.23l8.23-3.83l3.83-8.23L9.8,9.8z M13.08,12.77c-0.21,0.29-0.51,0.48-0.86,0.54 c-0.07,0.01-0.15,0.02-0.22,0.02c-0.28,0-0.54-0.08-0.77-0.25c-0.29-0.21-0.48-0.51-0.54-0.86c-0.06-0.35,0.02-0.71,0.23-0.99 c0.21-0.29,0.51-0.48,0.86-0.54c0.35-0.06,0.7,0.02,0.99,0.23c0.29,0.21,0.48,0.51,0.54,0.86C13.37,12.13,13.29,12.48,13.08,12.77z M12,3c4.96,0,9,4.04,9,9s-4.04,9-9,9s-9-4.04-9-9S7.04,3,12,3 M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2 L12,2z" class="style-scope yt-icon"></path>
  36.                                 </g>
  37.                             </svg>
  38.                         </div>
  39.                         <yt-img-shadow height="24" width="24" class="style-scope ytd-guide-entry-renderer" disable-upgrade="" hidden="">
  40.                         </yt-img-shadow>
  41.                         <div class="title style-scope ytd-guide-entry-renderer">${translation}</div>
  42.                         <span class="guide-entry-count style-scope ytd-guide-entry-renderer"></span>
  43.                         <yt-icon class="guide-entry-badge style-scope ytd-guide-entry-renderer" disable-upgrade="">
  44.                         </yt-icon>
  45.                         <div id="newness-dot" class="style-scope ytd-guide-entry-renderer"></div>
  46.                     </tp-yt-paper-item>
  47.                 </a>
  48.                 <yt-interaction class="style-scope ytd-guide-entry-renderer">
  49.                     <div class="stroke style-scope yt-interaction"></div>
  50.                     <div class="fill style-scope yt-interaction"></div>
  51.                 </yt-interaction>
  52.             </div>
  53.             `.replace(/>\s+</g, '><').trim(); // Clean up formatted html, Thanks to https://stackoverflow.com/a/27841683
  54.  
  55.             const child = $.parseHTML(html);
  56.             $("#items.style-scope.ytd-guide-section-renderer").children().eq(0).after(child);
  57.         }, 500);
  58.     });
  59. })(window.jQuery.noConflict(true));