Build Your First AdBlocker - Chrome Extension

What is an Ad Blocker?
An ad blocker is a piece of software that blocks network requests to and/or from advertising servers.
⭐ Github Code
github.com/pkellz/devsage/tre...
📕 Expand your JavaScript knowledge by downloading my latest e-books!
payhip.com/DevSage
🤖 Join me on Discord
/ discord
👕 DevSage Merchandise
cottonbureau.com/people/devsage

[@DevSage]

Whoops, looks like I goofed at the very end with the defaultFilters. defaultFilters should be moved to the top of the file. And it should also be initialized with "const" (const defaultFilters = ...) The code should be correct in the Github repo!

[@guimguinleo]

It does not work, Google says that I CANNOT USE Manifest V2, only V3. I tried to use every method that I could find, and it did not work!

[@0necentoff]

just change to V3

[@RAMANKUMARGCEBIT]

very helpful. deeply grateful for making such a simple to understand video.

[@emeraldthunder]

Thank you for this. It is a practical thing to make while learning.

[@DevSage]

Glad it was helpful!

[@carlosalfredo657]

Nice video man! Your first chrome extension, easy and deadly simple! The only observation I have is that is a little slow, I tried watching the video at 1.25x speed and then 1.5x speed and it's better. Nice voice too.

[@hericklenin]

Thanks for this, it helps a lot!

[@Eduardo-fx9ih]

very good!!!! this is just an amazing startup for a custom and powerfull extension! great!

[@DevSage]

Glad it helped Eduardo!

[@Geomaverick124]

Hey Bro! Codingphase sent me here. Keep up the good work!

[@DevSage]

I appreciate that man!

[@ayushdwivedi3769]

awesome man...loved it...liked and subscribed...keepup the good work

[@DevSage]

Thank you, and welcome!

[@emeraldthunder]

Thank you this is really helping me write browser extensions.

[@DevSage]

No problem

[@veerbal1]

Really useful content, thank you

[@tonyg_nerd]

A functional Chrome extension with demo in 13 minutes. Kewl. Thanks

[@trap_time]

HOLL UP ON THAT INTRO 🔥

[@ruaidhrimulgrew6568]

Amazing tutorial all round

[@DevSage]

Thank you!

[@FlySoloG]

love it!

[@dadebarlow1883]

Wow. Thank you for this video. Can you give an example of how this could be done using a RegEx? For instance, block pages whose request contains a certain pattern. I'm thinking of XSS, specifically.

[@kartheek6495]

Thank you so much for explaining how it works and how to do it practically. could you please also explain, what the use of manifest version is and how to use manifest version 3?

[@fancyspirits3424]

Thanks it really worked

[@stipriausias]

Holly shit. I was always thinking that add blockers are really complex things. But no it is quite simple. Thank you man for a nice video.

[@akalabayapal9634]

Thanks very much Sir. . this will help me to complete my antivirus project

[@vaishnaviravibhavsar1270]

project sounds interesting could you provide me your Github

[@ne9835]

Hey man CodingPhase sends me here, you can code man keep doing your thing!

[@DevSage]

Appreciate ya

[@ne9835]

@@DevSage Yeah man👌

[@adriansrfr]

Ty!

[@nataliapalweski2072]

can you please make video playlist for only making chrome extension beginner to advance. because right now in this extension we don't have any options to add custom url's etc

[@programmingholic]

Thanks so much ,

[@Kevin-te7rr]

Hey bro, CodingPhase sent me here, can you walk us through on how you build your portfolio subscribed : )

[@jacobweaver8505]

where could I find a list of more filters and do the filters have to be a URL or can they be things that block in-page pop-ups ("subscribe to this newsletter") type stuff?

[@haopeiyang3443]

Great video. Something I've always wanted to learn is how to start building a framework like VueJS. Maybe you can show us!

[@DevSage]

That's interesting! I'll look into it.

[@xiaolong9446]

Amazin!!!

[@devartspecial1486]

JLP :D

[@anuramkalyan875]

Thanks!

[@DevSage]

No problem!

[@prestonjudearnold2814]

thank you

[@escapefelicity2913]

well done

[@adityavaste3732]

great video..

[@DevSage]

Thanks!

[@JeffPittman]

Awesome

[@PlushCreativeDzyneLLC]

