☰

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-19 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name         YouTube Grid Row Controller
  3. // @namespace    https://github.com/HageFX-78
  4. // @version      0.5
  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 defaultSettingValue = {
  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 currentSettingValues = {
  31.         content: GM_getValue('itemPerRow', defaultSettingValue.content),
  32.         news: GM_getValue('newsPerRow', defaultSettingValue.news),
  33.         shorts: GM_getValue('shortsPerRow', defaultSettingValue.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. 		
  59. 		ytd-rich-item-renderer[hidden][is-responsive-grid], [is-slim-media]{
  60. 			display: block !important;
  61. 		}
  62.  
  63. 		ytd-rich-item-renderer{
  64. 			margin-bottom: var(--ytd-rich-grid-row-margin) !important;
  65. 		}
  66.  
  67. 		.button-container.ytd-rich-shelf-renderer {
  68. 			display: none !important;
  69. 		}
  70. 		
  71. 		#dismissible.ytd-rich-shelf-renderer {
  72. 			padding-bottom: 0 !important;
  73. 			border-bottom: none !important;
  74. 		}
  75. 		.itemPerRowControl {
  76.             display: flex;
  77.             justify-content: right;
  78.             align-items: center;
  79.  
  80.             flex: 1;         
  81.             gap: 10px;
  82.             box-sizing: border-box;
  83.             user-select: none;
  84. 			${embedInChips ? '' : 'width: 100%;'};
  85.         }
  86.  
  87.         .itemPerRowControl button {
  88.  
  89.             border: none;
  90.             color: var(--yt-spec-text-primary);
  91.             background-color:${transparentButtons ? 'transparent' : 'var(--yt-spec-badge-chip-background)'};
  92.             font-size: 24px;
  93.             
  94.             text-align: center;
  95.             display: inline-block;
  96.  
  97.  
  98.             height: 30px;
  99.             aspect-ratio: 1/1;
  100.             border-radius: 50%;
  101.         }
  102.  
  103.         .itemPerRowControl button:hover {
  104.             background-color: var(--yt-spec-button-chip-background-hover);
  105.             cursor: pointer;
  106.         }
  107. 	`);
  108.  
  109.     const dynamicStyle = style('');
  110.  
  111.     function updatePageLayout() {
  112.         dynamicStyle.textContent = `
  113. 			ytd-rich-grid-renderer {
  114. 				--ytd-rich-grid-items-per-row: ${hideControls ? defaultSettingValue.content : currentSettingValues.content} !important;
  115. 			}
  116. 			ytd-rich-shelf-renderer:not([is-shorts]) {
  117. 				--ytd-rich-grid-items-per-row: ${hideControls ? defaultSettingValue.news : currentSettingValues.news} !important;
  118. 			}
  119. 			ytd-rich-shelf-renderer[is-shorts] {
  120. 				--ytd-rich-grid-slim-items-per-row: ${hideControls ? defaultSettingValue.shorts : currentSettingValues.shorts} !important;
  121.                 --ytd-rich-grid-items-per-row: ${hideControls ? defaultSettingValue.shorts : currentSettingValues.shorts} !important;
  122. 			}
  123. 		`;
  124.     }
  125.  
  126.     function saveValues() {
  127.         GM_setValue('itemPerRow', currentSettingValues.content);
  128.         GM_setValue('newsPerRow', currentSettingValues.news);
  129.         GM_setValue('shortsPerRow', currentSettingValues.shorts);
  130.     }
  131.  
  132.     function updateAndSave() {
  133.         updatePageLayout();
  134.         saveValues();
  135.     }
  136.  
  137.     function waitForElement(baseQuery, selector) {
  138.         return new Promise((resolve) => {
  139.             const observer = new MutationObserver(() => {
  140.                 const el = baseQuery.querySelector(selector);
  141.                 if (el) {
  142.                     observer.disconnect();
  143.                     resolve(el);
  144.                 }
  145.             });
  146.  
  147.             observer.observe(baseQuery, { childList: true, subtree: true });
  148.         });
  149.     }
  150.  
  151.     function watchMainContent(container) {
  152.         const observer = new MutationObserver((mutations) => {
  153.             mutations.forEach(({ addedNodes }) => {
  154.                 for (let node of addedNodes) {
  155.                     if (node.nodeType === 1 && node.matches('ytd-rich-section-renderer')) {
  156.                         const ref = node.querySelector('#menu-container');
  157.                         const hasControlDiv = node.querySelector('.itemPerRowControl') !== null;
  158.                         const isShorts = node.querySelector('[is-shorts]') !== null;
  159.  
  160.                         if (hasControlDiv) continue; // Skip if already exists
  161.  
  162.                         createControlDiv(ref, isShorts ? 'shorts' : 'news', true);
  163.                     }
  164.                 }
  165.             });
  166.         });
  167.  
  168.         observer.observe(container, { childList: true, subtree: true });
  169.     }
  170.  
  171.     function createControlDiv(target, type, insertBefore = false) {
  172.         const controlDiv = document.createElement('div');
  173.         controlDiv.classList.add('style-scope', 'ytd-rich-grid-renderer', 'itemPerRowControl');
  174.  
  175.         ['-', '+'].forEach((symbol) => {
  176.             const btn = document.createElement('button');
  177.             btn.innerText = symbol;
  178.             btn.addEventListener('click', () => {
  179.                 if (symbol === '+') {
  180.                     currentSettingValues[type]++;
  181.                     console.log(currentSettingValues[type]);
  182.                 } else if (currentSettingValues[type] > 1) {
  183.                     currentSettingValues[type]--;
  184.                 }
  185.                 updateAndSave();
  186.             });
  187.             controlDiv.appendChild(btn);
  188.         });
  189.  
  190.         if (insertBefore) target.parentNode.insertBefore(controlDiv, target);
  191.         else target.appendChild(controlDiv);
  192.         if (!insertBefore) controlDiv.classList.add('justify-left-custom');
  193.     }
  194.  
  195.     function init(queryStartLocation) {
  196.         updatePageLayout();
  197.  
  198.         if (hideControls) return;
  199.  
  200.         if (embedInChips) {
  201.             waitForElement(queryStartLocation, '#chips-wrapper').then((el) => createControlDiv(el, 'content'));
  202.         } else {
  203.             waitForElement(queryStartLocation, '#contents.ytd-rich-grid-renderer').then((el) => createControlDiv(el, 'content', true));
  204.         }
  205.  
  206.         // Start watching for newly loaded sections
  207.         waitForElement(queryStartLocation, '#contents.ytd-rich-grid-renderer').then(watchMainContent);
  208.  
  209.         // Cleanup after init
  210.         window.removeEventListener('yt-navigate-finish', handlePageContentChanged);
  211.     }
  212.  
  213.     // Workaround when reloaded on creator's home page and going back to main page will hide the buttons
  214.     let firstLoad = true;
  215.     function handlePageContentChanged() {
  216.         if (location.href.endsWith('youtube.com/')) {
  217.             let browseElements = document.querySelectorAll('ytd-browse');
  218.  
  219.             if (firstLoad || browseElements.length <= 1) {
  220.                 init(browseElements[0]);
  221.             } else {
  222.                 // If reloaded on creator's home page, second ytd-browse will be the main page
  223.                 init(browseElements[1]);
  224.             }
  225.         }
  226.         firstLoad = false;
  227.     }
  228.  
  229.     // ----------------------------------- Main Execution -----------------------------------
  230.  
  231.     window.addEventListener('yt-navigate-finish', handlePageContentChanged);
  232. })();