Build an AD BLOCKER Chrome Extension in Less Than 10 Minutes

hello everybody this is the long coder and welcome back to a new video in today's video we are going to be making a Chrome browser extension that blocks ads you've probably seen some other ad blocking Chrome extensions out there such as ad block or Adblock Plus there's many of them out there but what you may not know is that they are actually extremely easy to make and all we need is two simple JavaScript files and a minimal amount of code so from today on you will never be bugged with those banner ads that are loaded onto websites and give you viruses and everything you are going to be officially protected so let's go ahead and get started I'm going to open up a terminal and I'm going to change my directory into a code director I have and then inside of here I'm just going to make a directory to contain all of my Chrome extensions that's going to be just a directory called Chrome extensions I'm going to do CD into that and now I'm going to make a new directory and it's going to be called Simple add blocker and that directory is going to contain the files for our extension so I'm going to change my directory into there and now I'm only going to create two files so I'm going to use the touch command to create those files and they are going to be manifest.json and then the second one is rules.json and you'll notice that these are not actually JavaScript files which is awesome because we only have to write some super simple Json code in order to block most of the ads in our browser so let's go ahead and create those files and I'm going to open vs code inside of this directory so I'm going to expand this up and close this welcome screen and first I'm going to go to manifest.json Every Chrome extension has to have a manifest.json file and basically it just provides metadata about your extension so for example I'm going to open that up and inside of here we are going to have a name property and the name is just going to be simple add blocker and after that I'm going to add a comma and then the version is going to be a string it's going to be 1.0.0 and then after that we are going to have a property called manifest underscore version and that is going to be equal to three then after that we are going to make a permissions property and the permissions property is just an array of strings and the only permission that we need from the users is going to be called declarative net request and now that we have these permissions we are going to add another property and this property is going to be called declarative underscore net underscore request and this property is going to be equal to an object and the only property on this object is going to be called rules underscore resources or I'm sorry not rules is going to be singular so rule underscore resources and it is going to be an array and inside of this array we are going to only have one object it's going to have an ID and we can really name this ID anything we want but inside of the Chrome documentation they use rule set underscore one so I'm just going to stick with that and then in order for our rules to work we have to set enabled to a value of true and then we have to provide a path for that rule set and that path is going to be the path to our rules.json file so basically what we're doing here is we are setting up a set of rules for our Chrome extension to operate on and you will see very soon how this can block ads once we get to that but for now we're are just going to make the path simply rules dot Json since they are in the same directory so that is actually all the code we need for our manifest.json so let's go ahead and go to our rules.json file and these are going to be all the rules that apply to our extension so pretty much all we are going to do is make two rules and what they're going to do is block any requests to the two URLs where ADS commonly come from that is doubleclick.net and googleadservices.com so all we're going to do is make two separate rules to block those two URLs so in order to do that inside of this rules.json file we are going to create an array and each rule is represented by an object so let's go ahead and open that up we are also going to give this an ID it's just going to be one and then we are also going to make the priority of this rule the highest priority which is one then we need to specify an action property and this action property is equal to an object and inside of this object we are going to specify the type of the action and that type is going to be block signifying that we are blocking URLs then finally we are going to create a condition property and this condition property similarly to action is going to be a object and the only property on this object is going to be URL filter so this is going to filter out any URLs that we don't want and so we're just going to set it to one URL and this first one is going to be blocking doubleclick.net so we are going to want to block it via any protocol so whether it's HTTP or https we are going to want to block it so that's going to be asterisk colon slash signifying that this applies to any protocol and that's going to be double click .net slash asterisk but at the same time many ads that make requests to doubleclick.net are requesting a subdomain of doubleclick.net and I don't know what exactly they're called but it might be something like ads.doublesclick.net and we want to block all of those so we are actually going to add another asterisk before doubleclick.net to block all of those sub domains as well so now this rule is finished and that will block any outgoing request to doubleclick.net and the second rule is going to block any request to Google ad services so let's go ahead and add a comma and add another object and this one is going to have an ID of two it is also going to have a priority of one so let's go ahead and add that in there it is going to have the same type of action which is an object with a type property of block and we are going to have a similar condition on this rule which is an object with a URL filter property and we're going to have a similar pattern for this it's going to be asterisk colon slash to cover any protocol and then this one is going to be Google add services.com slash asterisk so now we are actually ready to test out our extension so in order to install this extension I'm going to open up the browser and the location you're going to want to go to is going to be Chrome colon slash extensions and once you are here you can see up here in the top right we have this little box and it says developer mode you're going to want to turn that on and then over here we can see we are given more options so we're going to click the button that says load unpacked and we're going to navigate to the directory that contains our Chrome extension so that's going to be code and then inside of here we're going to go to Chrome extensions and we can see it says simple ad blocker so go ahead and select that and open it up and you can see that our extension was installed so in order to test it first of all I'm going to go down here and turn the extension off and there is a site that is good for testing ads and it's just going to be speedtest.net that's not what it's actually Force just that when you go to it and you wait a few seconds you could see that there are a few banner ads and some sidebar ads showing up and they are very obtrusive and obvious so it's perfect for this so now let's go ahead and turn our extension back on and you can see that there are no errors normally if there are errors in the extension it will show up as a error button right here so now let's go back to speed test and refresh the page and see if the ads are still showing up okay so I've waited for about 10 seconds now and you can see that there are no ads on this website anymore so our ad blocker is working with just a few lines of code into Json files and that is extremely cool because that means you don't have to pay for a separate ad blocker you can do this by yourself the only downside to this is that it actually does not work on YouTube ads of course you can make it work on YouTube ads but that is quite complicated and there are other extensions that do this but anyway I hope you enjoyed making this obviously it was quite easy and only took me a few minutes to make and to prepare this video so if you enjoyed I'd appreciate it if you liked and subscribed to the channel I hope this helped you in some way it was a fun little project I think so with all that said thank you so much for watching and I will see you in the next one

Channel: Kryptic

Views: 7,194

Keywords: ad blocker, best ad blocker, ad blocker for chrome, free ad blocker, chrome extension, chrome, manifest, manifest v3, how to block ads on chrome, block ads chrome, how to block ads on chrome android, how to block ads on chrome iphone

Id: H3vFL_O_0Lo

Length: 8min 6sec (486 seconds)

Published: Wed May 17 2023