Where do we get the logos from? Do we have to download images with those specific sizes? Or download images and resize them? I tried resizing the images I downloaded by pixel size and they are very tiny. I need help

[@heuheuheh]

Hey man, thanks for the video. I would like to build an extension that removes certain elements from a specific site, for example, an extension that removes the progress bar on KZbin (it can be easily removed by inspecting the page, but the point is that the extension would do it for you without you needing to do it all the time). Can you recommend me a good learning resource?

[@DevSage]

I would probably look through the code for some of these sample Chrome extensions to get more familiar developer.chrome.com/extensions/samples And also developer.chrome.com/extensions/getstarted

[@heuheuheh]

@@DevSage Will check it out, thanks again! Cheers!

[@jasonstatham2422]

Hey I want to know the name of the tune that you have played in the beginning 😂

[@DevSage]

Something I made with Mixcraft

[@es_stinkt_puhfelix6293]

amazing tutorial. 6 stars out of 5 i swear

[@ambujsahu8162]

nice video

[@auroraiiit5765]

@DevSage how can we check the functionality of any existing chrome extension.. i.e. what is a way to get an idea of code for an existing extension?

[@DevSage]

I would start here gist.github.com/paulirish/78d6c1406c901be02c2d

[@anzaralim3616]

All those AD networks want your location 😂

[@viridiantelamon]

I know this video is a bit old, but is there a way to make this compatible with Fire Fox? Thank you in advance. Also, great video.

[@mtaskomur]

it worked thanks. but I couldn't block the ads coming in between youtube videos. what is the way to it?

[@inspectorlunge3887]

@DevSage Do you know if this could all be coded in notepad, or would I need an API/sdk?

[@DevSage]

You can code it in notepad. At the end of the day it can be coded in any text editor. You'll just take the plugin folder and upload it to Google Chrome

[@inspectorlunge3887]

DevSage Okay, that's a relief, thanks. I'm stuck coding on notepad in windows 98 at the moment, because of a broken ac adapter for a newer machine. If I take the win98 machine to the public library though I could transfer this to my Android phone with their computers.

[@RetroEcoChicken]

the spaces in manifest are very important

[@myithspa25]

Something on KZbin has updated and it's not blocking ads. It doesn't block the video, but if I click the thing to go to their website, *then* it blocks.

[@jashimkhan3159]

Awesome Tutorial!!! Subscribed..........

[@DevSage]

Thank you!

[@jashimkhan3159]

@@DevSage Love from Bangladesh......

[@ishaantek]

Hi there. thank you so much for the video. Can you tell me how to block more than one website? Thank you!

[@sticktock2448]

Here after my encounter with KZbin's anti adblocker campaign.

[@davidsupolik1860]

i have like 1000 rows of ad sites if you want.

[@sticktock2448]

@@davidsupolik1860 Thanks for the offer, not too long after viewing this video, I started experimenting with some things. I’ve found that refreshing the page several times while in the compatibility mode in the inspection viewer window will allow you to bypass ads. If the Adblocker I am using hasn’t already been updated and it’s just confirmation bias.

[@PlushCreativeDzyneLLC]

I don't even see ad-blocker folder on my PC at all. Not sure if I need to download an ad-blocker.... Even after downloading ad-blocker, the app is not showing up on my PC.

[@drool3616]

great video dude but i have a problem: Manifest is not valid JSON. Line: 1, column: 1, Unexpected token. this showed up when i loaded the adblocker and i'm just wondering where i went wrong

[@joe-zn4hb]

i did exactly what he did yet i am getting pop ups with errors when i try to load it as an extension, it says, "Required value 'version' is missing or invalid. It must be between 1-4 dot-separated integers each between 0 and 65536. Could not load manifest." However, my version and manifest_version are both correct to the video and correct to what the pop-up says, can anyone help me out here?

[@hanjelly5410]

great video! Q: which extension in your VSCode do you have to give these coding hints for the chrome extension dev coding? eg: how your VSCode know the "chrome" and "addEventListner()" functions?

[@TG-wg4tw]

I'm wondering this as well. Have you found it yet ?

[@wasted-o453ahmad6]

tabnine

[@hrishikssh]

brother , the extension is not blocking the pages i want it to .. can u tell me a solution

[@amuga_1]

