如何用Tampermonkey脚本移除YouTube的ytp-gradient渐变元素？

你的脚本失效主要是几个低级错误导致的，先给你捋清楚问题：

• 匹配规则@match *://youtube.com*太窄，覆盖不了带www、m等子域名的YouTube页面，必须改成*://*.youtube.com/*
• 立即执行函数里把字符串当DOM对象调用方法，还误用getElementById查找class元素，直接报错
• jQuery选择器写反了层级，div.ytp-gradient-top div.ytp-gradient-bottom是找前者内部的后者，不是两个独立元素，得用逗号分隔
• 最后一段同样把class当成ID用，根本找不到元素

下面给你三个可用的修复脚本，选一个用就行：

方案1：修复waitForKeyElements版本 #

这个方案利用原脚本的依赖，修复后能等待元素加载完成再移除：

// ==UserScript==
// @name        Chrome Force Dark Mode Fix/White Overlay Fix
// @namespace   namespace
// @version     1.1
// @match       *://*.youtube.com/*
// @description Fixes Chrome Force Dark Mode on YouTube by removing white gradient overlays
// @grant       GM_addStyle
// @require     https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require     https://gist.github.com/raw/2625891/waitForKeyElements.js
// @run-at      document-idle
// ==/UserScript==
/* globals jQuery, $, waitForKeyElements */

function removeNode(jNode) {
    jNode.remove();
}

// 用逗号分隔同时监听两个目标元素
waitForKeyElements("div.ytp-gradient-top, div.ytp-gradient-bottom", removeNode);

方案2：CSS隐藏（最稳定） #

直接用CSS强制隐藏元素，优先级拉满，不管YouTube怎么动态生成元素都能生效：

// ==UserScript==
// @name        Chrome Force Dark Mode Fix/White Overlay Fix
// @namespace   namespace
// @version     1.1
// @match       *://*.youtube.com/*
// @description Fixes Chrome Force Dark Mode on YouTube by hiding white gradient overlays
// @grant       GM_addStyle
// @run-at      document-start
// ==/UserScript==

GM_addStyle(`
    div.ytp-gradient-top, div.ytp-gradient-bottom {
        display: none !important;
        opacity: 0 !important;
    }
`);

方案3：MutationObserver监听DOM #

实时监听页面DOM变化，只要目标元素出现就立即移除，适合极端动态的场景：

// ==UserScript==
// @name        Chrome Force Dark Mode Fix/White Overlay Fix
// @namespace   namespace
// @version     1.1
// @match       *://*.youtube.com/*
// @description Fixes Chrome Force Dark Mode on YouTube by removing white gradient overlays
// @run-at      document-idle
// ==/UserScript==

function removeGradients() {
    document.querySelectorAll('div.ytp-gradient-top, div.ytp-gradient-bottom').forEach(el => el.remove());
}

// 先移除页面已有的目标元素
removeGradients();

// 监听整个页面的DOM新增节点，动态移除新生成的目标元素
const observer = new MutationObserver((mutations) => {
    mutations.forEach(() => removeGradients());
});

observer.observe(document.body, { childList: true, subtree: true });

内容的提问来源于stack exchange，提问作者Airtroops 83