Данный пост возможной серии "цифровая гигиена" посвящён использованию одного конкретного блокировщика рекламы - uBlock Origin в Firefox. Блокировщиков много, я не ставлю целью рассмотреть все, или провести сравнительный анализ, или как-то рекламировать один конкретный. Это же применимо к браузеру - Chrome гонят дичь последнее время, uBlock Origin теперь в их магазине превратился в куцый uBlock Lite. Так что выбор сугубо субъективный, и внимательный читатель легко перенесёт описанные приёмы на другие браузеры и утилиты - принцип везде примерно одинаковый.
Я намеренно буду очень упрощать изложение, в том числе и в контексте используемой терминологии, делая пост как можно более доступным. Недавно прошла серия постов благодарности РКН за улучшение компьютерной грамотности среди населения. Продолжим благое дело - добавим к практике использования VPN умение использовать простые блокировщики рекламы.
Блокировщики вырезают не только рекламу, но и бесполезные для пользователя скрипты, зачастую даже повышая быстродействие страниц. На стороне клиента эти утилиты действуют довольно тривиально - они модифицируют отображаемую страницу, убирая "структурные блоки" по определённым правилам и предотвращая загрузку скриптов так же по определённым правилам. Всё это происходит только в браузере на стороне клиента. Перед тем, как перейти к основной части статьи, я бы хотел остановиться на двух моментах.
Дополнения типа AdBlock и uBlock работают на стороне клиента, т.е. в вашем браузере, на вашем компьютере и никоим образом не нарушают работу серверной части ресурсов, с которыми ваш браузер взаимодействует. Все попытки заявить обратное - ложь и манипуляция, потому что не просматривая рекламу, или прерывая загрузку счётчиков и аналитики вы вызываете у маркетологов жжение в нижней части спины.
Кто-то, как youtube, борется с этим завинчивая гайки и вообще пытаясь запретить просмотр своего сайта с включённым блокировщиком, кто-то, как habrhabr, просто вежливо просит отключить блокировщик, чтобы не лишать сайт части дохода. Иногда это противоборство доходит до смешного, когда владельцы сайтов пытаются притянуть за уши авторское право и утверждают, что модификация кода на клиентской стороне - это его, права, нарушение (дело Axel Springer против Eyeo).
Ещё раз тезисно. Включённый блокировщик рекламы:
Модифицирует только то, что отображается на странице и работает на стороне клиента.
Не нарушает работы серверной части и уж тем более не нарушает авторских прав.
Может сломать работоспособность определённого функционала на некоторых сайтах, вырезав не то или слишком много.
Функциональные моменты
Как следует из сказанного выше, если блокировщик поломал отображение сайта, вырезав "лишний" скрипт или элемент страницы, то это целиком ответственность и головная боль пользователя. Очень часто ломаются уведомления о кукисах, когда само предупреждение вырезается, но на страницу нельзя нигде кликнуть, потому что остался невидимый слой (т.н. оверлей).
Лечится это или своевременным обновлением списков фильтрации, или временным отключением блокировщика, или внесением сайта в списки исключения блокировщика. Или же тонкой настройкой фильтров. И вот, собственно, последний способ - это то, ради чего пишется данный материал.
Если в результате экспериментов с блокировщиком, что-то работает не так как должно, или вам кажется, что что-то не так, то первый шаг - это отключение конкретного дополнения и проверка работы без него. Устранение подобных проблем - ответственность пользователя.
Визуальный шум
Современный веб усилиями маркетолухов неотвратимо превращается в помойку. У пользователя забирают возможность выбирать контент, скармливая бесконечные ленты, подбираемые алгоритмами. Забивают страницы контекстной и нативной рекламой, которая зачастую маскируется под нормальный контент. Забирают дизлайки и минусы, подменяя возможность выражения своего мнения "эмоциями". Всё это в совокупности превращает веб в пёструю ленту, которая довольно сильно грузит пользователя. Заходя в банк, пользователь вынужден продираться сквозь рекламные блоки предложений, прежде чем доберётся до нужного ему раздела. Лента комментариев вместо лаконичного текста и пары иконок пестрит смайликами, как сообщения в аьске от 14-летних подростков. Всё это можно ликвидировать.
Тонкая настройка фильтров
Для примера возьмём один известный в узких кругах околоигровой портал "пдфру", и на его примере изучим, как немного уменьшить визуальный шум на веб-страницах.
Ресурс и удаляемый элемент взяты для примера и демонстрации техники создания фильтров. Точно таким же образом можно уменьшить визуальную захламленность любых сайтов, включая банки, маркетплейсы и новостные ленты.
0. Установим и включим uBlock Origin. Делается это в настройках браузера, или по ссылкам типа https://addons.mozilla.org для ФФ. Подробная настройка дополнения выходит за рамки поста, поэтому если здесь требуется помощь - читайте официальные гайды. Но дополнение работает неплохо и с настройками по умолчанию, только включите региональные списки.
1. Нажимаем правой кнопкой мыши на элемент, который мы хотим ликвидировать
2. Выбираем "Block Element"
3. Интерфейс покажет новое окошко и подсветит элементы, которые попадают в фильтр.
Клик по эмоции подсвечивает слишком мало
Как мы видим, это совершенно не то, что нам требуется. Я нажал на цифру около эмодзи, поэтому выбраны только цифры и то не на всех уровнях комментариев. Если кликнуть на иконку, то будет выбран другой элемент, но тоже не полностью.
Всегда помните, что веб-страницы состоят из блоков. Соответственно вам нужно найти блок, который будет играть роль контейнера для элемента или группы элементов, которые вы хотите убрать.
4. Покликаем по списку в нижней части всплывающего окна и посмотрите, как меняется подсветка элементов. Есть шанс, что фильтр сам "подскажет" блок, который будет содержать нужный контейнер.
5. В нашем случае мы вроде бы нашли нужный, но он относится только к комментариям верхнего уровня. Это становится понятным, если посмотреть на так называемый селектор - в нём написано "comment--root", а "root" это корневой.
Уже лучше, но подсвечиваются только комментарии верхнего уровня
6.1. Попробовать вручную написать или скопировать селектор, который кажется подходящим и вставить его в окошко выше.
На скриншоте выше текст уже выделен - в нашем случае это ##.comment-reactions.reactions и всё, все блоки эмодзи у всех комментариев на всех уровнях подсвечены, как попадающие под правило.
6.2. Можно кликнуть правой кнопкой чуть правее эмодзи не верхнего уровня, как бы пытаясь поймать контейнер, содержащий структурный блок.
И точно так же выбрать "Block Element". Вуаля - селектор сразу содержит чистую строку ##.comment-reactions.reactions без отсылок на уровень комментария.
Клик на условном "ряду", попытка попасть сразу в контейнер, содержащий все элементы
7. Жмём "Create" и фильтр применится автоматически, не требуя даже перезагрузки страницы.
Не бойтесь экспериментировать с текстом селектора в окошке uBlock'a. Если предлагаемый вариант содержит что-то похожее на уникальный идентификатор - уберите этот элемент и посмотрите, что окажется подсвеченным.
Редактирование существующих фильтров
Стоит помнить, что сайты постоянно изменяются. И фильтр, который вы создали проработает до следующего редизайна или изменения, затрагивающего определённую часть страницы. Чтобы проверить, отредактировать или изменить существующие фильтры. Нажмите на икону дополнения и далее на иконку настроек. Затем во вкладке My Filters (Мои фильтры) вы сможете просмотреть, перегруппировать или отредактировать свой список.
Пример списка фильтров. Видны селекторы разной сложности и адреса сайтов, на которые распространяются фильтры.
Этот же путь сработает, если вы случайно создали фильтр, который работает неправильно. Просто удалите его, сохраните настройки, и попробуйте подобрать нужную комбинацию "селекторов", как описано выше. Изменения применяются мгновенно, никаких перезапусков браузера не требуется, максимум - обновление страницы.
Обратите внимание, что фильтры созданные по этому способу распространяются на один конкретный домен, который указан в начале каждой строки. Если абсолютно идентичный селектор будет встречен на другом ресурсе, подобный фильтр применён не будет. Будьте крайне внимательны с глобальными фильтрами, они почти гарантированно поломают какую-либо страницу, поэтому не увлекайтесь и бейте врага точечно.
Возможные нюансы и продвинутые техники
Иногда блоки на странице могут плохо поддаваться идентификации, используя или слишком простые и общие названия селекторов, или наоборот случайные, чтобы затруднить блокировку. Но в большинстве случаев селектор подобрать возможно - пробуйте править его вручную, или используйте кнопку Pick, чтобы найти тот блок, что отвечает вашей задаче.
Инструменты разработчика, блоки и подсветка выбранного элемента на странице. Можно проследить по иерархии дерева вверх до родительского контейнера.
Для тех, кто сразу хочет освоить продвинутые техники, следующий шаг - это использование панели инструментов разработчика. Точно так же нажмите правой кнопкой на элемент на странице и выберите Inspect. Вы увидите иерархическое дерево документа (т.н. DOM), которая и показывает те самые структурные блоки, которые мы искали блокировщиком выше. Чтобы не перегружать один пост, более продвинутые техники работы я оставлю или для следующих материалов, или на усмотрение любознательных пользователей, которые могут сами поэкспериментировать с очисткой веб-страниц от мусора.