如何在网站加载时插入/替换特定的CSS

Question

当你打开YouTube时，他们会给你一大堆他们"推荐"给你的视频，或者是"潮流"视频，这些视频只是随机的，但有时它们也很有政治色彩。我不想看到那种东西。

我想有一个干净的YouTube页面，只有搜索栏，没有其他东西，我曾希望有某种方法，我可以在加载YouTube主页时注入一个自定义的CSS剪切，这将为我删除整个部分。

我已经在这里指出了这个标题的问题：

<ytd-rich-grid-renderer 
class="style-scope ytd-two-column-browse-results-renderer" 
style="--ytd-rich-grid-items-per-row:3; 
--ytd-rich-grid-posts-per-row:3; 
--ytd-rich-grid-movies-per-row:5;" 
mini-mode="">
<!-- here is where all the recommended and trending stuff is -->
</ytd-rich-grid-renderer>

当页面加载时，我唯一想自动做的事情就是从这个div中删除每个类和样式，并将其替换为style="display:none"，所以它看起来像这样：

<ytd-rich-grid-renderer style="display:none">
<!-- now all recommended and trending stuff as been rendered invisible -->
</ytd-rich-grid-renderer>

这没有问题，但正如我所说，我希望在页面加载时自动发生这种情况，我不确定如何做到这一点，也不确定这是否可能。

如果可能的话，我想知道如何实现(可能使用cookie或类似的东西(。我使用谷歌Chrome浏览器，我只使用隐姓埋名模式。

Answer 1

实现这一点的一种方法是使用用户脚本。安装一个像Tampermonkey这样的用户脚本管理器，并在youtube上为文档添加一个<style>标记。

识别要隐藏的元素的CSS选择器，并为它们提供display: none:

// ==UserScript==
// @name         Hide Youtube Junk
// @match        https://www.youtube.com/*
// @grant        none
// ==/UserScript==
document.body.appendChild(document.createElement('style')).textContent = `
ytd-two-column-browse-results-renderer, [id="masthead-ad"] {
display: none !important;
}
`;

要尽快运行usescript，以便元素在页面加载前不会出现，请使用@run-at document-start，启用实验性即时脚本注入，并将<style>标记附加到documentElement。添加

// @run-at       document-start

并使用

document.documentElement.appendChild(document.createElement('style')).textContent = `
ytd-two-column-browse-results-renderer, [id="masthead-ad"] {
display: none !important;
}
`;

你可以用一个专门为用户端CSS调整设计的扩展来做一些非常类似的事情，Stylus:

@-moz-document domain("youtube.com") {
ytd-two-column-browse-results-renderer, [id="masthead-ad"] {
display: none !important;
}
}