如何在网站加载时插入/替换特定的 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 或类似的东西）。我使用谷歌浏览器作为浏览器，我只使用隐身模式。

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，启用实验性即时脚本注入，并附加@ 987654327@ 标记到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;
  }
}