Как вставить / заменить указатель c CSS при загрузке сайта

Question

Когда вы открываете YouTube, они дают вам целую кучу видеороликов, которые они «рекомендуют» вам или которые являются «трендовыми», эти видео просто случайные, но зачастую они также очень политизированы. Я не хочу видеть такие вещи.

Я хотел бы иметь чистую страницу YouTube, содержащую только панель поиска и ничего больше, и я надеялся, что есть какой-то метод, с помощью которого я могу добавить пользовательский CSS, отсекаемый при загрузке YouTube Home Страница, которая бы избавилась от всего раздела для меня.

Я определил проблему с этим заголовком здесь:

<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 или чего-то в этом роде). Я использую Google Chrome в качестве браузера и использую только режим инкогнито.

Answer 1

Один из способов сделать это - использовать скрипт пользователя. Установите менеджер пользовательских сценариев, например Tampermonkey , и добавьте тег <style> к документу на YouTube.

Определите селекторы 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;
}
`;

Чтобы запустить сценарий использования как можно скорее , чтобы элементы не появлялись на мгновение до загрузки страницы, используйте @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;
  }
}