Всем привет! Сегодня в данной статье я расскажу, как работает блокировщик рекламы, и как "своими руками" можно удалять элементы на странице, чтобы в дальнейшем они не показывались даже после перезагрузки страницы или запуска этого сайта с новой вкладки.
Если кто не в курсе, блокировщиком рекламы называется расширение в браузере, занимающееся, как ни банально это звучит, удалением ненужных элементов со страницы, в основном различной контекстной или таргетирующей рекламы или рекламы, встраиваемой в потоковое видео, например на Youtube.
Принцип работы
Давайте подробно разберем, как это работает. Adblock уже заранее имеет список фильтрующих элементов в виде текстового файла, в котором написаны адреса существующих сайтов с рекламой, которые отправляют различные медиа-файлы из серверов напрямую пользователю. Все действия по блокировке рекламы происходят на самом компьютере клиента, т.е. пользователя.
Но мы можем выполнить эту операцию самостоятельно, зная id или имя класса (атрибут class) самого элемента, для этого в вашем браузере необходимо найти этот html-элемент. В начале предлагаю выбрать сайт жертвы - это всем известный сайт Mail.ru.
На рисунке видно, в какой рекламный проспект превратилась загруженная страница, на слабых компьютерах она будет загружаться больше минуты. Для начала нажимаем на клавиатуре сочетание клавиш Ctrl+Shift+I для запуска инструмента разработчика, вы можете активировать его самостоятельно, нажав правой клавишей мыши и выбрав пункт "Посмотреть код" в Chrome и "Исследовать элемент" в Firefox. Но я рекомендую использовать сочетание клавиш, так гораздо удобнее.
В данной статье я буду удалять персональную ленту Пульс, после того как мы попали в инструменты разработчика в верхнем левом углу нужно нажать на кнопку "Выбрать элемент на странице и проинспектировать его". Если вам не удастся охватить его целиком, то не страшно, я, например, выбрал только заголовок рекламного блока.
Перемещаясь по дереву элементов во вкладке "Elements" я нашел интересный html-блок с названием класса "pulse-lenta". Его мы и будем удалять.
Выберите вкладку "Консоль" или "Console" и в поле для ввода скопируйте следующий текст:
document.querySelector(".pulse-lenta").remove()
Для других элементов нужно водить ссылку на него в формате:
".[название класса]". Если вместо атрибута class для выбранного элемента имеется только id, то в кавычках нужно указать ссылку на блок в формате:
Если все было выполнено правильно, то элемента больше нет. Но есть одна проблема: он появиться вновь после перезагрузки страницы. Что же в этом случае делать? После загрузки страницы нужно, чтобы данный скрипт мог быть выполнен, для этого необходимо поставить расширение TamperMonkey, которое имеется для Firefox и Google Chrome. Принцип установки расширения простой: вбиваете название в гугл, попадаете на страницу расширения вашего браузера и нажимаете "Установить".
Если для Firefox достаточно нажать по значку правой клавишей мыши, для для Chrome придется нажать на кнопку "Расширения" (значок пазла) и уже в отображаемом списке кликнуть по пункту TamperMonkey. В выведенном меню выбираем пункт "Создать новый скрипт".
Отобразиться редактор наших скриптов. В поле комментария @match необходимо ввести адрес сайта, на котором будет срабатывать наш скрипт. После комментария "use script"; нужно добавить текст нашего предыдущего скрипта. В результате у вас должен получиться следующий код, как на рисунке.
В меню файл нажмите на кнопку Сохранить. После перезагрузки страницы у вас исчезнет блок рекомендаций "Пульс"
PS.
Я не призываю пользоваться данным инструментом всегда, особенно когда вы хотите заблокировать безобидную контекстную рекламу от Яндекс.Директ и Google Adsense. Во-первых, современная реклама научилась менять ссылки на html-элементы, поэтому при блокировки предыдущего блока может появиться новая реклама. Предложенный в статье пример является иллюстрацией работы блокировщиков рекламы и сделан только в образовательных целях.
Во-вторых, даже если вам удалось заблокировать данный баннер, не забывайте, что создатель сайта заработанные с рекламы деньги тратит на поддержку своего проекта на хостинге. Все это останется на вашей совести, но если вам понравился найденный в сети сайт, то не поленитесь отключить свой адблок и кликнуть по ссылке или рекламному баннеру, создателю сайта не повредит лишняя копейка, и ресурс продолжит свою работу.