Build Your First AdBlocker - Chrome Extension

Summary

In this tutorial, Deb Sage teaches viewers how to create a Google Chrome ad blocker extension. She explains how ad blockers work by blocking requests to advertisers, guides through setting up a manifest file, and demonstrates adding a background script to filter and block specific URLs. The video also covers creating icons and testing the extension in Chrome.

Takeaways

• 😀 Deb Sage is teaching how to create a Google Chrome ad blocker extension.
• 🔍 Ad blockers work by monitoring network traffic and blocking requests to advertisers.
• 📄 A manifest file is necessary for all Chrome extensions and contains important information about the plugin.
• 📚 The manifest file includes properties like name, version, description, permissions, background scripts, and icons.
• 🏗️ Permissions are needed to access certain Chrome APIs, such as the web request and web request blocking APIs.
• 🤖 The background script is used to add event listeners for Chrome events, specifically to intercept and potentially block requests.
• 🛠️ The `chrome.webRequest.onBeforeRequest` event listener is used to check and block requests to potential advertisers.
• 🌐 A filter object is used to specify which sites the callback function should apply to, allowing selective blocking of requests.
• 🖼️ Icons for the extension are specified in the manifest file and should be created in different sizes (16x16, 48x48, 128x128).
• 🚀 To test the extension, enable developer mode in Chrome, load the unpacked extension, and test its functionality by visiting an advertiser's website.

Q & A

What is the main purpose of the video?

The main purpose of the video is to teach viewers how to create a Google Chrome ad blocker extension.

Why does the video creator dislike ads?

The video creator dislikes ads because they find them annoying and prefer not to watch them.

How does an ad blocker work in the context of the video?

An ad blocker works by monitoring network traffic and blocking requests to potential advertisers, thus preventing ads from being displayed on web pages.

What is the first file that needs to be created for a Chrome extension?

The first file that needs to be created is the 'manifest.json', which contains important information about the extension.

What properties should be added to the 'manifest.json' file?

The properties to be added include 'name', 'version', 'description', 'permissions', 'background', 'icons', and 'manifest_version'.

Which APIs are mentioned as needing permissions in the video?

The APIs mentioned as needing permissions are the 'web request' API and the 'web request blocking' API.

What is the purpose of the 'background.js' file in the extension?

The 'background.js' file contains scripts that run in the background, mainly for adding event listeners, which are used to monitor and potentially block requests to advertisers.

How can you block requests to specific advertisers in the extension?

You can block requests by using a filter object in the 'onBeforeRequest' event listener, specifying URLs or regular expressions that match the advertiser's domain.

What is the special permission called 'all URLs' for?

The 'all URLs' permission is used to grant the extension access to all URLs, allowing it to block requests across all websites.

How can you test the functionality of your ad blocker extension?

You can test the extension by loading it in Chrome's 'chrome://extensions' page, enabling developer mode, and then loading the unpacked extension from the ad blocker folder.

What is the final step mentioned in the video for using the ad blocker extension?

The final step is to visit a website like 'zito.com' to see if the requests are being blocked, which would prevent ads from being displayed.

Outlines

00:00

🛠️ Building a Chrome Ad Blocker Extension

In this video, Deb Sage introduces viewers to the process of creating a Google Chrome ad blocker extension. Deb explains her motivation for wanting to block ads, which she dislikes, and proceeds to guide the audience through the development of their own extension. The explanation begins with a basic understanding of how ad blockers work by intercepting network traffic and preventing the browser from sending requests to advertisers. The video then dives into the technical aspect, starting with the creation of a 'manifest.json' file, which is essential for all Chrome extensions. This file contains important information about the plugin, such as its name, version, description, permissions, and background scripts. Deb also discusses the need for permissions to access certain Chrome APIs, such as the web request API and the web request blocking API, and the inclusion of a special permission for 'all URLs'. The tutorial continues with the setup of background scripts and the configuration of icons for the extension.

05:00

🖼️ Creating Icons for the Extension

Continuing from the previous segment, Deb Sage discusses the creation of icons for the Chrome extension. She mentions the importance of having icons in different sizes, specifically 16x16, 48x48, and 128x128 pixels, and provides the paths for these icons in the 'manifest.json' file. Deb then guides viewers on how to create a new folder called 'icons' and suggests creating these icons later, providing a link to some pre-made icons in the repository for those who may not wish to create their own. The focus here is on the visual aspect of the extension, ensuring that it has a recognizable and consistent appearance across different interfaces.

10:04

🚀 Running the Ad Blocker Extension

In the final segment of the video, Deb Sage demonstrates how to run the newly created ad blocker extension. She instructs viewers to enable developer mode in Chrome, navigate to 'chrome://extensions', and load the unpacked extension from the ad blocker folder. Deb explains how to toggle the extension on and off and tests its functionality by visiting a website known for displaying ads. The video shows that with the extension enabled, ads are successfully blocked, demonstrating the effectiveness of the ad blocker. Deb also encourages viewers to do their own research on which sites to block and provides a list of potential advertising sites that can be filtered. The tutorial concludes with a brief overview of how the extension works and an invitation for viewers to like the video and leave comments if they have questions.

