Навсегда изменить дизайн любого веб-сайта, воспользовавшись косметической инъекцией uBlock Origin.

Несколько месяцев назад я написал статья, объясняющая, как временно изменить макет любого компонента браузера Vivaldi. Временно. И компоненты браузера. Сегодня я собираюсь объяснить, как вносить постоянные изменения в веб-страницы, и для этого мы воспользуемся возможностями, которые uBlock Origin, установленный в Firefox и Chromium по умолчанию в некоторых дистрибутивах Linux, для внесения «косметических» изменений. Он делает это, как и все остальное, вводя информацию в веб-страницы, но все локально.

Для внесения этих изменений необходимо нужно знать HTML и CSS, а также как использовать инструменты разработчика. По сути, мы собираемся указать, какие изменения необходимо внести в какие веб-страницы и в какие элементы, и результат может быть таким, как на скриншоте заголовка: получить нашу собственную темную тему LinuxAdictos. Возможно, это выглядит лучше, но с селекторами придется проделать гораздо больше работы (подробнее см. MDN).

Шаги, которые необходимо выполнить, чтобы изменить CSS с помощью uBlock

Прежде чем продолжить, я должен сказать, что я провел тесты с uBlock Origin, но он также должен работать в любом расширении этого типа, в котором есть раздел «косметика». Именно он вносит изменения в CSS и позволяет нам включать собственные правила. Это не работает, например, в родном варианте Vivaldi, но работает в Brave, если вы знаете, как их добавить.

Объяснив выше, это то, что я добавил, чтобы можно было увидеть захват заголовка:

linuxadictos.com##html:style(цвет:белый !важно; цвет фона:черный !важно)
linuxadictos.com##h1,h2,h3,h4,h5,h6:style(color:white !important;)
linuxadictos.com##a:стиль(цвет:белый !важно;)

Кода:

• ## это то, что указывает на то, что за ним стоит селектор. Если то, что мы хотим выбрать, является идентификатором, должно быть три пэда, а потому что третий — это идентификатор. В этих случаях это все селекторы тегов, а перед тегами ничего нет. Для получения дополнительной информации я еще раз отсылаю вас к ссылке MDN.
• Теги — это выборки, и в этих примерах есть все (html), теги заголовков (h1-6) и теги ссылок (a).
• Чтобы указать стиль, мы должны поставить :style.
• Правила заключаются в круглые скобки, а не фигурные скобки, поскольку они написаны в реальном CSS.

И это все, хотя это может стать намного сложнее, если вы хотите внести больше и лучше изменений. Поскольку правила находятся в расширении, которое отвечает за внесение изменений в веб-страницы, когда оно достигает этих правил, оно применяет изменения. И я уже забыл, что ничего из описанного не полезно, если мы не укажем, куда идут эти изменения: они идут в конфигурации расширения и в разделе "Мои фильтры". Примерно то же самое в Brave.

Есть сайт, дизайн которого вам не нравится? Теперь у вас есть решение.