Coding A Chrome Extension in JavaScript Tutorial

[Music] hey guys how's it going i'm back here with another video and today i decided to make a tutorial where i'm going to be teaching you guys how to build the chrome extension using javascript so i actually have quite an experience with building chrome extensions and i don't know if you guys know but um the very first like few subscribers from this channel actually came from tiktok and i used to make like a coding tick tocks back in july of 2020 something like that and some of my tech talks went viral where i basically built like really weird chrome extensions and people liked it so i just thought it would be a good idea to show you guys how to build them and it's super easy and i'm also going to teach you guys how to test them so i actually built um a few extensions but the ones that went viral were like this three over here the main three so one of them is very simple it is actually public however i i i like you guys shouldn't download it i only made it uh because of my like my my friend's mom she wanted me to create an extension which would block um different websites while he was in class so what happens is if you have this extension on if you try to access something like i know netflix um it will it won't allow you it will basically block you and say something like uh get back to work or if i try to go to youtube it's only portuguese because i'm in brazil but you can see that it won't allow me to actually go to youtube as you can see i can teach you guys how to make this but i have other extensions too for example i created this syllable extension which is really cool where for example if you're just working on something and you want to use you want to basically know how to divide a word into syllables you can just open up the extension here and also just put the word so if i write something like syllable and click on search you'll see that it will show how you divide it and this is actually using an api so it's a bit more complicated but i can definitely make a video on this in the future but actually the extension that i'm going to be building in this video to show you guys how to do it is this one right here it is the one which which basically went a lot like more viral it's called will smith it is actually public i believe i i published it and it's super dumb the only thing that it does is uh whenever you go to any website it will automatically replace every single picture like every single image within it with a random image of will's myth so i'll go to youtube and you'll see that latin like all thumbnails will actually become will smith as you can see right here and every word also becomes will smith that's actually something i implemented later i i don't think i'll be trying to implement the words i'll just put the pictures because the words actually didn't work perfectly as you can see there are still like some words which aren't will smith but i just think that this is a great like exercise to understand how to build extensions also it helps you get better with javascript in general you can go to websites like linkedin and you'll see that like it will basically just replace every single image with an actual image of will's myth it takes a bit just because it needs the the dom to load until you're able to see and there are some bugs like you can see right here that this wasn't loaded it's like it loads as you go and obviously the extension only works when you load the page so on the images that load initially are the ones which are going to be replaced by images of will smith but that's not a problem this is just a beginner's tutorial so um i just really wanted to show you guys how to build this okay guys so let's get started building our project and as you can see right here i opened up the s code and i opened it inside of a folder called will smith so we're actually going to be building the same application because um like we can you you can use you can use whatever images you want but um i'm going to be using the same ones it's just showing you guys how to build it in general right so what is the first thing that you have to do to actually build the chrome extension this will be built completely with javascript and i could use something like react or another framework however i think that it is best to understand how actually how it actually works if you start with vanilla javascript so the first thing that we're actually going to make is we're going to create a json file called manifest nfs dot json and this is actually the entry point of your application in the sense that over here is where you define a lot of the things that will be related to your extension this is an essential part of your application and you can't actually deploy an extension without a manifest.json so over here we have to put some stuff for example we have to put the manifest version just which is kind of like the version of our application we're gonna give it a one because it is version one then we have to put a name which is going to be the the name of our application i'm gonna call this um will smith as my life and you can call it whatever you want this is actually the just the name of the application as i mentioned so what else do we have to put okay so we actually have to add the version so let me see so the difference between manifest version and version is version is actually the version of the application so like version 1.1 or something like that we're just going to put version 1.0.0 something like this um and manifest version is just the version like when you change the manifest you change the version right if you have to make any changes you change the manifest version but if you don't have to change the manifest you can just change the individual version as you can see right here now we have to basically just add some different scripts that we're going to be accessing in our application and this is the most important part actually right because we have to tell it that um which actual javascript files are going to be the the the files that are going to handle our application so we have to pass the content scripts over here and it's actually going to be an array because we have to pass different values that are related to the contents in content scripts so the first thing that i like to put is i like to put the matches um property and this is actually um it will solve a lot of bugs in regards to um deploying your extension so i recommend just saying that it matches with all urls so you can just do it like this all urls because um i used to have a lot of issues deploying um an extension to to google chrome but after i started putting this it actually fixed it and we also have to put a an object around here so that it knows what we're talking about but basically over here like this and then inside of here we also have to pass um the javascript file so we're going to create a javascript file and i don't know why but like the standard is to call this javascript file content.js so that's basically what we're going to be calling it let's just call it content.js and this is basically all i believe we may be like if we want to add stuff in the future for our project like we want to add an icon or something like that we can just edit later inside of here but for now this is basically it so now what we can do is we can basically just create our javascript file so i'm going to create over here a file called content dot js like i like i said and inside of here is actually where we're going to be writing all of our code we could actually create an html file here which is very common in chrome extensions you create an html file which usually is called popup.html however our extension doesn't actually pop up anything i'm going to show you guys later how to create this this pop-up file however this one specifically you don't have to like click on the extension to see a pop-up appearing so we're not going to touch the html file we're just going to touch the the javascript file and the first thing that we actually have to do is we need to create an array of of basically just images right so i'm going to call this wills myth images it's just an array containing a bunch of different images that we're going to be using why do we need to make it into array because we're going to have various different images that we want to constantly be like randomizing through and just to display in the screen so you can put how many images you want i'm going to i already have the list of my images so i'm going to come back with images already put here but just take a time like go through google search images and just copy the link directly to the image and paste it over here as you can see right here we just finished up getting all the images this is actually the links to all the images that i'm going to be using so if you want to copy the code will be in the description so just check it out and actually what we have to do now is we actually have to analyze how our extension will work so similar to if you're building like a web scraper or something like that what this extension does is and actually when you're building extensions in general you have to be very familiar with the dom and what do i mean by that um i'm just gonna come here to a random website like um youtube again so i'm gonna come here to youtube and i want you guys to think like if i click on a title like if i click on uh on one of the thumbnails we can inspect the element and we can actually take a look at the different like the dom right the the document object model this is containing all the different um tags html tags that exist in the body and we want to basically just analyze how the images are being displayed right so what we actually want to do is in the in this extension specifically we just want to replace every single image so how do we have access to the images well we can very very easily just say that well we want to grab every single element in the page that is an image and that can be very easily done with javascript and we want to replace it with a different value we just want to change its src property so if you're familiar with html you know that every image has an src and we want to replace that property with one of this links right here so that's literally what we're going to be doing it's very simple logic and but but but i understand that like the the implementation can be a little bit confusing so let's actually start building our our code let's create um let's grab all the images right so let's say over here const images i'm just going to create an array called images and i'm just going to get so you can you can access the document over here and i'm just going to get all get elements actually get elements by tag name and you can use query selectors all if you want to as well but i'm just going to say get elements by tag name and i can just pass the tag name over here of all the elements that i want to grab and as i mentioned before we're just going to grab all the images right so now that we have grabbed all the images we basically just want to traverse through every single image and what we want to do is we just want to change its src as i mentioned before to a random value in our array so how do we do that i'm gonna do it with a for loop and a lot of people don't like using for loops but um i actually enjoy it so i'm just gonna say four i'm gonna say let i equals zero and i is less than length of not like this eyes less than images the length um and then i plus plus right i'm just traversing through the whole um array of images and for each image the first thing i have to do is i want to gra i want to write some logic that grabs a random link in our array of images so how do i do that well i'm going to create a variable here called random image and i'm gonna use this logic that i believe that i actually got from stack overflow because uh getting random like random values in javascript always used to confuse me so the idea here is that to get a random value in between the length of the array over here so we're basically just want to grab a random index over here right so this actually has one two three four five six seven eight elements so indexes go from zero to seven so we basically just want a random value between zero and seven so to do that what we can do is we can just say math dot random we can use the random function that already exists in the math library and multiply it times the the length of our images array which is willsmithimages.length right and most importantly we want to floor this value and by floor i just mean we want to um round it down right so we can say math.4 because obviously it can give us a random value that is actually an a float or an or a double like a decimal and we don't want to access a decimal in an in an array because that doesn't make any sense so we either have to seal it or we want to floor it which means we're going to be around rounding it down so the next thing that we actually have to do is now that we have the our random image in between zero to seven we just want to say that images at the index i so the current image at index i dot src so we can directly change its src value over here and we want to set it equal to will smith images at random image so let me just write random image so basically here's where we change our like every single images src we set it equal to the random image that we got inside of our woolsmith images array and literally this is the whole logic right we can just write direct javascript inside of here and it will work with our extension so whenever our extension is on and we load a page this will be executed automatically and that will basically change everything so now i'm going to teach you guys how to actually test to see if this code is is working how to how do i test this in my chrome so yeah that's what i'm gonna show you guys and actually before we actually tried this i forgot to i just remembered something um we can't actually have the manifest version in as one we actually have we need to have it as two because or else we're gonna be getting some errors when we try to to load it into our comb so make sure that this is two sorry about that um this has to be two at least for the for this version right now so let's actually start testing to see if this works right so if we come here to our chrome you can see that i don't have the extension here yet i have the old extension this is completely different a completely different project but it's the same extension that we're building um it is obviously in my project because it because it's public however i'm going to show you guys how to actually load an extension they're currently working on and how to constantly be change seeing the changes right so to do that you're going to click here on your extensions um place like in your chrome and you can just click on load unpacked then it's going to open up your extent like your directory you go to where your your project is so you can see that this is my project this one over here is the the project that i worked on on the other like the the one that i published and this is the one that we actually started working and i can just select this and you'll see that now it appears over here will will smith is my life that's the name of our extension that we put here in our manifest.json and you can see that it doesn't give us any errors if there's any errors there will be an error thing over here and you can see that we can turn it on or off by just toggling this this thing over here so let's test this when it's off you realize that this is youtube we don't have any like images of will smith but if we toggle this on and we refresh our page you'll see that now um every thumbnail should have changed to yeah as you can see right here every thumbnail should change to will smith and as i mentioned before um it's not guaranteed that like some of the some of like all of the images will change if we try to go to other websites like let me think of a website which has different images um let me try to go to mario this is like a cool website for developers as you can see like some images doesn't change some changes um that's just something that happens and it's hard to determine but the thing is i like how it works with youtube because many of the images actually change right it loads very quickly so that means that it will work so this is basically to to load this if you want to make any changes for example um if we wanted to come over here and we wanted to replace all the h1 tags so imagine you want to replace all the h1 tags with um the word pedro to do that we can just come over here copy this code paste it over here and write a very similar logic right we change this to h1 we call this um headers something like this and we can just change like for each header i'll just change its um h1 dot um inner text to be equal to pedro is awesome let's see if that works i'm not sure if that's going to work but if it works um we can just test it right i'm going to save this and i can change this to headers like this and just pass an i as we did before and also i have to loop through headers instead of images and now let's test to see if this is working to to actually refresh and see and like see our changes being made we need to click on this button over here and it will basically reload our package from our directory and we can now check to see if it's working i don't know how many h1 tags exist in youtube um but we can try to see right so i don't see any pedro is awesome okay so as you can see i just changed it to h2 apparently websites have more h2s than h1s and as you can see on linkedin i changed my profile bio to pedro is awesome whenever the page is loaded right and you can see this also changed to pager is awesome um you can basically try that too many different like tags you want um this is just something cool in my opinion that you can try um it's a simple little project and i i think it's i think it's funny right i think it's cool and you can try it out on your own however now that you know how to reload changes you know how to how to actually build stuff manipulate the dom i'm gonna just show you guys very quickly how to actually create the pop-up right because many extensions when you click on them they have a simple pop-up appearing over here and you can do a lot of stuff with it it's very simple to do it with like building with with the way that we're building right now however i'm gonna show you guys how to do this so to create the pop-up we actually have to come over here and access our manifest.json and change it a bit so that it actually has the pop-up being displayed right so the first thing that we have to do is we actually have to add a tag called browser action so we can just come over here and say browser action like this and inside of here we can just add two things right so the first one is the default pop-up so we can say default um pop-up and this over here is basically the name of our html file that is going to be the like the html file that we open up whenever we want to open up our pop-up right so let's just call it popup.html and then we can basically just add a default title which is going to going to be like the title for our extension that appears like the visual title that appears when we open it up so you can just put it whatever you want i'm going to put it i'm just going to say will smith like this and this is basically it right so what we can do now is we can come here to our application i'm even going to close this content.json.js and i'm just going to create our popup.html like this just like we wrote over there and over here we can just write very simple um very simple html code right so we can just add the tag like this and this is going to build like a whole html file if you guys didn't know you can just put as i did you can just put this and we'll build it for you so now we have this html file i'm going to change this to will smith um then we can come here to our body and we can just add a bunch of stuff i'm going to add an h1 saying subscribe i can add i don't know a div here i can add an input of type text i can add whatever i want inside of here and it's it's just a normal html file that you treat like it is um the actual extension right um so i'm just gonna put it like this and i can just close this and this is basically it let's try to see if this works now let's come to our google chrome over here let's refresh our extension by clicking on this and now if we come to over here and we actually open up our extension so let's actually look for it is this one right here if we click on it you'll see that a pop-up appears and whatever you wrote will appear over here you can add you can add like styling if you want so i can come over here and add like the style tag and change this to color equal to red something like this and now it should have a red color obviously we have to refresh it too so let's refresh it and you'll see that if we open up the the thing now the color is red so that's basically how you build your your pop-up if you're if you want to build an extension that uses it so yeah that's basically it um thank you so much for watching i hope you guys enjoyed this video um i i just decided to make this video this quick video because it is a topic that i i really enjoy like literally you can build whatever you want with this i i love working with chrome extensions um i haven't done a lot of chrome extension development in a long time just because of school and all the kind of stuff so i thought it would be a good idea to make this video if you enjoyed it please comment down below telling me what you want to build with it um leave a like because i would really appreciate it and subscribe because it will help the channel grow and i'm just putting a lot of effort into the channel so i would really appreciate if you guys could subscribe so yeah really hope you guys enjoyed it and i see you guys [Music]

Channel: PedroTech

Views: 20,595

Keywords: computer science, crud, css, databases, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, typescript, react js, express js, pedrotech, traversy media, traversymedia, clever programmer, programming with mosh, tech with tim, freecodecamp, deved, coding a chrome extension, chrome extension, how to make a chrome extension, build a chrome extension, chrome extension tutorial, javascript tutorial, javascript chrome extension, javascript chrome extension tutorial

Id: zHIryKuhYA4

Length: 23min 2sec (1382 seconds)

Published: Wed Jan 27 2021