Build an AD BLOCKER Chrome Extension in Less Than 10 Minutes

Create your own ad blocker Chrome extension! In this video we'll use the new Manifest v3 Chrome extension standard to make our very own ad blocker extension.
We used only two simple JSON files to create rules for our extension. These rules will block requests to the most common ad networks, namely, Google Ad Services and Doubleclick.
RESOURCES:
Code: github.com/christian-js/simpl...
Blog: thelonecoder.dev
VIDEO CHAPTERS ⏰
Intro - 00:00
Project Setup - 00:35
manifest.json - 01:35
Connecting rules.json - 02:20
Blocking requests to ad networks - 03:25
Testing the extension - 06:05

[@luissamouco2518]

great tutorial

[@saumyaranjan9256]

Nice video man! Short and to the point.

[@KryptechOfficial]

Glad you liked it!

[@namandubey8348]

My first extension

[@kaushiksen2190]

Loved your video, learned alot from it. Thank you so much. Please make slightly advanced project on chrome extension which i can add on my resume.

[@KryptechOfficial]

I will definitely make more content on Chrome extension soon, I'm currently working on a full course on extension development. Thanks for watching!

[@zenekgowna5984]

Very good stuff bro :D

[@KryptechOfficial]

Thanks so much!!

[@EtH-bo3ji]

Shit was fire no cap

[@pronoob249]

keep uploading these videos bro

[@Akash.Chopra]

Solid!

[@ZeshanMukhtar1]

Thanks

[@viratkohli4863]

great to the point video...loved it

[@KryptechOfficial]

I'm glad I could help!!

[@user-yi4mt4hp8u]

This was amazing and fast. Can you make one that blocks KZbin ads?

[@prodqt3906]

I wrote an extension that foregos youtube video ads. I can send you the link if you'd like. I'm working on integrating pop-up ad blocker as well rn

[@NetraPatwari]

Please make full course chrome extension development.

[@KryptechOfficial]

It's on the plan!

[@adishjain2507]

Thank you for this video

[@KryptechOfficial]

No problem bro! Also, I'm live streaming in a couple of days doing more Chrome Extension stuff, keep an eye out for it!

[@MrSypas]

Please make full course chrome extension development

[@KryptechOfficial]

I'm currently in the planning stages of a full course!

[@user-tg8zp3oz5h]

how do we know where the resource of the ads? like, if some websites use url other than these two, I want to block them as well

[@Rajdweep]

awesome video bro, just one thing can we dynamically add extensions in the extension popup html so that those will also be blocked? is there a way to dynamically add it?

[@KryptechOfficial]

Let me check if I'm understanding. Do you mean allowing the user of the extension to add additional URL match patterns to block? If that's the case, we would have to use a plain JS object for our rules instead of a JSON file, which would be difficult because the rulesets are connected inside of our Manifest. So maybe there is something in the Chrome API that can allow us to update our rulesets on the fly. Thanks so much for watching!!

[@Rajdweep]

@@KryptechOfficial ya bro i want to put a add url in the popup html where the user can put desired url that will be blocked after getting added, is there a way to implement it? i was reading manifest v3 documentation bt didn't find anything similar

[@Rajdweep]

bro theres a extension in chrome webstore named A-blocker adblocker , it has a feature of adding or removing url from adblocker, how to implement it? the code isnt open source so i didnt find any resource for it@@KryptechOfficial

[@KryptechOfficial]

@Rajdweep To do this you can use the chrome.webRequest API. When the user adds a new URL to block, put it into local or synced storage using chrome.storage. Then in your background script, fetch all the blocked URLs from storage. There is a listener called chrome.webRequest.onBeforeRequest, in the callback you can check if the attempted request is going to a blocked URL, then cancel the request. I hope this helps, and good luck!! 😁

[@Rajdweep]

thanks bro im searching about chrome.webRequest API.but in manifest v3 we need a rules.json right to block particular urls, how will i modify it dynamically?@@KryptechOfficial

[@mikeshin77]

amazing!!! fatastic!!!

[@pierrenagonio1120]

i have made my 1st chrome extension today: select and search games

[@KryptechOfficial]

Congrats!! 🥳🥳 Keep up the great work

[@debeeriz]

who pays for an adblocker? the best are open sourced, and they block you tube ads

[@retroguardian4802]

Not sure how to feel right now. That was so simple I don't feel like I learned anything. Usually in programming there's a slow manifestation of knowledge over time.

[@KryptechOfficial]

Sorry I couldn't help more, I'm planning on making more videos on Chrome extensions, should I introduce more advanced concepts in my later videos? Thanks for watching, I understand my content isn't perfect so I appreciate your patience ✌️

[@retroguardian4802]

Lol I meant the video was really good. Making jokes online is always risky because people can't see your facial features. What I meant is normally when you learn technical things your head is pulsating. This video was so straight forward and effortless it didn't feel like learning. Very refreshing. @@KryptechOfficial

[@KryptechOfficial]

@@retroguardian4802 Hahahah thank you, I guess I misunderstood. In that case, I'm glad I could help! I'm currently in the process of making a full course on Chrome extension development, so your feedback is really helpful!

[@kaushiksen2190]

@@KryptechOfficial Yes please do,i want to add an advanced project in my resume

[@akashreddyjammula]

How do we upload to the chrome extensions, means how other users can access?

[@KryptechOfficial]

To upload an extension, head over to the Chrome Developer Dashboard. In the upper right is a button labelled "Add new item." Upload a ZIP archive of your extension, fill out all of the technical and privacy information for your extension, then submit it for review. Thanks so much for watching!

[@ybenlarbi]

i face this issue : Unrecognized manifest key 'declarativeNetRequest'. any idea ?

[@1Ayoub7]

GG

[@saiteja552]

short and clear, can you just upload the code or github link for this.?

[@KryptechOfficial]

No problem! I just uploaded the code to GitHub, check the description for the link! It appears under the "RESOURCES" heading

[@niteshsaini3003]

How can we made a ad-blocker that will trigger by a button

[@harshitpatil7117]

how to add working on and off button to the popup

[@monarca2846]

is it possible to mute e jump ads you tub3 auto?

[@lawrencecarvalho561]

Is there adblocker on FB messenger?

[@kingx_]

can you make a video on how to code an adblocker for twitch and youtube

[@KryptechOfficial]

Unfortunately that is quite complex because of how KZbin handles their ad feeds. If you want to block ads on KZbin and Twitch, I'd recommend the free AdBlock extension. I use it and I am never bothered by ads.

[@kingx_]

@@KryptechOfficialsure i try it

[@thepragmatic6383]

@@KryptechOfficial The online video giant (YT) has now declared war on AdBlock-style apps.

[@KryptechOfficial]

@@thepragmatic6383 I'm aware of that hahah, I believe that's the reason this video is now getting more views than usual XD

[@stevewheatley243]

Can this be done on Android?

[@KryptechOfficial]

Chrome for Android doesn't currently support extensions, so you'll have to use the Kiwi Browser, which is Chromium-based. 🙂

[@stevewheatley243]

​@@KryptechOfficialThanks. I wish it worked for YT. They drive you nuts.