如何在YouTube页面加载时自动移除指定HTML元素（Shorts模块）

方案一：用户脚本（Tampermonkey/Greasemonkey） #

这是最灵活的客户端方案，适配Chrome、Firefox、Edge等主流浏览器，能彻底移除目标DOM元素。

• 步骤1：安装Tampermonkey扩展
• 步骤2：创建新脚本，粘贴以下代码：

// ==UserScript==
// @name         Remove YouTube Shorts Section
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Auto remove YouTube Shorts section on homepage
// @author       Your Name
// @match        *://www.youtube.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function removeShorts() {
        const target = document.querySelector('ytd-rich-section-renderer.style-scope.ytd-rich-grid-renderer[mini-mode]');
        target?.remove();
    }

    // 页面初始加载后执行
    window.addEventListener('load', removeShorts);

    // 监听动态内容更新（YouTube为单页应用，内容会异步加载）
    const observer = new MutationObserver(() => removeShorts());
    observer.observe(document.body, { childList: true, subtree: true });
})();

• 步骤3：保存脚本，刷新YouTube页面即可生效

方案二：自定义CSS（仅隐藏元素） #

若只需隐藏模块而非彻底移除DOM，可使用自定义样式：

• 步骤1：安装Stylus扩展
• 步骤2：创建YouTube专属样式，添加以下代码：

ytd-rich-section-renderer.style-scope.ytd-rich-grid-renderer[mini-mode] {
    display: none !important;
}

• 步骤3：保存样式，Shorts模块会被直接隐藏

注意事项 #

• 若需仅在首页生效，可修改脚本的@match规则为*://www.youtube.com/
• YouTube页面结构可能更新，若方案失效，需重新验证目标元素的选择器

内容的提问来源于stack exchange，提问作者Hugo Cheyne