Super simple DIY ad blocker chrome extension

Hey this will be a quick DIY ad blocker guide. They are incredibly simple to make and they can be a great project to understand how your browser responds/requests data.

Manifest.json

First we will need to create a manifest.json file if you are making this project from scratch. Manifest files are just headers that hold details about the current project. The only two key that are required are “permissions” and the “background”. The rest can just be personal information. Here is my manifest for example.

"permissions":[ "webRequest", "webRequestBlocker", "<all_urls>"] => We want to give permissions to chrome webRequest API, and then the last option is <all_urls>
"background": { "scripts": ["adblock.js"] } => This is the reference to the JavaScript file we will have our main code in

Chrome webRequest

The chrome webRequest API allows us to examine the web request life cycle and provides some events for us to use as entry points to block the ads.

Specifically the onBeforeRequest allows us the entry point we need to add our ad blocker code. It simply means that this event will occur before any TCP connection happens, this is the earliest phase in the life cycle and literally the first thing to happen when your browser wants to go to a URL.

Another one to examine closely is the onBeforeSendHeaders this will also be helpful for stopping stickier unwanted occurrences in the browser. Sometimes injecting code in the headers can be helpful for getting behind other types of ads and restrictions but we will keep it simple for now.

All the code we need is written in roughly 5 lines, and honestly doesn’t require any technically JavaScript knowledge.

chrome.webRequest.onBeforeRequest => How we access the API, the event listener onBeforeRequest will fire before we send request to the url and this will be the earliest and easiest point to block the url.

The listener then has a function inside of it that basically blocks or cancels everything before the request and TCP connection is handled. So if we specify the urls then we can block or cancel everything from that specific URL.

In my example I passed an object of URLs that includes a bunch of domains that are linked to the ads. These types of lists are found online in open-source ad blockers and on github => here is the one I used ( https://github.com/notracking/hosts-blocklists )

Load Unpacked Extensions

In our browser we navigate to chrome://extensions.

Enable Developer Mode by clicking the toggle switch.

Navigate to your project through your local files by clicking Load Unpacked and finding the directory.