Greasy Fork 还支持 简体中文。

YouTube Grid Row Controller

Adds simple buttons to control items per row on Youtube's home feed, works for shorts and news sections too. Buttons can be hidden if needed.

目前為 2025-05-02 提交的版本,檢視 最新版本

  1. // ==UserScript==
  2. // @name YouTube Grid Row Controller
  3. // @namespace https://github.com/HageFX-78
  4. // @version 0.2
  5. // @description Adds simple buttons to control items per row on Youtube's home feed, works for shorts and news sections too. Buttons can be hidden if needed.
  6. // @author HageFX78
  7. // @license MIT
  8. // @match *://www.youtube.com/*
  9. // @icon https://www.google.com/s2/favicons?sz=64&domain=youtube.com
  10. // @grant GM_setValue
  11. // @grant GM_getValue
  12. // ==/UserScript==
  13.  
  14. (function () {
  15. "use strict";
  16.  
  17. // Configurable options
  18. const embedInChips = true; // Only applies to the one that is attached to the categories bar, set false if you have another script that removes the bar
  19. const hideControls = false; // set true to hide UI controls, it will use the default values instead
  20.  
  21. const transparentButtons = false; // set true to make the buttons transparent and less intrusive, only applies if hideControls is false
  22.  
  23. const defaultCounts = {
  24. // Default values mainly used when if you want to hide the buttons, change the values to your liking
  25. content: 4,
  26. news: 5,
  27. shorts: 6,
  28. };
  29.  
  30. let currentCounts = {
  31. content: GM_getValue("itemPerRow", defaultCounts.content),
  32. news: GM_getValue("newsPerRow", defaultCounts.news),
  33. shorts: GM_getValue("shortsPerRow", defaultCounts.shorts),
  34. };
  35.  
  36. // Styles
  37. const style = (css) => {
  38. const el = document.createElement("style");
  39. el.textContent = css;
  40. document.head.appendChild(el);
  41. return el;
  42. };
  43.  
  44. style(`
  45. ${
  46. hideControls
  47. ? ""
  48. : "#right-arrow {right: 10% !important;} #chips-wrapper {justify-content: left !important;}#chips-content{width: 90% !important;}"
  49. }
  50.  
  51. .justify-left-custom {
  52. justify-content: left !important;
  53. }
  54.  
  55. ytd-rich-item-renderer[rendered-from-rich-grid][is-in-first-column] {
  56. margin-left: calc(var(--ytd-rich-grid-item-margin) / 2) !important;
  57. }
  58. ytd-rich-item-renderer[hidden][is-responsive-grid], [is-slim-media]{
  59. display: block !important;
  60. }
  61.  
  62. ytd-rich-item-renderer{
  63. margin-bottom: var(--ytd-rich-grid-row-margin) !important;
  64. }
  65.  
  66. .button-container.ytd-rich-shelf-renderer {
  67. display: none !important;
  68. }
  69. #dismissible.ytd-rich-shelf-renderer {
  70. padding-bottom: 0 !important;
  71. border-bottom: none !important;
  72. }
  73. .itemPerRowControl {
  74. display: flex;
  75. justify-content: right;
  76. align-items: center;
  77.  
  78. flex: 1;
  79. gap: 10px;
  80. box-sizing: border-box;
  81. user-select: none;
  82. ${embedInChips ? "" : "width: 100%;"};
  83. }
  84.  
  85. .itemPerRowControl button {
  86.  
  87. border: none;
  88. color: white;
  89. background-color:${
  90. transparentButtons
  91. ? "transparent"
  92. : "var(--yt-spec-badge-chip-background)"
  93. };
  94. font-size: 24px;
  95. text-align: center;
  96. display: inline-block;
  97.  
  98.  
  99. height: 30px;
  100. aspect-ratio: 1/1;
  101. border-radius: 50%;
  102. }
  103.  
  104. .itemPerRowControl button:hover {
  105. background-color: var(--yt-spec-button-chip-background-hover);
  106. cursor: pointer;
  107. }
  108. `);
  109.  
  110. const dynamicStyle = style("");
  111.  
  112. function applyCounts() {
  113. dynamicStyle.textContent = `
  114. ytd-rich-grid-renderer {
  115. --ytd-rich-grid-items-per-row: ${
  116. hideControls ? defaultCounts.content : currentCounts.content
  117. } !important;
  118. }
  119. ytd-rich-shelf-renderer {
  120. --ytd-rich-grid-items-per-row: ${
  121. hideControls ? defaultCounts.news : currentCounts.news
  122. } !important;
  123. }
  124. ytd-rich-shelf-renderer[is-shorts] {
  125. --ytd-rich-grid-slim-items-per-row: ${
  126. hideControls ? defaultCounts.shorts : currentCounts.shorts
  127. } !important;
  128. }
  129. `;
  130. }
  131.  
  132. function saveCounts() {
  133. GM_setValue("itemPerRow", currentCounts.content);
  134. GM_setValue("newsPerRow", currentCounts.news);
  135. GM_setValue("shortsPerRow", currentCounts.shorts);
  136. }
  137.  
  138. function updateAndSave() {
  139. applyCounts();
  140. saveCounts();
  141. }
  142.  
  143. function waitForElement(selector) {
  144. return new Promise((resolve) => {
  145. const observer = new MutationObserver(() => {
  146. const el = document.querySelector(selector);
  147. if (el) {
  148. observer.disconnect();
  149. resolve(el);
  150. }
  151. });
  152. observer.observe(document.body, { childList: true, subtree: true });
  153. });
  154. }
  155.  
  156. function watchMainContent(container) {
  157. const observer = new MutationObserver((mutations) => {
  158. mutations.forEach(({ addedNodes }) => {
  159. addedNodes.forEach((node) => {
  160. if (
  161. node.nodeType === 1 &&
  162. node.matches("ytd-rich-section-renderer")
  163. ) {
  164. const ref = node.querySelector("#menu-container");
  165. const isShorts =
  166. node.querySelector("[is-shorts]") !== null;
  167.  
  168. createControlDiv(
  169. ref,
  170. isShorts ? "shorts" : "news",
  171. true
  172. );
  173. }
  174. });
  175. });
  176. });
  177. observer.observe(container, { childList: true, subtree: true });
  178. }
  179.  
  180. function createControlDiv(target, type, insertBefore = false) {
  181. const controlDiv = document.createElement("div");
  182. controlDiv.classList.add(
  183. "style-scope",
  184. "ytd-rich-grid-renderer",
  185. "itemPerRowControl"
  186. );
  187.  
  188. ["-", "+"].forEach((symbol) => {
  189. const btn = document.createElement("button");
  190. btn.innerText = symbol;
  191. btn.addEventListener("click", () => {
  192. if (symbol === "+") {
  193. currentCounts[type]++;
  194. console.log(currentCounts[type]);
  195. } else if (currentCounts[type] > 1) {
  196. currentCounts[type]--;
  197. }
  198. updateAndSave();
  199. });
  200. controlDiv.appendChild(btn);
  201. });
  202.  
  203. if (insertBefore) target.parentNode.insertBefore(controlDiv, target);
  204. else target.appendChild(controlDiv);
  205. if (!insertBefore) controlDiv.classList.add("justify-left-custom");
  206. }
  207.  
  208. // ----------------------------------- Main Execution -----------------------------------
  209. applyCounts();
  210.  
  211. if (hideControls) {
  212. return;
  213. }
  214.  
  215. if (embedInChips) {
  216. waitForElement("#chips-wrapper").then((el) =>
  217. createControlDiv(el, "content")
  218. );
  219. } else {
  220. waitForElement("#contents.ytd-rich-grid-renderer").then((el) =>
  221. createControlDiv(el, "content", true)
  222. );
  223. }
  224.  
  225. waitForElement("#contents.ytd-rich-grid-renderer").then(watchMainContent);
  226. })();