(Beginner Web Development TUTORIAL) NEW 2021 How To Create a Google Chrome Extension in 30 Minutes

what's up everybody jason here in this video we're going to build something new something exciting all right we're going to build a chrome extension all right and i'll go ahead and i'll demo the chrome extension we're going to be building and then we'll walk through how actually kind of simple it is to build one of these all right so this is the chrome extension i have now it doesn't do anything like super amazing but what it does do and what it will teach you is the basics of how to get set up developing chrome extensions and give you all the pieces to get the ball rolling all right so i've got this chrome extension here and we've got it up in the action bar on google chrome and all it does is we click on it and it brings up a pop-up okay a really popular type of user interface a really type of popular user interface for chrome extensions and then what it does is it stores the selected color into your local storage alright so right now we've got blue selected and then if i close that and open up a new tab and this is something else we'll learn about i'll tell you here in a second and if we do this again blue is selected now if i go back over to my extension let me just refresh this and let's click back over here open this up you'll see that the default color is green so at run time we set the default color to this chrome extension to green and then we can pick a color and it stores it into your local storage and so the other thing that we're going to be learning is how to override a user interface when a user opens up a new tab alright so it's going to be a really fun exciting video we're going to learn something new and learn everything that we need to know to get up and started building chrome extensions all right so i'm going to close this down now to get started the first thing that i want you to do is go into chrome colon and double forward slash extensions all right just the place where all of your other extensions are stored all right and then you'll see a toggle up in the top right hand side all right that says developer mode and what we want is we want to toggle this on because what it does is you'll see that it gives us some options here and then it allows us to work with uh these extensions that we're building in a developer mode all right that's how we're able to access this up here and then these other tabs that i have opened up here this is just documentation on the chrome apis that they provide for us for development and so this is over in developer.chrome.com forward slash talks forward slash extensions forward slash reference all right so this just gives us a reference to all the apis that chrome offers us all right and we're going to be diving into some of these in this example uh this project that we're going to be building and then another thing that i have opened up here is the permissions because when we're interacting with the tab like what i did when we open up a new tab we have a tab override you have to include these permissions inside of your code and we'll go through how that's set up all right so now one thing that's really cool is these chrome extensions they're built with basic web technologies just html css and javascript so it's cool that we don't have to include any crazy you know different frameworks or anything like that we can do this with all basic html css and javascript all right so i'm going to hop into my code editor all right and i've got a blank project right here all right i've called it chrome demo so open up your text editor create a new directory call it whatever you want and the first file that we're going to create here is a manifest file all right this is a json file so i'll do manifest dot json except yeah i spelled it right all right so we've got a manifest file and this is going to take some initial basic information all right so we need to put a name of the extension i'm just going to call this chrome demo all right and then we can add a description except that didn't auto-complete my comma all right so we're going to add a description all right and then next let's just add a version alright this is just a good way to keep track of different versions that you're pushing out of the extension so we'll just do 1.0 all right now this next part here this is important okay this is a chrome thing um we need to add a manifest version like this so manifest underscore version okay this is a very specific key now chrome they have three versions one two and three one is deprecated it's not no longer supported um you can either do two or three all right and depending on the api that you're working with sifting through all of the documentation for chrome extensions you'll see that they've changed up some of the names like the key names here in the manifest file and so you just have to pay attention to those type of things so we're going to be using the latest version which is version 3. so this is our basic setup all right now the first step that we're going to be doing in here is we need to interact with the local storage all right so we need a script to run at runtime so this is going to be placed in a special spot here in our manifest file and then we're going to have to create a javascript file for this using some of those chrome apis that are available for us so we're going to make a new key here and this is called background all right and then in here we're going to create a key called service worker and again these are all chrome specific keys in the manifest file so service worker and then here we're going and then in here we're going to reference a javascript file so in this case we're just going to call this background.js alright so let's go ahead and create a new file and we're going to call this background.js all right and then in here we're going to create this runtime function so we're going to create a variable here and we'll just call this color and we're going to store that green color in here so this is a hex color we're going to use so it's 3 aa757 okay this is a green color and now we're going to use some chrome methods to access the local storage in our browser so we're going to do chrome dot runtime dot on installed dot add listener okay and this is going to take a call back and then we're going to access chrome dot storage dot sync dot set and then we're going to simply set the color here let's also just print out a message here so that we know that this file is actually running so we'll log out a message i'm going to use a template string here default background color set to and then where's my dollar sign all right and this is going to be our color which is this hex color right here all right so let's go ahead and save this and then let's see we've got in our manifest file we're linking to it so this is good and let's hop back over to our browser over here so now in order to load this project what we're going to do is we're going to do this load and unpack all right i'm actually going to remove this old one uh real quick since we don't need it anymore so we're going to hit load unpack and then i've got it right here chrome demo i'm going to hit select and we've got an error the manifest file is missing or unreadable alright let's uh check this out oh my gosh i've got manifest who caught that smash the like button if you caught that we've got a manifest we need a manifest file all right there we go and then one other thing we actually have to do before we can run this is because we're running this background file this script okay this is a chrome api we need to set permissions for our extension to access the local storage so over here in the manifest we're going to do one more thing we're going to create a permissions key and that's going to be permissions with an s this is an array and then we're going to drop in what we need uh permissions for it which is the storage all right so let's go ahead and save this now back over to the extensions let's try this again so i'm going to hit load unpacked we've got chrome demo select there we go all right perfect and then to test if the script file is actually running then we'll go ahead and click on the service worker and checked it out it logged out our message default background color is set to and then it has the hex color all right so this is good so let's go ahead and create the pop-up menu now all right so we're going to dive back into our code alright so to do this to add this popup menu what we need to do is add a key and this is going to be called action all right so this action keyword here this is part of the manifest version three if you were using version two then it's going to be browser underscore action all right so that's why it's important to pay attention to this because they change up some of the key names here so in here what we're going to do is add another key and this is called default popup and we're going to create an html file for this and you know i'm going to keep my naming convention here a little bit similar to this key that we're working with so i'm going to call it popup.html all right and then we need a comma here so we don't break this down here we'll add a new file called popup.html and then in here let's just set up some basic html we'll do a head we're going to link to some css so we'll create a link here and we'll just call this button.css and then we've got our body and then what we want to do here is i'm going to create a container and then inside of here we'll have a button and then i'm going to throw an id on this so that later we can interact with this button with javascript so we'll call this color change all right so i'm going to save this this looks good while we're here we might as well create the css file so inside of here what we're going to do is let's get the container and we're just going to set a width to this 300 pixels and then we'll grab our button got a extra character there all right so the button we're going to set a width and height to this of 30 pixels all right let's get rid of that nasty outline that the browser puts on this so we'll do outline none and then also get rid of that default border the browser puts on this and we'll do none um what else we want to do let's round out the corners a little bit we'll add a border radius of like three pixels so you saw that we had the single button and then those four buttons underneath so let's just add some margin between all of these buttons not a hundred we'll do ten hundred's a little bit crazy all right and then we need a selected class so in those bottom four buttons when we select one of them it has this ring around it to indicate that it's selected so we'll do this we'll do button.current is the name of the class that we're going to create later in javascript and we're going to add a box shadow to this so let's do something like this we'll do two pixels this will be white didn't want that period in there geez we got so many weird things happening all right and then we've got the four pixels and this will be black all right so this should be good for our css and we have the container class on here so let's go ahead and just check this out so what we should be getting right now is just a gray box i believe because we haven't set any colors to it all right so i'm going to refresh come into the plugins i'm going to pin chrome demo to the action bar up here so if we click this there we go so we've got a pop-up box that has a width of 300 pixels and we've got this default kind of placeholder box for us all right but what we're going to do now is we're going to write some code that is going to go fetch from our local storage and get that green color and then assign it to this button all right so let's dive back into our code here alright so what we're going to do here is let's go ahead and create another file and we're going to call this popup.js all right and since we've got this script file now what we have to do is link it inside of here so we'll add a script tag to our source and this is our popup.js now why did it do html pop-up js there we go all right so we've got this and let's go write some code all right so the first thing that we're going to do here is we need to get the button element so let's create a variable here and we'll call this change color and this is going to be document dot get element by id and the id we put on this was change color all right so now we've got the id and the next thing that we're going to do is we're going to go fetch what we've stored in local storage and assign it to the button so we're going to do chrome dot storage dot sync dot get and this is where we're doing our color and then it has a callback in here we're doing our color and then we're simply just taking our element change color dot style dot background color and then assigning it the color all right so we're just fetching this from our local storage all right cool so this looks good here so we're getting the element by the id uh change color oh it's color change that's a good catch it's color change um we'll leave this one the same all we have to do is change this one so anyways getting the element by id and then we're simply just tapping into the storage and setting the background color so let's go ahead and save that back over into the browser we're going to hit this refresh and let's try it out click on it and there we go so we have this green color so very cool so the next thing we're going to set up is let's go ahead and add an icon to this all right so back over into the let's see this is going to be in the manifest file so over here what we need to do is here in the action since this determines what's happening in that action bar on the browser what we need to do is we need to set up another key here for our icons and this is going to be called default icon not yeah default icon without the s alright and then in here what i'm going to do is i'm just going to create some strings you can set up different sizes so i'm just going to do a 16 and then duplicate this a couple of times where's my duplicate key that's not it is it this one there we go all right so we've got a 16 let's do like a 32 is another common size we'll do a 48 and then a 128 all right and then what we'll do here is we need some icons don't forget your uh comma over here after the html so i'm going to create a directory here i'm going to call it images okay now we're just going to add one image into this but ideally you would have a different image size for each one of these so let me just let's see pull open my finder i've got an icon here i'm just going to drag and drop it in there so this is just the dev slopes icon all right so that's what i'm using and then the path on this let me just do a multi-select is going to be let's say we have to go up a directory this is going to be in images favicon favicoon dot png all right so we've got this and then right outside of the action we need to actually declare the icons all right and it's going to be yeah icons with an s all right and so i'm just going to take this and copy it right over here all right so you have to do two things in the action bar you have to reference the image and then you also have to declare the image over here in icons and then i need to add my comma so i don't break the json all right so we're going to add this or save it and we should have an icon now let's try this out so if i refresh haha there it is so now we've got the icon here alright so the next step that we're going to do here is we are going to go ahead and just write out all the code and the html to build those other four buttons and then to add that selected state and to change the color all right so let's see over here in our pop-up js is where we're going to write some more code so here at the top let's create a variable here and this can actually be a const so we'll do a const and this is going to be the button options and we're going to do document.getelement by id we actually need to go in and create this element and this is just going to be called buttondiv all right let's go ahead and add that real fast so over here underneath this button we are going to create an id called button div and then over here let's just add a div tag a paragraph and say choose a different background color and in emoji emojis make everything better all right there we go now i'm feeling good all right so now we've got these other elements here so back over here so now we're getting this div and then with this div we're going to create those four buttons uh dynamically all right so let's go ahead and just knock out the uh click event here so we'll do create a function and this function will call it handle i don't know button click and this is going to take in an event you can write it out all the way you can just do a shorthand i'm going to do a shorthand here and what we're going to do here is we'll first handle the selected class so we'll say const current equals e dot target dot parent element and then we're going to do a query selector on this every time it doesn't autocorrect for me i feel like i'm uh i'm doing something wrong and we're going to go ahead and create a variable for this in a second but this is going to be our let's see selected class name okay let's go ahead and just create this variable real fast and this is going to equal the name of the css class that we created all right so now we're just going to do a simple check and remove the class if the selected button matches here so we'll do actually we have to set up conditional so if the current so if there is a current and the current is not equal to the event dot target then we'll do the current dot class list dot remove the selected class name all right so this is just anytime we click on the button it just removes the class name for us down here we'll just continue with the rest of our logic so we'll do const color equals e dot target dot data set dot color we don't have a data set on this there there isn't a data attribute yet but we're going to set it down in code in just a minute so we're going to do this and then e dot target dot class list dot add the selected class name and then we'll do a chrome method here so we'll do chrome dot storage dot sync dot set and then we and then we want to set it to the color variable that we just created right here so we're going to pluck it off the um data attribute and then just throw it into our local storage and then we have to now change the background of that main button which is our change color element so change color dot style dot background color is going to equal the color all right so that's good there and let's go ahead and create the other function to build that list of our other buttons those other button options so we're going to create another function here and i'm going to call this construct options okay and this is going to take in some button colors and we're going to add this array of colors here in just a moment let's see needs to be like this actually we might as well just do it now let's create a const button colors equals this is going to be an array and i've actually got some colors already selected here let me just copy this all right so here's some button colors now down here let's go ahead and continue actually go ahead pause the video add those colors in now we'll continue alright so i'm going to continue on to this and then in here to build these colors what we have to do is we need to fetch the color that's in storage so we're going to do chrome dot storage dot sync dot get and we're going to get the color i don't know why i put a space in there all right so we're going to get the color and then this has a callback doing my commas in the wrong spot here okay and we're going to pass in some data here all right and then we'll do const current color is equal to the data dot color okay we're just plucking the color out of our array and then we'll do a four of loop so we'll do four let button color of button colors okay this is our array of colors and then we're going to do we need to create a button here so we'll do const button okay and we're gonna do document.create element so we're gonna create a button element with this and then now we're going to create the um that data attribute that we were using up here all right so we'll do our button dot data set dot color okay so we just created the attribute here and it's going to be equal to the button color okay then we're going to do a check over here and we'll say if the button color is equal to the current color and then now we're going to go ahead and add that selected class so we'll just do our button let's see what is it a class list i think it is yeah dot add and then what did we name this selected class name all right perfect so now when we click on these buttons if the color matches the current color then we're simply just adding the class and then while we're here inside of the for loop we need to set up those click events on each one of these four buttons so just below this and still inside the for of loop we're going to grab the button add event listener and this is going to be a click and then we're actually just going to call the function that we created over here all right so we're just going to pass it in like this and then we need to now actually build out those buttons so we'll do our button options and we need to append child the buttons that we just created all right so we're selecting the element get element by id which is our div options and we're simply just mapping or sorry not mapping but looping through our button colors and just creating a new button element on each one of those iterations adding the event listeners and then appending that to our button options element which is that div tag that we created all right so this is all good and now we just have to invoke this function so down here we'll say construct options and then the parameter is our button colors so did i call this button options i already forgot no it's button colors all right so we've passed in the button colors here i'm going to save it so everything we've done here we should now be able to see this in our html but before we move on to that is we're doing some new things here before in the background js we were just fetching the storage right but now we're actually doing some scripting here and we have to add these permissions into our manifest file so we need permissions to where's my permissions right here at the bottom all right so we need permissions to the active tab okay because we're running javascript in our pop-up on the active tab so we need access to the active tab to access local storage and to set that and then also we're running javascript so we need permissions for our scripting all right so i'm going to save this let's hop into the browser let's refresh and if we click on this i don't have my button colors coming through and this is in our javascript file and it doesn't like my emoji alright so over in our code what do we have here so we know that the buttons are being built but they're not getting a color all right so we've got our four of loop we're creating the elements that's working dataset.color if it's a current color oh we're not even assigning the background color here we're we're doing the data set but we're not actually assigning the background color so we'll do button dot style dot background color oh what did it do background color there we go is equal to the button color all right so that should fix that there and then over here it didn't like our happy emoji let's go ahead and try this again so we're going to refresh this all right there we go so now we've got our selected class so this is working and if i set this to red and then open up a new browser tab we should still have red all right perfect so it's storing this in our local storage now the last thing that we're going to do here is i want to show you how to override that new tab default that's another very popular extension behavior is to override the default tab of what loads in it all right so let me go ahead and close this and what we'll do is back over into our code what do we want to do let's first do the manifest file here and we'll do this just at the very bottom here under the permissions there's a key that we're going to add and this is called chrome url override all right and then this is an object don't want that space in there so inside here what we're gonna do is there's actually a few different keys that you could use for the name of this the one that i remember off the top of my head it's called new tab but this name is very specific there's also two other options that you can choose and we'll grab the same behavior this is used to override what displays in the new tab so we'll do new tab and we're going to point this to an html file and we can name it anything but i'm just going to call this new tab.html and let's go ahead and create this file real quick so new tab.html and then in here we'll do our html let's see we need a head tag we'll do a title hello new tab and then here in the body we'll just put a header one tag and say hello new world all right and again when we're overriding these tabs we have to have the permission for it and we just so happen to already have it here so the active tab that new tab that's opening we are allowing permissions for this to happen and you'll notice a pop-up come up uh when we try to open up a new tab now all right so this looks good actually this needs an s chrome url overrides all right so now we'll save it let's go ahead and try this out and refresh so now if i open up a new tab we should get a pop-up and we didn't actually it's because i've already accepted the pop-up but if you if you're doing this for the first time there's usually a pop-up that says hey this um this file is trying to override default uh behavior so you have to give it permissions all right so that's the basics of building a chrome extension congratulations so we've gone through it we've built a pop-up menu here and we are using some chrome apis to store the color into the local storage and we've also written some functionality to override the default behavior of a new tab that's being opened so congratulations the last step is to publish this so if you want to publish your chrome extension you're going to be going to chrome.google.com forward slash web store forward slash dev console forward slash register all right and then what you'll do here is they have a five dollar registration fee it's just a one time thing so after you pay this you're going to be able to log in with your google chrome id your email whatever you're logged in as and then there's going to be a button that says add new item you'll just click that and just grab your project and upload it it's going to zip the project for you and then there's a form that you'll fill out you'll add your title description some information about it upload some cool screenshots things like that and then once you submit it if you're submitting a chrome extension that doesn't have any permissions it could take anywhere from like maybe 10 minutes to an hour so not too long and then you'll be able to search for on the chrome extension marketplace if you do have permissions in your app like the chrome extension we built it has some permissions it can take a little bit longer because they have to go through and make sure that your overrides and your scripting isn't doing anything malicious and that's a wrap for this video if you like this video go ahead and hit that like button and be sure to subscribe for more code and tech related videos until next time

Channel: Devslopes

Views: 7,891

Keywords: how to create a chrome extension in 2021, how to create a chrome extension javascript, create a google chrome extension tutorial, beginner web development tutorial 2021, chrome extension development, chrome extension development javascript, chrome extension development tutorial, chrome extension development getting started, google chrome extension development 2021, beginner web development projects, chrome extension tutorial for beginners, web development for beginners

Id: FB2gJBoSshM

Length: 34min 7sec (2047 seconds)

Published: Tue Apr 20 2021