Build your own Ad Blocker

I’ve always wondered if I could make my own ad blocker — to my surprise, in about five lines of JavaScript, we can!

This is what we’ll see when chrome blocks a URL with our custom Ad Blocker

The Source Code

The chrome browser exposes a webRequest API that enables developers to observe and analyze traffic and to intercept, block, or modify requests in-flight.

Using this API, we can develop a URL blocking extension that’ll stop any requests to doubleclick.net (but we could use any URL in practice):

chrome.webRequest.onBeforeRequest.addListener(
  function(details) { return {cancel: true}; },
  { urls: ["*://*.doubleclick.net/*"] },
  ["blocking"]
);

The onBeforeRequest event allows us to perform some custom action before a request occurs. In fact, it’s called before any TCP connection is made.

By registering a listener with a function that returns {cancel: true} allows us to stop the request. We can also specify which URL(s) it will block, which can be defined block both HTTP as well as HTTPS, and the even the subdomains of doubleclick.net by using “*://*.doubleclick.net/*".

Note: More than one URL could be targeted, but for the sake of brevity in this post, I’ve decided to just focus on doubleclick.net which is a popular source of web advertisements. A broader list of advertisement sources would be necessary to be most effective.

🧙‍✨Believe it or not, that’s all of the “real” code you need to write for this to work.

Now we just need to create an manifest.json file to add some extra metadata about the extension and give it the necessary permissions:

{
  "name": "cube",
  "version": "1.0",
  "description": "Chrome URL Blocking Extension",
  "permissions": ["webRequest", "webRequestBlocking", "<all_urls>"],
  "background": {
    "scripts": ["background.js"]
  },
  "manifest_version": 2
}

Note: the background.js file contains the previously shown JavaScript code that contains the core functionality for the extension.

That’s it! We’ve created all of the necessary files to load our custom chrome extension. They should be sitting in their own directory, somewhere on your local filesystem so they can now be loaded as an extension.

Loading the Extension

1. In your browser, open the Extension Management page by navigating to chrome://extensions or by clicking on the Chrome menu, hovering over More Tools, and then selecting Extensions.
2. Enable Developer Mode by clicking the toggle switch next to Developer mode.
3. Click the LOAD UNPACKED button and select the extension directory, wherever it exists on your local filesystem.
4. Go to doubleclick.net to check that it’s actually being blocked!

We’ll see these new errors in our console, which is what we want!

CUBE (Chrome URL Blocking Extension)

You can also find a slightly different version of the code shared in this post on GitHub: github.com/picatz/cube

Please feel free to improve and customize as you like. It’s just a start, but is exactly what I wish I had when I began looking into this topic.

Until next time, that’s all folks!