I Built My First Google Chrome Extension!

what's up everyone i imagine a lot of you are users of google chrome and you've probably even used google chrome extensions but have you ever thought about what it would take to create one well in this video i'm going to show you how to create your very first google chrome extension so let's go ahead and dive on in all right so i talk about this a lot when you're a developer you kind of transition your mindset from being just a consumer just someone who like takes in websites and applications and uses them and you kind of transform yourself into a producer you look at something like a website or an extension in this case and you start to think hey maybe i could build that thing and i could build it better or differently or i could build something that doesn't exist that's where that's where this video idea actually came from me so one of the issues that i was trying to solve is when i go to share my youtube videos to go and find links to recent videos i have to go to youtube i have to click on my channel i have to then go and find the video click on it open it then copy the url for that video and if i want to do multiple videos i have to do that multiple different times and i wanted an easier way to do that and i thought why don't i create a an extension in google chrome where i can just hit a drop down and then grab links and you can see in here actually uh this is the extension over here the jq youtube links and uh when i click on that um it pulls up my most recent 10 youtube videos and i can either click to watch this will open in a new tab there to go ahead and watch this video uh shout out this is the the conversation i did with justin ciao about life outside of or beyond programming and then also i could just copy that url so if i copy netlify serverless functions which will actually be relevant today and then paste that in you'll see that it takes me right to the video so that stuff is working which is pretty cool so what we want to do is go ahead and set up how to create your first google chrome extension and i will put a link to this this is where i started this is an article in sight point of create a chrome extension in 10 minutes flat uh it gives you the basics well we're going to walk through that stuff today so i've got open a google chrome not a google chrome a vs code window with no files in it and i think the way you start traditionally is by creating your manifest.json that's usually going to be the first thing that you create and inside of here you're going to have several different things the first is the manifest version i haven't looked too much into this but from the things that i've seen too is the version that people have been going with then you'll have the name of whatever your extension is in my case it's jq uh youtube v youtube links and then you'll have a description so in here obviously just give a basic description of the extension shows recent youtube video links from jq not ww and then the version of the extension in this case going to start off with 1.0 and then you would need to increment this every time you go to republish this and then kind of the meat of this gets into the browser action and what we're going to define here is in that object two different properties one is the default i con so you'll need to have an icon in here and you can do icon.png you could use anything it's not super important here especially as we're testing but you could use something like sketch or figma to create an icon and then pull it into your project here i am going to copy this one can i copy and paste that right inside of here there we go so this is just a little youtube icon that i copied and put in here so i can reference that one so we'll have the icon and then we'll also have the default pop-up now this is basically going to be the html that shows when the user clicks on the extension so in this case we'll just call that popup.html and the last thing we don't need any specific permissions here but you could have in here an array of permissions of things that you need access to with this google chrome extension so that's all we need in this thing again the the power of this really comes from the default pop-up if we spell that correctly and this is pop-up not just pop so default pop-up this is going to be the html that shows when the user clicks on the extension so we can also go ahead and add our pop-up html file we will have a pop-up js file because we'll need to do some javascript and then if we want to do some styling we can have a pop-up css all right so inside of the html inside of vs code you can do just bang and get the emit abbreviation here for an html file and we can call this the jq youtube extension i'm not even sure the tile the title shows up extensions or not but anyway so we've got that there and then inside of the body we're not going to put too much so i'm going to have a little bit of base styling we're going to wrap everything in a container just to give some spacing and then we'll have an h2 here for just the title jq youtube links and then we'll have kind of a placeholder of our items that we want to display so this will be an unordered list with an id of links list and this is the thing that we're going to make a call in javascript to go and get these links and then i go ahead and display them so the last thing we'll do is we'll pull in the script of our pop-up js so pop-up js all right so that is there so at this point we can go ahead and actually kind of use this thing so if you go into chrome colon slash extensions you can see all the extensions that you have included and i've got one already done for testing the jq youtube links i'm going to turn that one off and then under load unpacked basically what you can do is you can kind of tell it what folder your stuff is in so in this like test folder uh jq youtube extension i can tell it hey just look for the files inside of this folder and then if i go to my extensions drop down and now look there should be the jq youtube links so let's pin that and then i'm going to click it and you see all we get is just like our little bit of html which is that's what we want and that's all we need at this point so that's able to work and then now we can go into our javascript file and start to work on some of the logic there now we need to wrap everything inside of the dom content content loaded event and the callback here is going to be an async function because we're going to make a request to what actually is a serverless function to get back the list of youtube videos that we're going to display here so that's what we're going to do we will get a reference to the links list equals document get element by id and we'll get that from the links list and what we want to do is then make our call to our server list function now this is kind of kind of a separate story so i want to take a break here and just kind of show you inside of netlify i've got a serverless function called recent youtube videos and i can call this thing and it will show me the recent youtube videos inside of here so there's all the information that we need we just need to call this api now if you're wanting to do something for yourself if you're interested in in setting up netlify serverless functions also uh this netlife serverless functions with netlifedev will talk to you talk to you teach you about how to set up those serverless functions inside of netify also to test them locally and then get those set up in netlify so you'll be good to go there if you need it otherwise you can use something simple maybe the chuck norris api is something that you might be interested in to just generate a random joke to kind of give yourself a laugh for the day it's a free easy to use api so you can find whatever works for you but in this case i've already got kind of my api deployed to netlify and that's what we're going to call so i'm going to copy over this url and i'll just paste that in there and then we're going to make a fetch request now i i think this is kind of kind of cool here where i have a fetch um snippet inside of vs code where it will do like the try catch it will go ahead and set up the actual fetch there so i can pass it the url and uh it's basically all the kind of kind of the boilerplate code that i would need in here to make that request and then this data that comes back is actually going to be videos all right so that looks good we'll be able to get all that stuff now what we want to do is take those videos and actually transform them into basically lis so let's do this with we'll say videos html equals and we will take our videos and we will map over them and so for each video what do we want to return well we want to take the information for that video turn it into an li a list item and then go ahead and use it so the first thing we want to do is get the video url now this is not something that comes in the api that i created what does come in the api is the video id and if you look at the format for youtube videos they're usually youtube.com watch and then question mark v and then equals and then the youtube id so that's what the url is actually going to end up being so the video url is going to be let's just do es6 backticks here and i will do https www.youtube.com watch and then v equals and then now we'll use the value of the video id so video dot video id all right so that'll be our url there and then now we want to like i said generate the actual basically an html string if you've seen react this will probably look a little bit familiar but i'm going to return an es6 template literal string and we'll start with an li and if we open it the correct way we will add a couple classes or just one video link inside of here all right so there's going to be our li we'll go ahead and close it out and then inside of here we're going to have a button with a class of btn for button and then we'll have a property data url equals and this is a little bit maybe confusing for all this templating in here again we're inside of an es6 template literal string so when we set data properties or classes we need to surround them with quotes and then put whatever value we need in there so we're going to put the video url inside of here and this will be the copy button all right so we'll have that copy button and then we'll have the anchor tag with also a class of buttons just so the styles are similar there and we'll have an href and again this will use the video url so this will actually take you directly to the url versus the copying part all right so there's the video url and then to make sure this opens up in a new page we can add a couple of extra properties here no opener and no referrer as well as the target equals underscore blank all right and i will close that out we'll title this as watch and there's our anchor tag and the last thing we want is the actual video title so we'll just say video dot title inside of this li so what this is going to do is it's going to generate an li element for each one of those youtube videos and then it map basically puts that into an array so we want to convert that to a string by calling dot join down here so at this point what we'll have is an html string with all those li elements inside of it and we want to go ahead and add that to the inner html of that links list so this will be the videos html all right so let's uh let's save that and let's just see what this looks like uh what we can do this won't this won't work automatically so what we need to do is basically tell google chrome to go ahead and refresh those files so we can say just the refresh button here and now we can click on this and hopefully this will populate oh it looks like i've got an error here on the inner html all right that's kind of cool that it actually shows you that there so this should be the links list thing that we get up there and i think we mis misspelled our on our order list here of linked list so we want to make sure we spelled that correctly and now let's come back and let's refresh this again and let's click on it and now this doesn't look great but you see we've got our copy url and we've got our watch now the watch should actually work that should actually take us to the youtube video so that part at least is working and the only thing we need to do after that is set up our copy now you can look up let's see copy text in javascript it's a little bit hacky basically what kind of happens is you you end up selecting uh some sort of text from an input so you do some sort of select and then you run the execute command and tell it to copy and then you can uh you actually have that stuff copied to your clipboard so the the interesting stuff that i found is it basically like takes the the text that you want to copy which in this case is the url it then creates an element on the dom with that text in it it copies it and then it gets rid of it completely so the user never actually notices so that's what we're going to do is go ahead and create that function so we'll create the const copy equals uh it's going to take in e as the target there and we want to get the url from that from the element because remember we have the data url property here so we want to grab that url as the thing that we want to copy so we'll say string equals e dot target and to get any property off of your data set is dot data set dot in the property that you want to copy so notice that url matches uh what comes after the data dash there all right so we've got the the string then we want to create an element so document create element and we'll create a text area it's not really important what this is and then we'll say the text area value equals the string so this is where we're putting it into that text area now we add it to the body so document.body.append child we'll add that thing to the body and then we will select its text so el.select and then we will copy its text so document.exec command we'll do the copy command here and then after we've copied it we'll go ahead and remove that thing so document.remove child of or with the element that we created above so this is a little bit kind of hacky honestly it seems a little bit odd but again what we're doing is we're taking in this element that the user has clicked on or clicked the button for and we grab the property for the url and then we create a text area we add the value of that text area to be that url that string we add that text area to the body we copy that we select the text we copy it and then we remove the child and the user never even knows that this happens which i like is kind of hacky but i also think it's cool so the last thing we want to do is make sure that inside of here we go ahead and update our each one of our new items that we create so each one of these lis that we create we make sure that we set the on click command to this copy here so we're going to have a little bit of kind of a scoping thing in here where the the function that we just defined is inside of this callback so it's not global to javascript so we can't just set the on click inside of html we need to do it in javascript so what we'll do is after we add all of these li elements to the dom we will now iterate through the new links that we just created and update to add their event listeners so let's get a reference to the video links and this will be a document document.query selector all and then these have a class a video link all right and this will return what is called a node list we actually want to copy or convert that to an array and we can do that with the spread operator in javascript by just taking each one of those elements and dumping it into an array and because of that then we can use the four each in javascript so for each link we want to set link.add event listener the click to be that copy function and this should kind of take care of everything else that we need uh let me look i think this looks right so let's go in let us i think we can these are just old errors let's clear those because i think we're good here let's refresh this and uh let's pull this down and we see the links we should be able to hopefully copy the url there so there's the copy and then i'm gonna paste it in no looks like that didn't work all right so looks like that didn't quite work let's see what we might be missing here and i think the thing we're missing is we never actually set the on click handler because we didn't query the right thing this should be dot video link so query selector all you pass in your classes and ids versus like querying by class or id specifically this is just a general query so hopefully this will change it and i added a an alert in here for testing so i can just leave that in and we'll see if we're getting that back okay so let's refresh this extension let's come in and let's click the copy url this should pop open an alert to show me the link that i copied and uh then if i paste this in this should take me to that conversation with justin chow all right so that looks like it came back okay and then uh let's just try one more to make sure these work in the uh let's do the netlify one so nutify serverless functions let's copy that thing and just make sure that that takes us to the right page as well all right and it looks like it does so that's really cool um just kind of a quick recap here on what we did for a chrome extension the cool thing is this basically really just comes down to html css and javascript you can do whatever stuff you want to so um inside of the manifest json you can define a few things the version the name description uh the version of your extension specifically and then the browser actions so the default icon so that's the icon that you see and then what thing do you want to display when the user clicks on that extension pop-up html and then from there it's basically just regular html css and javascript and i can change let me throw in just the very basic uh styling that i threw in here so let's do that and then refresh so just to show you that you can add your css now did that get i don't know that we probably didn't pull this in as a link so let's link to css and this will be the pop-up css alright so now let's try again to refresh this and we'll see if we get something stop there we go so this is what the final version looks like so again it's just kind of regular uh html css and javascript which is pretty cool all right and the last thing i want to show you is just how to uh what you would do to actually publish this chrome extension so if you come into developer.chrome.com it costs you five dollars to kind of register as a developer so i did that and then what you'll do is you'll take all of your files and you'll zip them up so you'll create a zip file with all of your files in it all right so inside of the chrome developer dashboard is where you want to be uh once you get to the chrome developer dashboard you can see that you can add a new item and then you can just upload that zip right there and there's some other metadata and things you have to figure out but that is how you would go through and actually publish just create a zip throw that up on the google chrome developer page and add in your metadata any screenshots or things you want to show people about how to use it so that's it uh pretty pretty cool i think that we can use our basic html css javascript web development skills to upload and create a google chrome extension so if you enjoyed the video if you want to see more if you have ideas on things let me know in the comments i'm kind of curious have you have you created a chrome extension if you have any cool chrome extensions to share throw them in the chat below if you enjoyed the video make sure to like subscribe and turn on the notification bell so you can get updates as new content comes out in the meantime thanks for watching this one and i'll see you in the next one

Channel: James Q Quick

Views: 21,664

Rating: 4.9084506 out of 5

Keywords: chrome extension, how to make a chrome extension, build a chrome extension, browser extension tutorial, web development, chrome extension development, create chrome extensions, how to make a chrome extension javascript, how to make a chrome extension beginners tutorial, chrome extensions 2020, html, css, javascript

Id: 3Xq_QfYdmMQ

Length: 20min 52sec (1252 seconds)

Published: Tue Aug 11 2020