Keywords

💡Ad Blocker

An ad blocker is a software tool designed to prevent ads from being displayed on web pages. In the video, the creator discusses building a custom ad blocker extension for Google Chrome. This tool is crucial for blocking requests to advertisers, enhancing user experience by removing annoying ads from web pages.

💡Google Chrome

Google Chrome is a popular web browser developed by Google. The video focuses on creating an ad blocker extension specifically for this browser. It is significant as the platform where the ad blocker will function, highlighting the browser's extensibility and support for custom extensions.

💡Manifest JSON

Manifest JSON is a configuration file required for all Chrome extensions. It contains metadata about the extension, such as its name, version, and permissions. In the script, the creator explains how to set up this file, which is essential for defining the extension's properties and capabilities.

💡Permissions

Permissions in the context of Chrome extensions refer to the access rights granted to the extension to interact with Chrome APIs and perform certain actions. The video mentions needing permissions for APIs like 'webRequest' and 'webRequestBlocking', which are crucial for monitoring and blocking network requests to advertisers.

💡Background Scripts

Background scripts are scripts that run in the background of a Chrome extension, primarily for handling events and performing tasks without user interaction. The video script describes adding event listeners in these scripts to intercept and potentially block network requests, which is central to the ad blocker's functionality.

💡Web Request API

The Web Request API is a part of the Chrome Extensions API that allows extensions to observe and analyze web requests in real-time. The video discusses using this API to monitor requests and decide whether to block them based on their destination, which is key to the ad blocker's operation.

💡Web Request Blocking API

This API is used in conjunction with the Web Request API to block web requests. The video script explains how to utilize this API to prevent the browser from sending requests to certain URLs, effectively blocking ads served by those URLs.

💡Icons

Icons are graphical representations used in the Chrome extension to provide visual cues to the user. The video mentions creating icons of various sizes (16x16, 48x48, 128x128) for the extension, which are displayed in the browser's extension management interface and help users identify the extension.

💡Event Listeners

Event listeners are functions that run in response to specific browser events. In the context of the video, the creator adds an event listener to the 'onBeforeRequest' event of the Web Request API. This listener is used to check the destination of a request and decide whether to block it, which is a core mechanism of the ad blocker.

💡Zito.com

Zito.com is mentioned in the video as an example of an advertising server. The script discusses blocking requests to this domain using a regular expression, which is a practical example of how the ad blocker can be configured to filter out specific ad sources.

Highlights

Introduction to creating a Google Chrome ad blocker extension.

Explanation of how ads are displayed on websites like YouTube through additional requests to advertisers.

Purpose of ad blockers to monitor network traffic and prevent requests to advertisers.

Creation of a 'manifest.json' file necessary for all Chrome extensions.

Description of the 'manifest.json' file properties including 'name', 'version', 'description', and 'permissions'.

Inclusion of the 'webRequest' and 'webRequestBlocking' APIs in the permissions array.

Explanation of the 'background' property and its role in running scripts with Chrome event listeners.

Creation of 'background.js' file for handling Chrome API calls and event listeners.

Use of 'chrome.webRequest.onBeforeRequest' to intercept and potentially block requests.

Implementation of a callback function to cancel requests to specific advertisers.

Introduction of a filter object to specify which sites to apply the callback function to.

Blocking requests to 'Zito.com' using a regular expression pattern in the filter object.

Instructions on how to load the extension in Chrome and enable developer mode.

Demonstration of the extension blocking ads on 'Zito.com' when enabled.

Discussion on researching and compiling a list of sites to block for effective ad blocking.

Encouragement to create a personal list of sites to block for custom ad blocking.

Conclusion and invitation for feedback on the tutorial.

Transcripts

[Music]

what's up people

Deb sage here and in this video I'm

gonna be teaching you 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 it'd be neat to

teach you how to build your own

extension so let's get started how does

an ad blocker work so let's say I want

to watch a YouTube video when I click on

a video Google Chrome my browser sends a

request to YouTube saying I want this

video give it to me

YouTube returns the video it sounds

simple but my browser isn't only sending

requests to YouTube YouTube is telling

my browser hey I want you to send some

more requests to our advertisers

advertiser a advertiser be an advertiser

see and they'll give you back some ads

and will display those ads on the web

page great now I have to deal with these

annoying ads it would be nice if I can

just send a request to YouTube so I can

get my video but block any other

requests to these different advertisers

and that's where ad blockers come in ad

blockers are basically scripts that run

alongside your browser that can monitor

your network traffic and make sure your

browser doesn't send any requests to

potential advertisers so let's jump into

the code so in our ad blocker folder

here we're going to create a file called

manifest Jason which is a file that's

necessary for all Chrome extensions and

it's going to contain all of the

important information about our plug-in

so this is going to be a JSON object so

we're gonna create an empty object and

we're going to add some properties to

this object one of the properties we're

going to add is called name this is just

