Изменение любого сайта через расширение браузера

Расширение Custom CSS by Denis добавляет кастомные стили для любых сайтов. Позволяет убрать сайдбар, скрыть рекламу, увеличить шрифт или полностью изменить оформление. Оно не заменяет AdBlock, но для двух-трёх сайтов, которыми вы постоянно пользуетесь, позволяет решить задачи, с которыми блокировщики рекламы не справляются.

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

Причём обычные блокировщики рекламы часто не справляются с удалением, т.к. крупные площадки научились обходить эти блокировки.

В этом случае как раз поможет расширение для кастомных CSS, в частности Custom CSS by Denis.

Установка:

Расширение Custom CSS by Denis устанавливается из Chrome Web Store. Работает в Chrome, Edge, Яндекс.Браузере и других браузерах на Chromium.

Для Chrome и Chromium-браузеров

Открыть страницу расширения в Chrome Web Store.
Нажать «Установить».
Подтвердить установку.

Для Firefox

Custom CSS by Denis в Firefox не поддерживается. Есть отдельное расширение Custom CSS от другого разработчика с похожим функционалом. Принцип работы тот же: стили задаются для конкретного домена, хранятся локально в браузере.

После установки

Расширение не запрашивает доступ ко всем сайтам сразу. Разрешение предоставляется отдельно для домена, на котором вы начинаете работу.

Порядок действий:

Открыть сайт, который требуется изменить.
Нажать на иконку расширения в панели браузера.
В появившемся окне запроса разрешения — подтвердить доступ к домену.
Откроется текстовое поле для CSS-кода.
Вставить стили.
Обновить страницу — изменения применятся.

Если стили для домена перестают использоваться, разрешение отзывается автоматически. Лимит — 7500 символов CSS на домен.

Примеры

Готовые коды для чужих сайтов приводить не буду — они быстро устаревают. Но принцип работы одинаковый, и, зная CSS, настроить вид любого сайта не составит труда. Если возникнут трудности, пишите, подскажу.

А на примере моего сайта, чтобы из А сделать B, можно добавить простой код:

.atuin_breadcrumbs,
.subbanner p,
.top-article {
	display: none!important;
}

.atuin_breadcrumbs,

.subbanner p,

.top-article {

display: none!important;

}

!important обязательно нужно указывать, чтобы наверняка перебить оригинальные стили сайта

Скриншоты взяты из статьи Эффект выгорания изображения с текстом

Результат:

Убрали крошки, второй заголовок и секцию с картинкой
Правило применилось ко всем страницам сайта
Если что-то не так сделали или сломали — всегда можно поменять

С популярными сайтами всё немного сложнее. Вместо понятных классов вроде subbanner, top-article или advertising могут использоваться случайно сгенерированные имена, например jTovqfNP9obFzPjcCTm0. Найти нужный элемент в таком случае можно по дата-атрибутам, структуре вложенности или частичному совпадению имени класса.

В CSS нет полноценных регулярных выражений, как в JavaScript, но есть операторы для частичного совпадения атрибутов. С их помощью можно «поймать» блоки, у которых имя меняется от страницы к странице, но содержит общий признак.

/* 1. Точечное совпадение: есть именно такой атрибут */
[data-ad] { display: none !important; }

/* 2. Совпадение по значению атрибута: атрибут data-block равен "ad" */
[data-block="ad"] { display: none !important; }

/* 3. Частичное совпадение: в значении есть подстрока "ad" (data-block="top-ad", "ad-wrapper") */
[data-block*="ad"] { display: none !important; }

/* 4. Начало значения: data-block="ad-banner", "ad-container" */
[data-block^="ad"] { display: none !important; }

/* 5. Конец значения: class="main-ad", "side-ad" */
[class$="ad"] { display: none !important; }

/* 6. Поиск по классу: где в class есть "banner" */
[class*="banner"] { display: none !important; }

/* 7. Поиск по вложенности: ссылка внутри блока с классом wrapper */
.wrapper > a { display: none !important; }

/* 8. Поиск по соседям: блок сразу после рекламы */
.post + .ad-container { display: none !important; }

/* 1. Точечное совпадение: есть именно такой атрибут */

[data-ad] { display: none !important; }

/* 2. Совпадение по значению атрибута: атрибут data-block равен "ad" */

[data-block="ad"] { display: none !important; }

/* 3. Частичное совпадение: в значении есть подстрока "ad" (data-block="top-ad", "ad-wrapper") */

[data-block*="ad"] { display: none !important; }

/* 4. Начало значения: data-block="ad-banner", "ad-container" */

[data-block^="ad"] { display: none !important; }

/* 5. Конец значения: class="main-ad", "side-ad" */

[class$="ad"] { display: none !important; }

/* 6. Поиск по классу: где в class есть "banner" */

[class*="banner"] { display: none !important; }

/* 7. Поиск по вложенности: ссылка внутри блока с классом wrapper */

.wrapper > a { display: none !important; }

/* 8. Поиск по соседям: блок сразу после рекламы */

.post + .ad-container { display: none !important; }

Пояснения к операторам:

[attr] — атрибут присутствует
[attr="val"] — точное совпадение
[attr*="val"] — содержит подстроку
[attr^="val"] — начинается с подстроки
[attr$="val"] — заканчивается на подстроку

Главное — не переусердствовать: селектор [class*="ad"] может случайно зацепить безобидные классы вроде addition или header. Если после применения стилей пропало что-то нужное, просто уберите этот селектор или уточните его.

Потратив немного времени и разобравшись в этом, вы сможете изменить оформление сайта, и он заиграет иными красками, а не неоновыми огнями реклам 🙂