Return YouTube Trending

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

当前为 2022-10-26 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Return YouTube Trending
  3. // @name:de YouTube Trends wieder anzeigen
  4. // @version 1.1.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[href="/feed/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_expand = `
  29. <div class="style-scope ytd-guide-section-renderer" is-primary="" line-end-style="none" style="width: calc(100% - 12px)">
  30. <a id="endpoint" class="yt-simple-endpoint style-scope ytd-guide-entry-renderer" tabindex="-1" role="tablist" title="${translation}" href="/feed/explore" style="border-radius: 10px">
  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" style="padding: 0 12px">
  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_expand = $.parseHTML(html_expand);
  56. $("#items.style-scope.ytd-guide-section-renderer").children().eq(0).after(child_expand);
  57.  
  58.  
  59. const html_mini = `
  60. <div class="style-scope ytd-mini-guide-renderer ryt-mini-guide-entry-renderer" system-icons="" role="tab" tabindex="0" aria-selected="false" aria-label="${translation}" style="border-radius: 10px">
  61. <a id="endpoint" tabindex="-1" class="yt-simple-endpoint style-scope ytd-mini-guide-entry-renderer" title="${translation}" href="/feed/explore" style="width: 64px">
  62. <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-mini-guide-renderer">
  63. <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">
  64. <g class="style-scope yt-icon">
  65. <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>
  66. </g>
  67. </svg>
  68. </div>
  69. <span class="title style-scope ytd-mini-guide-entry-renderer">${translation}</span>
  70. <tp-yt-paper-tooltip animation-delay="0" offset="4" position="right" class="style-scope ytd-mini-guide-entry-renderer" role="tooltip" tabindex="-1" style="--paper-tooltip-delay-in: 0ms;" hidden="">
  71. <div id="tooltip" class="style-scope tp-yt-paper-tooltip hidden" style-target="tooltip">${translation}</div>
  72. </tp-yt-paper-tooltip>
  73. <yt-interaction class="style-scope ytd-mini-guide-entry-renderer">
  74. <div class="stroke style-scope yt-interaction"></div>
  75. <div class="fill style-scope yt-interaction"></div>
  76. </yt-interaction>
  77. </a>
  78. </div>
  79. `.replace(/>\s+</g, '><').trim();
  80.  
  81. const child_mini = $.parseHTML(html_mini);
  82. $("#items.style-scope.ytd-mini-guide-renderer").children().eq(0).after(child_mini);
  83.  
  84.  
  85. const html_style = `
  86. <style>
  87. .ryt-mini-guide-entry-renderer:hover, .ryt-mini-guide-entry-renderer:focus {
  88. background-color: var(--yt-spec-badge-chip-background);
  89. outline: none;
  90. }
  91. </style>
  92. `.replace(/>\s+</g, '><').trim();
  93.  
  94. const child_style = $.parseHTML(html_style);
  95. $("head").append(child_style);
  96. }, 500);
  97. });
  98. })(window.jQuery.noConflict(true));