blocking the money thirsty advertisers yes! I love it !

[@thegamerdevil6883]

Does this adblocker word with youtube? Also, can you make a Part 2 showing how to make it undetected?

[@Tec4Help]

it is undetected.

[@jorginh_o]

@DevSage I like the tutorial. Very noob friendly. :) Is there any way to make it so background.js will upload as I get an error. :(

[@jorginh_o]

| It won't even show the manifest.json file when I try to upload. :|

[@DevSage]

Are you using the code in the repo?

[@jorginh_o]

@@DevSage Yeah..

[@georgilos9899]

Any idea why google extentions fail to upload the backgroud script (Could not load background script 'background.js'. Could not load manifest.)

[@1985altan]

mine says "background.ks" even the file name extension is "js"

[@georgilos9899]

@@1985altan is it recognized as a JavaScript file in your editor ?

[@adityavaste3732]

How do I get a list of filter keywords? Does anyone know? Please suggest.

[@nguyencaotai412]

You can block ads to google?

[@andymarkov8081]

I get two errors. This is the first one --- "Uncaught ReferenceError: defaultFilters is not defined" And this is the second one --- "Uncaught ReferenceError: Cannot access 'defaultFilters' before initialization"

[@DevSage]

Look at the pinned comment

[@akashreddyjammula]

Will this works with blocking youtube adds.

[@mamedulislam2629]

Great

[@DevSage]

Thanks!

[@dmoney_thegreat]

would you be able to do a video using manifest 3?

[@DevSage]

I'll definitely consider it

[@powerebyAI]

hi this software cannot block youtube ads. how can I make him prevent this?

[@PTS8]

im getting error on manifest where we did it 2

[@vntconcept]

how to build adblock for wordpress plugin to stop redirect page?

[@DevSage]

I have no idea

[@fu2201]

Failed to load extension File ~\Desktop\AdBlocker Error Could not load background script 'background.json'. Could not load manifest.

[@Jacob13044]

it should be manifest.json and background.js not background.json

[@jerin_stephen]

how to do it for fire fox

[@samuelyarasani3556]

Great vid, but the thumbnail looks a lot like fiership's

[@DevSage]

Thanks. The thumbnail is inspired by Fireship

[@shyama5612]

Great intro. Does this work in 2023?

[@sarthakrana3703]

BUT HOW TO MAKE KZbin VIDEO AD BLOCKER ?

[@winniepooh2533]

Could not load icon 'icons/logo_16x16.png' specified in 'icons'. Could not load manifest.

[@winniepooh2533]

I can't post it in Chrome Extensions....Please help me.....

[@astronaut736]

bro, I tried your video tutorial but it does not work on youtube it not blocking ads on youtube so please tell me how to enable the blocking feature in youtube.

[@DevSage]

Not sure

[@astronaut736]

@@DevSage ok bro but please check that and tell me

[@DevSage]

@@astronaut736 I think you could figure it out if you did your own research

[@astronaut736]

​@@DevSage ok bro, I will try to thank you very much for your tutorial it will work on other websites except youtube.

[@garrettmcguire5454]

When on chrome extensions, i load unpacked, then select my ad-blocker folder it gives me this error. "Manifest is not valid JSON. Line: 1, column: 1, Unexpected token." My code is identical to yours. any idea"s?

[@garrettmcguire5454]

disregard the above, i fixed it!

[@YouTubeMillionaire456]

how?

[@saumyaranjan7703]

@@garrettmcguire5454 how did u resolve that i 'm getting the same error can u plz help me.

[@izharahmed7463]

can i block youtube ads

[@blecomp]

Hello friend, first, great video, thanks for sharing. But where can I find the references of chrome object? thanks again cheers

[@DevSage]

developer.chrome.com/extensions/devguide

[@escapefelicity2913]

I need an extension to stop mouseovers

[@sefe4558]

it gives me an error on default filters what should i do ?

[@scottpizzakingdom]

i have the same problem

[@ThunderStormFortnite]

Uncaught SyntaxError: missing ) after argument list Context _generated_background_page.html Stack Trace background.js:19 (anonymous function)

[@DevSage]

Looks like you have a syntax error in background.js

[@user-ez6dn5do9p]

Hey man, could you create a chrome extension to automatically save liked facebook videos?

