Adblock своими руками

Всем привет! Сегодня в данной статье я расскажу, как работает блокировщик рекламы, и как "своими руками" можно удалять элементы на странице, чтобы в дальнейшем они не показывались даже после перезагрузки страницы или запуска этого сайта с новой вкладки.

Если кто не в курсе, блокировщиком рекламы называется расширение в браузере, занимающееся, как ни банально это звучит, удалением ненужных элементов со страницы, в основном различной контекстной или таргетированной рекламы или рекламы, встраиваемой в потоковое видео, например на Youtube.

Принцип работы

Предложенный в статье пример является иллюстрацией работы блокировщиков рекламы и сделан только в образовательных целях.

Давайте подробно разберем, как это работает. Adblock уже заранее имеет список фильтрующих html-элементов в виде текстового файла с привязкой к существующим сайтам с рекламой, на которых отображаются различные медиа-данные из серверов напрямую у пользователя. Все действия по блокировке рекламы происходят на самом компьютере клиента, т.е. пользователя.

Но мы можем выполнить эту операцию самостоятельно, зная id или имя класса (атрибут class) самого элемента, для этого в вашем браузере необходимо найти этот html-элемент. В начале предлагаю выбрать сайт жертвы - это всем известный сайт Mail.ru.

Главная страница почтового и поискового сервиса Mail.ru

На рисунке видно, в какой рекламный проспект превратилась загруженная страница, на слабых компьютерах она бы загружалась больше минуты. Для начала нажимаем на клавиатуре сочетание клавиш Ctrl+Shift+I для запуска инструмента разработчика, вы можете активировать его самостоятельно, нажав правой клавишей мыши и выбрав пункт Посмотреть код в Chrome и Исследовать элемент в Firefox. Но я рекомендую использовать сочетание клавиш, так гораздо удобнее.

В данной статье я буду удалять персональную ленту Пульс, после того как мы попали в инструменты разработчика в верхнем левом углу нужно нажать на кнопку Выбрать элемент на странице и проинспектировать его. Если вам не удастся охватить его целиком, то не страшно, я, например, выбрал только заголовок рекламного блока.

Выбранный заголовок элемента Пульс

Перемещаясь по дереву элементов во вкладке Elements я нашел интересный html-блок с названием класса "pulse-lenta". Его мы и будем удалять.

Дерево элементов загруженной страницы сайта с выбранным блоком div

Выберите вкладку Консоль или Console и в поле для ввода скопируйте следующий текст:

document.querySelector(".pulse-lenta").remove()

Результат работы скрипта, запущенного в консоли

Для других элементов нужно водить ссылку на него в формате:
".[название класса]". Если вместо атрибута class для выбранного элемента имеется только id, то в кавычках нужно указать ссылку на блок в формате:

document.querySelector("#<название id>").remove()

Если все было выполнено правильно, то элемента больше нет. Но есть одна проблема: он появиться вновь после перезагрузки страницы. Что же в этом случае делать? После загрузки страницы нужно, чтобы данный скрипт мог быть выполнен, для этого необходимо поставить расширение TamperMonkey, которое имеется для Firefox и Google Chrome. Принцип установки расширения простой: вбиваете название в гугл, попадаете на страницу расширения вашего браузера и нажимаете на кнопку Установить.

Если для Firefox достаточно нажать по значку правой клавишей мыши, для Chrome придется нажать на кнопку Расширения (значок пазла) и уже в отображаемом списке кликнуть по пункту TamperMonkey. В выведенном меню выбираем пункт Создать новый скрипт.

Отобразиться редактор наших скриптов. В поле комментария @match необходимо ввести адрес сайта, на котором будет срабатывать наш скрипт. После комментария "use script"; нужно добавить текст нашего предыдущего скрипта. В результате у вас должен получиться следующий код, как на рисунке.

Полученный результат создаваемого скрипта в TamperMonkey

В меню Файл нажмите на кнопку Сохранить. После перезагрузки страницы у вас исчезнет блок рекомендаций Пульс.

PS.

Я не призываю пользоваться данным инструментом всегда, особенно когда вы хотите заблокировать безобидную контекстную рекламу от Яндекс.Директ и Google Adsense. Во-первых, современная реклама научилась менять ссылки на html-элементы, поэтому при блокировки предыдущего блока может появиться новая реклама.

Во-вторых, даже если вам удалось заблокировать данный баннер, не забывайте, что создатель сайта заработанные с рекламы деньги тратит на поддержку своего проекта на хостинге. Все это останется на вашей совести, но если вам понравился найденный в сети сайт, то не поленитесь отключить свое расширение блокировки рекламы и кликнуть по ссылке или баннеру, создателю сайта не повредит лишняя копейка, и ресурс продолжит свою работу.

Ссылка на канал в Дзен: https://dzen.ru/id/615d5a47470e444b4fc113c7