Делаем свой блокировщик любой рекламы за 3 минуты
vk f t

Делаем свой блокировщик любой рекламы за 3 минуты

Хакер­ский метод побе­дить рекла­мо­да­те­лей

Сего­дня мы дела­ем соб­ствен­ный бло­ки­ров­щик назой­ли­вой рекла­мы с про­грам­ми­ро­ва­ни­ем и филь­тра­ми. Пото­му что поче­му бы и нет? Для это­го мы будем исполь­зо­вать коман­ду в CSS, кото­рая скры­ва­ет любой эле­мент на стра­ни­це — display:none !important. Что­бы она рабо­та­ла на всех стра­ни­цах в бра­у­зе­ре, мы вста­вим ее в спе­ци­аль­ное рас­ши­ре­ние.

Что такое расширение

Рас­ши­ре­ния (их ещё назы­ва­ют пла­ги­на­ми) уве­ли­чи­ва­ют стан­дарт­ные воз­мож­но­сти бра­у­зе­ра. Они помо­га­ют быст­ро сохра­нить видео с YouTube, узнать, что за шрифт исполь­зу­ет­ся на стра­ни­це, или дела­ют что угод­но ещё, в зави­си­мо­сти от их воз­мож­но­стей.

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

Нам пона­до­бит­ся рас­ши­ре­ние, кото­рое уме­ет рабо­тать с CSS и под­став­лять нашу коман­ду в нуж­ный стиль эле­мен­та. Мы оста­но­ви­лись на User CSS, но вы може­те выбрать любой дру­гой вари­ант, кото­рый спо­со­бен рабо­тать с поль­зо­ва­тель­ским CSS. Без­опас­нее все­го ста­вить рас­ши­ре­ния из офи­ци­аль­но­го интернет-магазина Chrome — перед тем, как попасть туда, они про­ве­ря­ют­ся на виру­сы.

Сна­ча­ла захо­дим на стра­ни­цу пла­ги­на и нажи­ма­ем кноп­ку «Уста­но­вить». Бра­у­зер спро­сит вас, точ­но ли вы хоти­те это сде­лать — под­твер­жда­ем. Когда всё будет гото­во, в пра­вом углу бра­у­зе­ра появят­ся соот­вет­ству­ю­щий зна­чок и всплы­ва­ю­щая под­сказ­ка. С это­го момен­та рас­ши­ре­ние нач­нёт рабо­тать со все­ми новы­ми стра­ни­ца­ми, кото­рые вы буде­те откры­вать.

Как заблокировать рекламу


Пока­зать всплы­ваш­ку

Я — урод­ли­вое назой­ли­вое окно.

Закрой­те меня!

Мы спе­ци­аль­но сде­ла­ли эту стра­ни­цу со всплы­ва­ю­щим окном, что­бы вы мог­ли на ней потре­ни­ро­вать­ся. Теперь доба­вим в наш бло­ки­ров­щик пра­ви­ло, кото­рое убе­рёт назой­ли­вый кон­тент навсе­гда.

Для это­го откры­ва­ем стра­ни­цу, дожи­да­ем­ся, пока неже­ла­тель­ный бан­нер закро­ет весь экран, а затем нахо­дим код, кото­рый это дела­ет: щёл­ка­ем пра­вой кноп­кой мыши на затем­не­нии и выби­ра­ем «Посмот­реть код». Нас инте­ре­су­ет назва­ние это­го эле­мен­та, оно идёт в кавыч­ках после коман­ды class=.

В нашем слу­чае стро­ка пол­но­стью выгля­дит так:

    
language: HTML
<div class="b-popup" id="popup1" style="">

Ско­пи­ро­вать код
Код ско­пи­ро­ван

Видим, что всплы­ваш­ка, кото­рую мы хотим забло­ки­ро­вать, име­ет класс b-popup. Класс — это инструк­ция в CSS, кото­рая гово­рит при­мер­но так: «Всё, что име­ет такой класс, выво­ди таким-то обра­зом». Если мы научим бра­у­зер скры­вать все объ­ек­ты с клас­сом b-popup, мы добьём­ся сво­ей цели.

В CSS назва­ние клас­сов начи­на­ет­ся с точ­ки, а всё, что нуж­но при­ме­нить к это­му клас­су, пишет­ся в фигур­ных скоб­ках. Поэто­му в общем виде наша коман­да, кото­рая настра­и­ва­ет всплы­ваш­ку, будет такой:

    
language: CSS
.b-popup {тут какие-то команды}

Ско­пи­ро­вать код
Код ско­пи­ро­ван

Оста­лось в скоб­ках напи­сать коман­ду, кото­рая скры­ва­ет эле­мент с экра­на:

    
language: CSS
.b-popup {display:none !important;}

Ско­пи­ро­вать код
Код ско­пи­ро­ван

И теперь на этой же стра­ни­це с рекла­мой нажи­ма­ем на зна­чок рас­ши­ре­ния, ста­вим пере­клю­ча­тель в поло­же­ние On и встав­ля­ем на пустую стро­ку нашу коман­ду:

Как сделать блокировщик рекламы: нажимаем на значок расширения, ставим переключатель в положение On и вставляем на пустую строку нашу команду

Теперь это рас­ши­ре­ние все­гда будет сле­дить за этим сай­том. И даже если такая же всплы­ваш­ка будет на дру­гих стра­ни­цах — она тоже забло­ки­ру­ет­ся. 

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

Ещё по теме