[@DevSage]

As in, is it possible? Yeah I don't see why not,

[@user-ez6dn5do9p]

@@DevSage As in i tried building it but failed

[@hemangchaudhary4700]

Hey DevSage! So Can I Just show and build this one for my channel? WIthout all your logos and I'll change some of the code too.. By The way this is NON MONETIZATION

[@DevSage]

Sure

[@hemangchaudhary4700]

@@DevSage Thanks :)

[@bu1491]

Bro I want to build an extension. I have no programming experience just a dope idea. Please help me.

[@DevSage]

What's your idea?

[@bu1491]

@@DevSage I want to build an extension that will allow me to "book" "buy" or "bid off a KZbin video. For example, It would allow me to buy your course straight from your video. Or buy/bid on a DIY item from a content creator. It's a marketplace extension. Can we collab?

[@bu1491]

@@DevSage is this not possible?

[@DevSage]

@@bu1491 Sorry for late reply! I think that it's technically 'possible' but not very probable. Don't get me wrong, at first read I thought "wow this sounds like a pretty neat idea" but then I started thinking of use cases. Who is the target audience? Is it the people who want to sell their products via the extension? or is the target audience people who are looking to buy? If it's the first, then you would have a whole lot of sellers and little buyers. If it's the second, I don't know if people are so eager to spend money that they would download an extension to do so (maybe they would be). Then I thought about how buyers and sellers would actually even communicate with each other. A buyer extension would have to 'be aware of' the fact that there is something available to buy on this page. And I suppose that could be possible, with some database work. But there are so many other questions out there.

[@jackleslie5612]

why does it not work for me

[@pavansanthosh8085]

That's great, as a junior Web developer can you suggest me some projects

[@Ndzzle]

What are you trying to accomplish? Looking for a web dev career and need project ideas for your portfolio? The best advise for that situation is to build real world projects. By that I mean building a restaurant website, a realtor (houses) website, ecommerce, ext. Then buy domains for them and host them live. Add these sites to your resume as client work. Now you have real world experience. Just gotta think outside the box to get ahead!

[@himanshikataria1231]

Hey! What other IDE can be used other than Visual Studio?

[@DevSage]

Atom, Sublime Text, Visual Studio Code, Notepad++

[@matzekatze8422]

use Kile. and btw VSC isnt an IDE

[@jeelpatel5791]

Brackets & Vim(this one is difficult as well as old style)

[@guimguinleo]

It does not work, Google says that I CANNOT USE Manifest V2, only V3. I tried to use every method that I could find, and it did not work!

[@funwithalbi4504]

it says: Could not load background script 'background.js'. Could not load manifest. later: It works thanks!

[@SB-ns4nw]

same here... how you fixed?

[@SB-ns4nw]

got it.. place background.js into the main Folder. i created it into icons folder

[@user-pq1zz7lm2e]

Not aggressive comment im just newbe ㅠㅠ this look like website blocker am i got it right?

[@DevSage]

It's a network request blocker.

[@arunshukla5664]

Does this work in 2023 with the new YT annoying popup?

[@devcode9290]

Thanks a lot for the video! Like & Subscribe )

[@SaltyLasagna]

where do i research add websites?

[@DevSage]

That's for you to find out

[@SaltyLasagna]

@@DevSage why is there a period before teh websites but some dont

[@DevSage]

It has something to do with regular expressions

[@vietnguyenc6612]

Are you Kyle?

[@DevSage]

No

[@avi12]

Sadly this video is only relevant to Manifest v2 Manifest v3's network blocking works a little differently

[@illusio6504]

it block youtube ads

[@subhadipsur7561]

Like WhiteHat Hackers. Love it.

[@crysosancher]

Not working

[@ItzPikachoo]

Simple i agree but it's not working as a blocker

[@mihirsavla3233]

Ironic how you poasted how to to block ads on youtube and other websites on "youtube" not sure why youtube would allow this but thanks for the vider

[@DevSage]

😂😂😂

[@projektdarkside8499]

is not ad block but only webpage blocker OMG

[@kizoyo6414]

I have 2 Errors and i want to fix it. The two errors are: Could not load the manifest file Could not load 'image.png' from 'icons' For more info, here it is : prnt.sc/trdxsc

[@domaincontroller]

01:42 manifest.json