Build Your First AdBlocker - Chrome Extension
Summary
TLDRIn 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
🛠️ 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.
🖼️ 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.
🚀 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.
Mindmap
Keywords
💡Ad Blocker
💡Google Chrome
💡Manifest JSON
💡Permissions
💡Background Scripts
💡Web Request API
💡Web Request Blocking API
💡Icons
💡Event Listeners
💡Zito.com
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]
Посмотреть больше похожих видео
How To Set Up & Install The Facebook Pixel in 2024
Introduction to HTML | An HTML5 Tutorial for Beginners
How To Delete All Watch Later Videos On YouTube At Once (2024)
Setting Up Vite and React for Chrome Extension Development
Head Tag in HTML | An HTML5 Head Element Tutorial
LinkedIn Data Scraping Tutorial | 1-Click To Save to Sheets
5.0 / 5 (0 votes)