Привет всем, сегодня я собираюсь использовать некоторые базовые плагины программирования и браузера, чтобы сделать простой рекламный блокировщик. Потому что … почему бы и нет?
Я буду использовать команду CSS, которая может скрыть любой элемент на странице:
Дисплей: Нет! важный
Чтобы эта команда работает для каждой страницы, которую я посещаю с браузером, я внедряю ее в специальное расширение.
Что такое расширение?
Расширения (или плагины) улучшают основные функции браузера. Они позволяют быстро сохранить видео с YouTube, узнать, какой шрифт используется на веб -странице, или делают все, что они запрограммированы.
Я использую Google Chrome для всех шагов, которые связаны с расширениями. У большинства других браузеров есть свои плагины, и работа с ними более или менее похожа на работу с расширениями в Google Chrome.
Мне понадобится расширение, которое будет работать с CSS и применить наше команду к правильному стилю элемента. Я собираюсь выбрать расширение под названием Пользователь CSS , но не стесняйтесь выбирать любое другое расширение, которое применяет пользовательские стили CSS.
Примечание: безопаснее загрузить расширения из официального веб -магазина Chrome, так как Google проверяет эти расширения на наличие вирусов, прежде чем публиковать их.
Во -первых, перейдите на страницу плагина и нажмите «Установить». Браузер спросит вас, если вы уверены – я. Когда все будет готово, вы увидите значок расширения и выявление инструментов в верхнем правом углу вашего браузера. С этого момента расширение будет работать на каждой новой странице, которую вы открываете.
Как блокировать рекламу
Откройте страницу и подождите, пока нежелательный баннер покрывает экран. Затем найдите код, который заставляет баннер появляться: щелкните правой кнопкой мыши область темного и выберите «Просмотреть код». Ищите имя элемента в кавычках после класс = командование
Например, линия может выглядеть следующим образом:
Вы можете видеть, что всплывающее окно, которое я хочу заблокировать, имеет класс под названием b-popup Анкет Класс – это оператор CSS, который дает инструкцию, подобную «выводу все, что принадлежит этому классу следующим образом. ” Если я тренирую браузер, чтобы скрыть все в классе B-Popup, это будет выполнена миссия.
В CSS имена классов начинаются с периода, а команды, которые применяются к классу, заключены в кудрявые скобки. Итак, мой код для настройки всплывающего окна должен выглядеть примерно так:
.b-popup {некоторые команды}
Все, что мне нужно сделать, это написать внутри скобки Наша команда скрывать элементы с экрана: .b-popup {display: none! Важно;}
Теперь на той же странице с объявлением нажмите значок расширения, включите его и вставьте нашу команду на пустую строку.
С этого момента расширение всегда будет отслеживать этот веб -сайт. Более того, если другие страницы попытаются показать аналогичные всплывающие окна, расширение также заблокирует эти всплывающие окна.
Вот и все! Ваш личный блокировщик рекламы готов к работе. Всякий раз, когда вы сталкиваетесь с чем -то раздражающим на веб -сайте, просто получите название этого элемента и добавьте соответствующий класс в расширение.
Если вам нравится этот пост, следите за новыми. Я буду публиковать несколько советов для начинающих программистов.
Также не стесняйтесь обращаться с любыми вопросами, если хотите чтобы изучить веб -разработку через строительство практических вещей 🚀
Оригинал: “https://dev.to/andrewu/create-your-own-ad-blocker-in-3-minutes-5hfh”