Make your first Chrome Extension | Ad Blocker

Google Chrome extensions are programs that can be installed into Chrome in order to change the browser's functionality. There are many amazing extensions on the web-store but personally, my favourite one is ad-blocker.

What is an ad blocker?

An ad blocker is a piece of software that blocks network requests to and/or from advertising servers. Well, that's a bookish definition. Let's understand it in a better way.

So let's say, I want to watch a YouTube video. When I click on the video my browser i.e. Google Chrome sends a request to YouTube asking it to send that particular video. Then YouTube tells the browser that I am sending the video but before that please send some requests to my advertisers as well. This way you get back the ads and the video.

Now, what do ad blockers do? It blocks any requests to these advertisement servers. It runs alongside the browser and checks the network traffic to prevent the browser from sending the requests to advertisers.

Let's jump into the code

Firstly let's make the project structure as given below.

Now we'll create our manifest.json file which will contain all the important information about the extension like name, version etc.

{
  "name": "Aliferous Adblocker",
  "version": "1.0",
  "description": "Adblocker chrome extension",
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "<all_urls>"
  ],
  "background": {
    "scripts": [
      "background.js"
    ]
  },
  "icons": {
    "16": "icons/logo_16.png",
    "48": "icons/logo_48.png",
    "128": "icons/logo_128.png"
  },
  "manifest_version": 2
}

The icons mentioned above are the same image of different sizes i.e. 16X16, 48X48, 128X128. This is the logo of the ad blocker. You can choose any image and then change its sizes here. Add all the three logos in the icons folder named logo_16.png, logo_48.png and so on.

Now let's create the background.js file. In this file we'll call the chrome API and add event listeners. We'll add an event listener just before sending the request so that it can check the request and block it if needed.

const filters = [
    "*://*.doubleclick.net/*",
    "*://partner.googleadservices.com/*",
    "*://*.googlesyndication.com/*",
    "*://*.google-analytics.com/*",
    "*://creative.ak.fbcdn.net/*",
    "*://*.adbrite.com/*",
    "*://*.exponential.com/*",
    "*://*.quantserve.com/*",
    "*://*.scorecardresearch.com/*",
    "*://*.zedo.com/*",
]

chrome.webRequest.onBeforeRequest.addListener(
    function(details) {return {cancel:true}},
    { urls: filters},
    ["blocking"]
)

In the constant "filters", you can add the servers from where your ads are coming. And that's it! You're done!🥳

Let's run your own ad blocker!

1. Go to chrome://extensions/
2. Switch on developers mode
3. Click on load unpacked and select the folder in which you made the ad blocker
4. Now try going to any of the websites given in the filters and you'll see that it's blocked.

If you see an output like this, it means you successfully made your first chrome extension!!🎉

You can get the whole source code here👇
https://github.com/sumana2001/Ad-Blocker