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

当你打开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>

这是没有问题的，但正如我所说的，我希望在页面加载时自动执行，我不确定如何执行，或者是否可能

---

如果可能的话，我想知道如何实现它（可能使用cookies或类似的东西）。我使用Google Chrome作为浏览器，我只使用匿名模式。

一种方法是使用用户脚本。在youtube上安装userscript管理器，并在文档中附加

标记

确定要隐藏的元素的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，使元素在页面加载前一刻都不会出现，请使用

@runatdocumentstart

，启用实验性即时脚本注入，并将

标记附加到

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调整而设计的扩展来执行类似的操作：

---

谢谢你的快速回复。。我忘了提到：有可能在匿名模式下使用这些方法吗？是的，如果您允许扩展在匿名模式下运行。好的，我会试试！一旦成功，你就会得到我的支票，谢谢！工作没有问题，尽管我现在删除了一点太多。。但是我可以自己解决，非常感谢！

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

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