Toggle Youtube Styles

Adds toggles to enable/disable some styles that change Youtube

  1. // ==UserScript==
  2. // @name Toggle Youtube Styles
  3. // @license MIT
  4. // @namespace rtonne
  5. // @match https://www.youtube.com/*
  6. // @icon https://www.google.com/s2/favicons?sz=64&domain=youtube.com
  7. // @version 1.9
  8. // @author Rtonne
  9. // @description Adds toggles to enable/disable some styles that change Youtube
  10. // @require https://update.greasyfork.org/scripts/498119/1395863/setupToggleCommands.js
  11. // @grant GM.addStyle
  12. // @grant GM.registerMenuCommand
  13. // @grant GM.unregisterMenuCommand
  14. // @grant GM.getValue
  15. // @grant GM.setValue
  16. // ==/UserScript==
  17.  
  18. const commands = [
  19. {
  20. id: "guide_sections",
  21. default_value: true,
  22. on_text: "🞕 Guide Sections",
  23. off_text: "🞎 Guide Sections",
  24. toggleOnFunction: () =>
  25. GM.addStyle(`
  26. #sections.ytd-guide-renderer > ytd-guide-section-renderer:nth-child(n+3) {
  27. display: unset;
  28. }
  29. `),
  30. toggleOffFunction: () =>
  31. GM.addStyle(`
  32. #sections.ytd-guide-renderer > ytd-guide-section-renderer:nth-child(n+3) {
  33. display: none;
  34. }
  35. `),
  36. },
  37. {
  38. id: "sidebar_shorts",
  39. default_value: true,
  40. on_text: "🞕 Shorts Sidebar Button",
  41. off_text: "🞎 Shorts Sidebar Button",
  42. // This hides all the buttons without a href in the first sidebar section (should only be Shorts right now)
  43. toggleOnFunction: () =>
  44. GM.addStyle(`
  45. ytd-guide-section-renderer:first-of-type ytd-guide-entry-renderer:not(:has(> a[href])),
  46. ytd-mini-guide-entry-renderer:not(:has(> a[href])) {
  47. display: unset;
  48. }
  49. `),
  50. toggleOffFunction: () =>
  51. GM.addStyle(`
  52. ytd-guide-section-renderer:first-of-type ytd-guide-entry-renderer:not(:has(> a[href])),
  53. ytd-mini-guide-entry-renderer:not(:has(> a[href])) {
  54. display: none;
  55. }
  56. `),
  57. },
  58. {
  59. id: "shorts",
  60. default_value: true,
  61. on_text: "🞕 Shorts in Feed",
  62. off_text: "🞎 Shorts in Feed",
  63. toggleOnFunction: () =>
  64. GM.addStyle(`
  65. ytd-rich-section-renderer:has(> div > [is-shorts]) {
  66. display: unset;
  67. }
  68. `),
  69. toggleOffFunction: () =>
  70. GM.addStyle(`
  71. ytd-rich-section-renderer:has(> div > [is-shorts]) {
  72. display: none;
  73. }
  74. `),
  75. },
  76. {
  77. id: "community",
  78. default_value: true,
  79. on_text: "🞕 Community Posts in Feed",
  80. off_text: "🞎 Community Posts in Feed",
  81. toggleOnFunction: () =>
  82. GM.addStyle(`
  83. ytd-rich-section-renderer:has(> div > :not([is-shorts]):not([thumbnail-style])) {
  84. display: unset;
  85. }
  86. `),
  87. toggleOffFunction: () =>
  88. GM.addStyle(`
  89. ytd-rich-section-renderer:has(> div > :not([is-shorts]):not([thumbnail-style])) {
  90. display: none;
  91. }
  92. `),
  93. },
  94. {
  95. id: "comments",
  96. default_value: true,
  97. on_text: "🞕 Comments",
  98. off_text: "🞎 Comments",
  99. toggleOnFunction: () =>
  100. GM.addStyle(`
  101. ytd-comments#comments {
  102. display: unset;
  103. }
  104. `),
  105. toggleOffFunction: () =>
  106. GM.addStyle(`
  107. ytd-comments#comments {
  108. display: none;
  109. }
  110. `),
  111. },
  112. {
  113. id: "related_videos",
  114. default_value: true,
  115. on_text: "🞕 Related Videos",
  116. off_text: "🞎 Related Videos",
  117. toggleOnFunction: () =>
  118. GM.addStyle(`
  119. #secondary.ytd-watch-flexy > #secondary-inner > #related {
  120. display: unset;
  121. }
  122. `),
  123. toggleOffFunction: () =>
  124. GM.addStyle(`
  125. #secondary.ytd-watch-flexy > #secondary-inner > #related {
  126. display: none;
  127. }
  128. `),
  129. },
  130. {
  131. id: "description_shorts",
  132. default_value: true,
  133. on_text: "🞕 Remix Shorts in Description",
  134. off_text: "🞎 Remix Shorts in Description",
  135. toggleOnFunction: () =>
  136. GM.addStyle(`
  137. #description ytd-reel-shelf-renderer {
  138. display: unset;
  139. }
  140. `),
  141. toggleOffFunction: () =>
  142. GM.addStyle(`
  143. #description ytd-reel-shelf-renderer {
  144. display: none;
  145. }
  146. `),
  147. },
  148. ];
  149.  
  150. setupToggleCommands(commands);