Create Your Own Ad Blocker in 3 Minutes ⏳

#css #javascript #beginners #codenewbie

Hey everyone, today I'm going to use some basic programming and browser plugins to make a simple 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="">

You can see that the pop-up I want to block has a class called b-popup. A class is a CSS statement that gives an instruction like, "Output everything which belongs to this class in the following way." If I train the browser to hide everything in the b-popup class, that'll be mission accomplished.

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.

If you enjoy this post, keep an eye on some new ones. I'll be posting some tips for beginner programmers.

Also feel free to reach out with any questions if you want to learn Web Development through building practical things 🚀