浏览器扩展：将YouTube缩略图改回每行6个

发表于 阅读次数： 本文字数： 2.8k 阅读时长 ≈ 4 分钟

在用电脑上面使用 YouTube 时，我有账号每行4个视频缩略图，有账号3个，感觉都太大了，在Reddit上面发现了两个帖子

  1. https://www.reddit.com/r/youtube/comments/qx8lfa/youtube_has_recently_changed_the_way_they_render
  2. https://www.reddit.com/r/youtube/comments/cur4bl/why_are_thumbnails_so_big_anyone_know_how_to_fix

发现这个插件可以解决

Youtube thumbnail resizer by iAlen：

YouTube缩略图resizer将6个缩略图带回去，而不是4个缩略图 这是YouTube的简单扩展。它连续将新的4个缩略图调整到连续6个旧的6。

下载地址：https://wwcp.lanzout.com/iMah22stv0wd

也可在下面的网站下载

https://www.crxsoso.com/addon/detail/ipgmfobgnagjpilonpeccpmglemaimge

本来想把他改成 “manifest_version”: 3，后面发现用油猴脚本更简单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
// ==UserScript==
// @name         YouTube缩略图调整器
// @namespace    http://tampermonkey.net/
// @version      1.3
// @description  将YouTube缩略图调整为每行6个而非4个，同时解决布局问题
// @author       Tune
// @match        https://www.youtube.com/*
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function() {
    'use strict';
    
    // 创建样式元素
    const style = document.createElement('style');
    style.textContent = `
        /* 设置视频网格为6个一行 */
        .ytd-rich-grid-renderer {
            --ytd-rich-grid-items-per-row: 6 !important;
        }
        
        /* 隐藏视频上传者头像 */
        #avatar-link.ytd-rich-grid-video-renderer {
            display: none;
        }
        
        /* 调整内容区域宽度，确保能完整显示6个缩略图 */
        #primary.ytd-two-column-browse-results-renderer {
            max-width: none !important;
            width: calc(100% - 240px) !important;
        }
        
        /* 收起侧边栏时的宽度调整 */
        ytd-page-manager.ytd-app ytd-browse[page-subtype="home"] #primary.ytd-two-column-browse-results-renderer,
        ytd-page-manager.ytd-app[mini-guide-visible] ytd-browse[page-subtype="home"] #primary.ytd-two-column-browse-results-renderer {
            width: calc(100% - 72px) !important;
        }
        
        /* 确保页面本身不出现横向滚动条 */
        html {
            overflow-x: hidden !important;
        }
    `;
    
    // 添加样式到文档
    (document.head || document.documentElement).appendChild(style);
    
    // 动态调整布局的功能
    const adjustLayout = () => {
        const contentElem = document.getElementById('content');
        if (contentElem) {
            // 确保内容区域有足够宽度
            contentElem.style.maxWidth = 'none';
        }
    };
    
    // 初始调整
    adjustLayout();
    
    // 监听DOM变化以持续调整布局
    const observer = new MutationObserver(adjustLayout);
    document.addEventListener('DOMContentLoaded', () => {
        observer.observe(document.body, { childList: true, subtree: true });
    });
    
    // 控制台显示脚本已加载
    console.log("YouTube缩略图调整器已加载");
})();