the name of our plug-in which we can

just say

Deb sage AdBlocker another property we

can add is conversion and this is just

gonna be version 1.0 we can also add a

description this is just going to be I

don't know dev sage AdBlocker tutorial

our fourth property here is going to be

permissions and this is going to be an

array and this is going to be a list of

all of the chrome api's that we want our

plug-in to have access to so what do I

mean by that so let's open up Google

Chrome

let's open up developer tools and let's

go to the console let's type it in

Chrome so this is the chrome object

inside of the chrome object here are a

few of its api's that we can use to

manipulate chrome and to build

extensions with there are actually a lot

more of these api's that we can't see

here because we need certain permissions

to access them and we can't access all

of them directly from the browser and

those api's are what we're going to be

putting in our permissions array so a

few of the api's that we're going to

need permissions for are the web request

API and the web request blocking API we

also need one more permission this is a

special permission called all URLs and

this is just saying I want to grant

permissions for these api's for all URLs

okay so another property we can add is

our background property which is going

to be an object this object is going to

have a property called scripts which is

going to be an array

and this is going to be an array of all

of our background scripts which

essentially are just scripts that run in

the background that mainly contain

chrome event listeners so the name of

our background script is going to be

background j/s alright and another

property we can add is the icons

property which is going to be an object

and this object is going to contain

information about the icons that our

extension is going to have so there are

three main sizes you have to consider

there's the 16 by 16 size and for right

now I'm just gonna put the path we're

gonna create these icons later so we're

gonna basically give a path to the icon

so we're gonna say icons slash logo 16

by 16 dot PNG and the next size we need

to consider is 48 by 48 this is going to

be an icon slash logo 48 by 48 and 128

pixels by 128 this is going to be icons

logo 1 to 8 by 1 to 8 all right so let's

actually create those icons so let's

create our folder

I wouldn't create a new folder called

icons and I actually have some icons

already made and I'm gonna link these in

the repository just in case you don't

feel like creating your own so here the

icon spent a copy call my ad blocker

folder paste those okay now we have our

icons for our extension and the last

property we're going to add is the

manifest version this will need to be to

ok so we're done with our manifest file

so now we can move on to our background

dot JS file this is the only other file

we're gonna need so let's create that

file so new file background is and in

here we're going to be calling our

chrome api's so remember how I said

background scripts are mainly just for

adding event listeners so we're going to

add an event listener to listen for

right before we want to send a request

and with this event listener we're going

to check to see where this request is

going and if it's going to a potential

advertiser we want to block it so let's

do that so let's say chrome dot web

request dot on before request request

should be capitalised dot ad listener

not at event listener I know it's a

little different with Chrome it's just

ad listener and this is going to take in

three arguments the first argument is

going to be a callback function so

function it's going to take in details

which is going to contain details about

the request that we are about to send

we're not actually going to use it we're

just going to return an object that says

cancel true this essentially just blocks

whatever request we are about to send so

this is cool but right now this will be

blocking all of our requests to

everywhere so what we want to do is we

want to add another argument here which

is going to be an object that represents

our filter so which sites do we want to

apply this callback function to which

sites do we want to actually block so

inside of this object we can pass in a

property URLs and it's going to be an

array and here we can list all of the

URLs

that we want to block requests to so

there's this one website called Zito

calm and apparently Zito is a really big

advertising server so it's possible that

when you see an ad that it's from Zito

so let's for example block any requests

that are with that would be going to

Zito so let's go back to our file and

let's block request from Zito so we want

to say star we can use regular

expressions here so star colon slash

slash star Z TOCOM slash star and this

is going to block any requests from HTTP

HTTP whatever this is basically a

pattern that's going to block any

requests coming from anything that looks

like this alright and there's this one

more thing we have to pass in after our

filters object and it's going to be an

array and we're just gonna pass in the

blocking option okay and our plugin is

functional we can actually run this so

how do we do that so let's open Chrome

and let's go to Chrome colon slash slash

extensions and you're going to want to

make sure developer mode is on so I have

it on right now so make sure it's on you

want to go to load unpacked and you want

to go to your ad blocker folder whatever

folder you had it in so I'm gonna go to

ad blocker I'm gonna go to select folder

and it should load up right here and

this button is to toggle your extension

on off and let's try to go to zero com

see what it does look at that zero com

blocked we were just on it not too long

ago but now that we've blocked requests

to Z TOCOM we can't actually get any

information back such as an ad so if I

were to go back and disable this refresh

the page works just fine so I guess the

question is how do you know which sites

the block well that's where you're gonna

have to do your own research I do have a

list of sites you can filter from that

I've found on the internet and so let me

just copy and paste that in here and you

could just compile your own list of

sites that you want to block whether it

be advertising sites or whatever and you

can just pass this in as default filters

and any requests that go to any of these

sites are gonna be blocked and you won't

get any information back from them and

that is a little bit about how to build

an ad blocker Chrome extension if you

liked this video leave a like if you got

any questions leave a comment and yeah

peace

[Music]