您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
Adds 3 additional thumbnails per row
当前为
- // ==UserScript==
- // @name YouTube Smaller Thumbnails
- // @namespace http://greasyfork.org
- // @version 0.0.4
- // @description Adds 3 additional thumbnails per row
- // @author you
- // @license MIT
- // @match *://www.youtube.com/*
- // @match *://youtube.com/*
- // @run-at document-start
- // @grant none
- // ==/UserScript==
- (function() {
- 'use strict';
- const DELTA = 3; // Amount of columns to add.
- const MAX_COLUMNS = 6; // Maximum amount of columns.
- const DELTA_SHORTS = 9; // Amount of columns to add.
- const MAX_SHORTS_COLUMNS = 12; // Maximum amount of columns for shorts.
- function makeShortsSmaller() {
- var style = document.createElement('style');
- style.innerText = `
- ytd-rich-item-renderer[is-slim-media] {
- width: 10% !important;
- }
- `;
- document.body.appendChild(style);
- console.log('[YouTube Smaller Thumbnails] Reduced shorts size')
- }
- document.addEventListener("DOMContentLoaded", makeShortsSmaller);
- document.addEventListener("load", makeShortsSmaller);
- function installStyle(contents) {
- var style = document.createElement('style');
- style.innerHTML = contents;
- document.body.appendChild(style);
- }
- function getTargetValue(currentValue) {
- let newValue = currentValue + DELTA;
- if (newValue > MAX_COLUMNS) {
- newValue = MAX_COLUMNS;
- }
- return newValue;
- }
- function getShortsTargetValue(currentValue) {
- let newValue = currentValue + DELTA_SHORTS;
- if (newValue > MAX_SHORTS_COLUMNS) {
- newValue = MAX_SHORTS_COLUMNS;
- }
- return newValue;
- }
- function isShorts(itemElement) {
- return null !== itemElement.getAttribute('is-slim-media')
- }
- function modifyGridStyle(gridElement) {
- const currentStyle = gridElement.getAttribute('style');
- if (!currentStyle) {
- return;
- }
- const itemsPerRowMatch = currentStyle.match(/--ytd-rich-grid-items-per-row:\s*(\d+)/);
- if (!itemsPerRowMatch) {
- return;
- }
- const currentValue = parseInt(itemsPerRowMatch[1], 10);
- if (isNaN(currentValue)) {
- return;
- }
- const newValue = getTargetValue(currentValue);
- if (currentValue === newValue) {
- return;
- }
- const newStyle = currentStyle.replace(
- /--ytd-rich-grid-items-per-row:\s*\d+/,
- `--ytd-rich-grid-items-per-row: ${newValue}`
- );
- gridElement.setAttribute('style', newStyle);
- console.log(`[YouTube Smaller Thumbnails] Modified items per row: ${currentValue} -> ${newValue}`);
- }
- function modifyItemsPerRow(itemElement) {
- const currentValue = parseInt(itemElement.getAttribute('items-per-row'), 10);
- if (isNaN(currentValue)) {
- return;
- }
- const newValue = isShorts(itemElement) ?
- getShortsTargetValue(currentValue) :
- getTargetValue(currentValue);
- if (currentValue === newValue) {
- return;
- }
- itemElement.setAttribute('items-per-row', newValue);
- console.log(`[YouTube Smaller Thumbnails] Modified items per row: ${currentValue} -> ${newValue}`);
- }
- function modifyShortHidden(itemElement) {
- if (!isShorts(itemElement)) {
- return;
- }
- if (null === itemElement.getAttribute('hidden')) {
- return
- }
- itemElement.removeAttribute('hidden');
- console.log(`[YouTube Smaller Thumbnails] Modified hidden`);
- }
- function modifyShelfRenderer(itemElement) {
- const currentStyle = itemElement.getAttribute('style');
- if (!currentStyle) {
- return;
- }
- const itemsCountMatch = currentStyle.match(/--ytd-rich-shelf-items-count:\s*(\d+)/);
- if (!itemsCountMatch) {
- return;
- }
- const currentValue = parseInt(itemElement.getAttribute('elements-per-row'), 10);
- if (isNaN(currentValue)) {
- return;
- }
- const newValue = getShortsTargetValue(currentValue)
- if (currentValue === newValue) {
- return;
- }
- const newStyle = currentStyle.replace(
- /--ytd-rich-shelf-items-count:\s*\d+/,
- `--ytd-rich-shelf-items-count: ${newValue}`
- );
- itemElement.setAttribute('style', newStyle);
- itemElement.setAttribute('elements-per-row', newValue);
- console.log(`[YouTube Smaller Thumbnails] Modified elements per row: ${currentValue} -> ${newValue}`);
- }
- function processExistingElements() {
- document.querySelectorAll('ytd-rich-grid-renderer').forEach(gridElement => {
- modifyGridStyle(gridElement);
- });
- document.querySelectorAll('ytd-rich-item-renderer').forEach(itemElement => {
- modifyItemsPerRow(itemElement);
- modifyShortHidden(itemElement);
- });
- }
- const observer = new MutationObserver((mutations) => {
- mutations.forEach((mutation) => {
- if (mutation.addedNodes && mutation.addedNodes.length > 0) {
- mutation.addedNodes.forEach((node) => {
- if (node.nodeType === Node.ELEMENT_NODE) {
- if (node.tagName === 'YTD-RICH-GRID-RENDERER') {
- modifyGridStyle(node);
- }
- if (node.tagName === 'YTD-RICH-ITEM-RENDERER') {
- modifyItemsPerRow(node);
- }
- if (node.tagName === 'YTD-RICH-SHELF-RENDERER') {
- modifyShelfRenderer(node);
- }
- node.querySelectorAll('ytd-rich-grid-renderer').forEach(gridElement => {
- modifyGridStyle(gridElement);
- });
- node.querySelectorAll('ytd-rich-item-renderer').forEach(itemElement => {
- modifyItemsPerRow(itemElement);
- modifyShortHidden(itemElement);
- });
- node.querySelectorAll('ytd-rich-shelf-renderer').forEach(itemElement => {
- modifyShelfRenderer(itemElement);
- });
- }
- });
- }
- if (mutation.type === 'attributes') {
- const target = mutation.target;
- if (target.tagName === 'YTD-RICH-GRID-RENDERER' && mutation.attributeName === 'style') {
- modifyGridStyle(target);
- }
- if (target.tagName === 'YTD-RICH-ITEM-RENDERER' && mutation.attributeName === 'items-per-row') {
- if (mutation.attributeName === 'items-per-row') {
- modifyItemsPerRow(target);
- }
- if (mutation.attributeName === 'hidden') {
- modifyShortHidden(target);
- }
- }
- if (target.tagName === 'YTD-RICH-SHELF-RENDERER' && mutation.attributeName === 'elements-per-row') {
- modifyShelfRenderer(target);
- }
- }
- });
- });
- function startObserver() {
- processExistingElements();
- observer.observe(document.documentElement, {
- childList: true,
- subtree: true,
- attributes: true,
- attributeFilter: ['style', 'hidden', 'items-per-row', 'elements-per-row']
- });
- console.log('[YouTube Smaller Thumbnails] Observer started');
- }
- if (document.readyState === 'loading') {
- document.addEventListener('DOMContentLoaded', startObserver);
- } else {
- startObserver();
- }
- setInterval(processExistingElements, 3000);
- })();