Create Your Own Ad Blocker in 3 Minutes [Tutorial]

Beat ads the hacker way with this quick guide.

Today I'm going to use programming and filters to make our own ad blocker. Because why not?

I'll be using a CSS command that can hide any element on a page: display:none !important. To make sure this command works for every page I visit with a browser, I'll embed it in a special extension.

What's an extension?

Extensions (or plugins) enhance a browser's basic features. They let you quickly save videos from YouTube, find out what font is used on a web page, or do whatever else they're programmed for.

I’ll use Google Chrome for all of the steps that involve extensions.
Most other browsers have their own plugins, and working with them is more or less similar to working with extensions in Google Chrome.

I’ll need an extension that will work with CSS and apply our command to the right element style. I’m going to choose an extension called User CSS, but feel free to pick any other extension that applies custom CSS styles. Note: It's safer to download extensions from the official Chrome Web Store since Google checks these extensions for viruses before making them public.

First, go to the plugin page and click "Install." The browser will ask you if you're sure—I am. When everything's ready, you'll see the extension icon and a tooltip in the upper-right corner of your browser. From this point on, the extension will run on every new page you open.

How to block ads

Open the page, and wait for the unwanted banner to cover the screen. Then find the code that makes the banner appear: right-click the dark area, and select "View code". Look for the name of the element in quotation marks after the class= command.

For example, the line can look like this:

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

In CSS, class names start with a period, and the commands that apply to the class are enclosed in curly brackets. So my code for configuring the pop-up should look something like this:

.b-popup {some commands}

All I have to do is write inside the brackets our command to hide elements from the screen:

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

Now on that same page with the ad, click the extension icon, turn it on, and
paste our command on a blank line.

From now on, the extension will always monitor this website. Moreover, if other pages attempt to show similar pop-ups, the extension will block those pop-ups too. 

That's it! Your personal ad blocker is ready to go. Whenever you come across something annoying on a website, simply get the name of that element, and add the relevant class to the extension.
For more stories for beginner programmers read my blog for Practicum by Yandex.