Build Your First AdBlocker - Chrome Extension
Вставка
- Опубліковано 12 вер 2024
- 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/pke...
📕 Expand your JavaScript knowledge by downloading my latest e-books!
payhip.com/Dev...
🤖 Join me on Discord
/ discord
👕 DevSage Merchandise
cottonbureau.c...
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!
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!
just change to V3
very helpful. deeply grateful for making such a simple to understand video.
A functional Chrome extension with demo in 13 minutes. Kewl. Thanks
Hey Bro! Codingphase sent me here. Keep up the good work!
I appreciate that man!
Hey I want to know the name of the tune that you have played in the beginning 😂
Something I made with Mixcraft
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.
Hey man CodingPhase sends me here, you can code man keep doing your thing!
Appreciate ya
@@DevSage Yeah man👌
Thank you for this. It is a practical thing to make while learning.
Glad it was helpful!
Any idea why google extentions fail to upload the backgroud script (Could not load background script 'background.js'.
Could not load manifest.)
mine says "background.ks" even the file name extension is "js"
@@1985altan is it recognized as a JavaScript file in your editor ?
HOLL UP ON THAT INTRO 🔥
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.
very good!!!! this is just an amazing startup for a custom and powerfull extension! great!
Glad it helped Eduardo!
All those AD networks want your location 😂
awesome man...loved it...liked and subscribed...keepup the good work
Thank you, and welcome!
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?
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.
Thank you this is really helping me write browser extensions.
No problem
Here after my encounter with UA-cam's anti adblocker campaign.
i have like 1000 rows of ad sites if you want.
@@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.
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 UA-cam (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?
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
@@DevSage Will check it out, thanks again! Cheers!
Amazing tutorial all round
Thank you!
Great video. Something I've always wanted to learn is how to start building a framework like VueJS. Maybe you can show us!
That's interesting! I'll look into it.
Thanks very much Sir. .
this will help me to complete my antivirus project
project sounds interesting could you provide me your Github
awesome!! thanks
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?
Does this adblocker word with youtube? Also, can you make a Part 2 showing how to make it undetected?
Thanks for this, it helps a lot!
Really useful content, thank you
love it!
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
Hey bro, CodingPhase sent me here, can you walk us through on how you build your portfolio
subscribed : )
Something on UA-cam 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.
hello I had an idea for a chrome extension and I would like you to tell me what you think of it
Thanks it really worked
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!
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"
Look at the pinned comment
well done
would you be able to do a video using manifest 3?
I'll definitely consider it
BUT HOW TO MAKE UA-cam VIDEO AD
BLOCKER ?
Thanks!
No problem!
blocking the money thirsty advertisers yes! I love it !
Awesome
Ty!
hi this software cannot block youtube ads. how can I make him prevent this?
thank you
Failed to load extension
File
~\Desktop\AdBlocker
Error
Could not load background script 'background.json'.
Could not load manifest.
it should be manifest.json and background.js not background.json
great video..
Thanks!
it worked thanks. but I couldn't block the ads coming in between youtube videos. what is the way to it?
amazing tutorial. 6 stars out of 5 i swear
@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?
I would start here gist.github.com/paulirish/78d6c1406c901be02c2d
Will this works with blocking youtube adds.
the spaces in manifest are very important
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
Sure
@@DevSage Thanks :)
@DevSage Do you know if this could all be coded in notepad, or would I need an API/sdk?
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
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.
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
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.
im getting error on manifest where we did it 2
Great intro. Does this work in 2023?
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.
Not sure
@@DevSage ok bro but please check that and tell me
@@astronaut736 I think you could figure it out if you did your own research
@@DevSage ok bro, I will try to thank you very much for your tutorial it will work on other websites except youtube.
Thanks so much ,
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.
Hey man, could you create a chrome extension to automatically save liked facebook videos?
As in, is it possible? Yeah I don't see why not,
@@DevSage As in i tried building it but failed
how to build adblock for wordpress plugin to stop redirect page?
I have no idea
nice video
I need an extension to stop mouseovers
brother , the extension is not blocking the pages i want it to .. can u tell me a solution
Does this work in 2023 with the new YT annoying popup?
how to do it for fire fox
can i block youtube ads
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?
I'm wondering this as well. Have you found it yet ?
tabnine
it says: Could not load background script 'background.js'.
Could not load manifest.
later: It works thanks!
same here... how you fixed?
got it.. place background.js into the main Folder. i created it into icons folder
Great
Thanks!
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?
Hi there. thank you so much for the video. Can you tell me how to block more than one website? Thank you!
Great vid, but the thumbnail looks a lot like fiership's
Thanks. The thumbnail is inspired by Fireship
Awesome Tutorial!!!
Subscribed..........
Thank you!
@@DevSage Love from Bangladesh......
Amazin!!!
JLP :D
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
@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. :(
| It won't even show the manifest.json file when I try to upload. :|
Are you using the code in the repo?
@@DevSage Yeah..
Are you Kyle?
No
How do I get a list of filter keywords?
Does anyone know? Please suggest.
You can block ads to google?
why does it not work for me
Hey! What other IDE can be used other than Visual Studio?
Atom, Sublime Text, Visual Studio Code, Notepad++
use Kile. and btw VSC isnt an IDE
Brackets & Vim(this one is difficult as well as old style)
Could not load icon 'icons/logo_16x16.png' specified in 'icons'.
Could not load manifest.
I can't post it in Chrome Extensions....Please help me.....
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?
disregard the above, i fixed it!
how?
@@garrettmcguire5454 how did u resolve that i 'm getting the same error can u plz help me.
Not aggressive comment im just newbe ㅠㅠ this look like website blocker am i got it right?
It's a network request blocker.
Bro I want to build an extension. I have no programming experience just a dope idea. Please help me.
What's your idea?
@@DevSage I want to build an extension that will allow me to "book" "buy" or "bid off a UA-cam 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?
@@DevSage is this not possible?
@@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.
Simple i agree but it's not working as a blocker
Uncaught SyntaxError: missing ) after argument list
Context
_generated_background_page.html
Stack Trace
background.js:19 (anonymous function)
Looks like you have a syntax error in background.js
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
😂😂😂
Not working
Hello friend, first, great video, thanks for sharing. But where can I find the references of chrome object? thanks again cheers
developer.chrome.com/extensions/devguide
Sadly this video is only relevant to Manifest v2
Manifest v3's network blocking works a little differently
it block youtube ads
That's great, as a junior Web developer can you suggest me some projects
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!
where do i research add websites?
That's for you to find out
@@DevSage why is there a period before teh websites but some dont
It has something to do with regular expressions
is not ad block but only webpage blocker OMG
Like WhiteHat Hackers. Love it.
Thanks a lot for the video! Like & Subscribe )
01:42 manifest.json