Building Your Own Google Chrome Ad Blocker Extension: A Step-by-Step Guide

Ever wondered how to create a Google Chrome ad blocker extension ? So I absolutely hate having to watch ads they’re one of my least favorite things so that’s why I have an ad blocker extension and I thought how can I build my own extension?

Step 1: Understanding How Adblockers Work

To begin, let’s understand the functioning of ad blockers. When you visit a website or watch a video, your browser sends requests not only to the main content provider (e.g., YouTube) but also to advertisers who want to display ads. Adblockers come into play by intercepting and blocking these requests to prevent ads from being displayed.

Step 2: Creating the Chrome Extension

Now that we understand the concept, let’s create a basic Chrome extension. Here’s a simplified overview of the steps involved:

Create a new directory for your extension.

Inside the directory, create a manifest file (manifest.json) that defines the extension’s details, permissions, and background scripts. Below is the manifest file we will be using.

{
    "name": "Simple Adblocker",
    "version": "1.0",
    "description": "This extension can be used to block ads.",
    // list of all chrome api we need access to
    "permissions": ["webRequest", "webRequestBlocking", "<all_urls>"], 
    "background": {
        "scripts": ["background.js"]
    },
    "icons": {
        "16": "ico_16x16.png",
        "48": "ico_48x48.png",
        "128": "ico_128x128.png"
    },
    "manifest_version": 2
}

Add a background script file (background.js) to handle the blocking logic. Below code snippet showcases the use of the chrome.webRequest.onBeforeRequest event listener in a Google Chrome extension. Let's break it down:

1️⃣ defaultFilters is an array that contains URL patterns of various advertising domains. These patterns define the URLs to be blocked by the ad blocker.

2️⃣ The chrome.webRequest.onBeforeRequest.addListener function sets up an event listener that triggers before each network request is made. It takes three arguments:

• The first argument is an anonymous function that handles the event. In this case, it returns an object { cancel: true }, indicating that the request should be canceled.
• The second argument is an object that specifies the URL patterns to match against. Here, we pass defaultFilters, which contains the list of URLs to block.
• The third argument is an array of extra options. In this case, ["blocking"] indicates that the request should be blocked.

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

]

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

By using this code snippet within a Chrome extension, you can effectively block requests to the specified advertising domains, preventing ads from being displayed in the browser.

Customize the manifest file to include the necessary permissions and specify the background script.

Step 4: Installing and Testing the Chrome Extension

After implementing the code, install the extension by loading the unpacked extension in Chrome’s Developer mode. Visit websites with ads, and witness the magic as the ads vanish from your screen!

Here’s the link for the repo with complete code for the extension — https://github.com/lavisor/AdBlocker_extension

✨ Building your own ad blocker extension empowers you to have a more streamlined browsing experience. Customize it to suit your preferences and bid farewell to pesky ads!