Coding Challenge 4 Extensions In 2 Hours - How to build a Chrome Extension

hello and welcome to this new year special where we're going to be making five extensions in this one video so the extensions we're going to be making is first is a word of the day extension that'll be in a new tab then we're going to be making what i like to call epic mode to play music in the background whilst you're browsing on any tab and you can select between three different music tracks which we'll grab from the youtube music library after that we're going to be building a simple web scraper so this will let us perform a number of actions on a page and either press buttons or grab content from the page and i'm actually going to be making a more in-depth and advanced class on skillshare on making a webscraper extension so you can find a link to that below but that's not launched just yet and then finally we're going to be building a to-do list pop-up extension that will let you at add in your to-do items mark them as complete and then delete them so they're the different extensions that we're going to be building and i'm going to start with a with the code i made in the last video which is a bunch of starter templates for making extensions so if you want to use the code that i'm showing in this video you can either download the starter or you can download the completed code which you can find in the description but otherwise let's get started in this first extension we're building our word of the day so i'll show you over here some notes that i've put together for this extension okay so here we are so it's a word of the day simple enough so it'll be in our new tab and whenever we open a new tab we want a really clean design and it will show us our word of the day and then a dictionary description of what this word means now luckily there's an api that can do all of the heavy lifting for us so all we need to do is call this api in our background page find out what the word is what the description is and then display it nicely on the page so here is the api that we're going to be using so we'll sign up and make an account and then we'll start getting working on the code so what we're going to be doing here because it's a new tab extension we're just going to duplicate a new tab over here so we'll duplicate and we're going to call this word of the day and there is a folder that we're going to be working with for this extension so we'll update our manifest add a new description and then here is our new tab.html so we'll save that we can delete this music here because we don't need that and there is our new tab so we're going to change this again to word of the day and then delete everything else in here so now we're ready to get started connecting up to our api so if we go back to our notes here we're going to be registering an api account with this uh site here so if you want i've added a link in the description to this service otherwise i'm gonna go ahead now and set up my account so before i create my account i'll show you what this api documentation looks like so as you can see we have a number of different endpoints for this api and we're going to be using this one down here word of the day so all you need to do is you just pass in the date so for example today and then you click try it out and it will give you your response so there's your word and that is what it means where is it yeah that's what it means so it gives you a definition and more information about that word but all we need is the word and the description so now we need to go ahead and create our api key so i'll go ahead and get mine created now okay so one small problem of this api is that it takes sometimes up to 24 hours to a week for you to actually get your api key so what we're going to be doing is coding the back end with some set uh random words that we can use with descriptions and then we're going to display these in our front end so once we actually have our api we can then update just this one part of the code of the extension and everything else will still work exactly as we would expect so don't worry about this if you have this same problem so just follow along and you'll be able to still build the extension so what we need to do still is go back to the docs and find our word of the day so down here so we'll put everything we need for this call in our code anyway but we'll just comment it out for now and replace it later so what we need to do is go back to atom and start preparing our page for these words so we're going to keep it really really simple so we're going to add a section tag just here where all of the content will appear and then inside this we're going to just have an h1 which will be our word and then underneath there'll be a paragraph tag with a description of this word so it looks something like this and then obviously you want to add a bit of styling to make this uh stand out nice as well so we'll add a style sheet at the top here and set our body now one thing that you could do is also add a random unsplash background image so we if we have time i'm just trying to keep an eye on how long this is going to take we can add that as well but to begin with we'll just put a nice smooth background color so if we just load this into chrome now let's see what we have so far okay so here is our word of the day extension so far now as you can see we want to have this centered right in the middle of the page with our word actually much bigger than this and a description probably in a slightly different font as well so we'll just tweak this slightly so we'll go to our section block display flex line item center and justify content center as well not quite what we're looking for okay so there we have this part but we want to make sure that we fill the whole page as well so to do that we'll do exactly the same thing with our body we can see that yeah we need to adjust the height just tidy this up okay and then we'll just take this away okay so here is our um word information sent into the middle of the page no one's just add a bit more styling here so if we go to our section h1 we'll make this huge on the page and then we can remove all of the padding and margin associated with this as well [Music] and then we'll do a similar thing for our paragraph so we'll change the font size about 1.5 and see how that looks okay so now what we need to do again we're making this really simple we're going to try and move these as through these as quickly as we can so we need to make sure that this uh word can be dynamic so it can change each time so what we're going to add is a background page that we can make calls to this is where we'll be calling the api as well so what we need to do is add a background page over here now if you're following along using the same templates what you can do is if you look at the manifest of our background message just here you can basically copy and paste the code from that page or from that manifest into uh extension just here so now we need to add a background.html into our page so if we just go new file background.html and then in here we're going to add another new file this is background.js now you can add a background script in directly but i think this helps you to keep things a little bit more consistent like this so all i then need to do i'll just copy this across is paste this in here and then call background.js so what we have now is a manifest is the same as it was before just this new object added into our manifest that calls in a background page that's persistent false which is important and then in here we just call in our background.js and this is where we're going to be doing all of our interaction with the api and with our front end so all we need to do now is make sure that we have our script.js open and background.js open so again if you want to follow along a little bit easier what you'll notice if you go to the background message example extension and just copy this event listener into your new background.js and then from the content script copy where we're sending the message and paste that into here and then you can then close that content script and close that that background message function so what this has done this code here lets us interact with each of these files so our content script can talk to our background page and our background page can talk to our content script so what we need to do is make sure that when the page first opens we ask the background page to find out what is the latest word that we can use so what that basically means is in our script just here we're going to send a message to our background page saying fetch fetch words and then what we would usually do is in here we would call the api wait for a response and then send the response so once we have our api keys we can do this and what you would find is if we tried to call this now without an api key we'd get an error so it'd say something like this no root matched yeah okay so if we call it like this so we've got our api then the version then words.json forward slash word of the day then put in for today's date in this format so that's year month day and then our api key so we just copy this and replace what we had so far and then we'll set another variable up here which will be our api key and we'll just call that in like this so we'll have so once you get your api key um email that gives you the api key so hopefully it doesn't take too long but again it could be from 24 hours to a week we'll then update that and then all we need to do as well is change this part just here with today's date so we'll call that date equals new date and then we know what format we want so let's just adjust this and then add that into the string as well okay and then we'll just make sure this is in the correct format so to make sure that we get the format that we want what we're going to be doing is using this new date so we're using the date object and then we're going to set this to an iso string and then we're going to only use the first uh 10 characters from this string and then cut off the rest so that will look like this we've got the year the month and then the day so if we just test this now so we're going to run this code and then say console.log api call and add date string just so we can see which part is which and then down here um we'll be able to see this when we get our response this is our script here um but first we need to update our background page just to send information so what we've what i've just noticed i've written this in the wrong place um but that's fine for now so down here we just need to change this listener in our background page from message to fetch words this is where we actually want to make this api call so we'll just copy all of this just here and paste it in here and so instead of having that in our content script we're going to remove all of this and then just say console log response we can remove this so save that and then in this page over here our background page we're going to just send a response of our api call so we'll just call that api and then paste in that variable just there and then the next one will be date and we're passing the date string just there so if we now refresh our extension what you need to do is go into the extensions here and then press refresh and then go to your new tab and refresh again then we want to inspect the code here and see what we have so we can see an object has been passed back we have a uh api that we're calling and then the date and that is the correct date for me just here so this would be perfect except we don't have our api key yet so all we're going to do now is just change this a little bit so in our response here normally we'll be calling a fetch that would call this api and then wait for the response and then send it to us then but because we don't have that api key yet there's no point in us doing this so what we're going to just do is set an array of different words and then we're going to pass in a description of these words as well so what we're going to do is say const words object that'll be like this and then here there'll be an array so what we're going to have is a list of words so i'll just fill this out now and then come back okay so here we have two arrays of uh information so we have our words and the description that is associated with that and then all we're going to do each time is uh when we get into here we're going to randomly generate a number from 0 to 4 and then call in this word and this description so we'll change our response to be word and description and then we'll just get our random numbers this will be words object number and then words descriptions object number so look like this and then over in our script.js we're going to be listening for this response so then all we need to do is make sure that we update uh h1 and our paragraph with the new information so all we need to say is document query selector h1 inner html equals response word like that and then we'll do the same thing for the paragraph tag response description so if we refresh this now if i've done this correctly that should update each time so first we need to make sure that we're getting our random number so for that we're going to create a function up here where we set in our max number so for here we know our maximum number is four so we want between zero and four so we'll just use this here and then say number equals get random number four and then all this will do is use the math random function which will be a float a random float and then we'll times this by our maximum number that we want so this should work let's just find out okay it's almost right but what this actually does is that is uh one number below the number that we set so if we just change this to um number and then say max equals number plus one this should mean that we're always getting a random number between zero and four and this means as well if we only wanted to add more um different words in here you could do that as well but again we're going to be using the api soon this is all just um as a placeholder until that point so if we go into here now and refresh extension open a new tab we can now see that we get random words and description each time now obviously there's not too many words in here but this is a great way to get started and you can see how this would work now one thing i want to add into this video as well as a few ways that you could improve this moving forwards now the first thing i think you'd need to look at for an extension like this is a way for people to favorite certain words then you could have a sidebar over here where you could look through your past favorite words and see the definitions so you can expand your vocabulary and things like that so that's one way that you can improve this extension um but what i'll do is once i get my api key i'll upload a video onto the channel that finishes off this particular extension but you can see from here this is actually already pretty much what we set out to build in that we've got this really simple display in our new tab with a word that we can see and a description that goes with this okay so that's the first extension okay up next we're building a extension we're gonna call epic mode now this will appear in a pop-out so we can click a like the icon up in the extensions tray and this will make a little window appear and there'll be a drop down where you can select a track of music we'll just call it one two three and then depending on which one you pick that will start playing that music in the background so even once you close that pop out we're going to be playing this music in our background page so for this we'll copy the pop out option just here so we're going to copy this duplicate we're going to call it epic mode and then close all the other files we've got here and we're going to open up our html file and then we're going to change this a bit so we're not going to be playing the music in here again if you want to find the starter files for this it's in the description and there'll be a separate link for the finished code um for the end of this video as well so that would be this point here so we've got our pop out now what this is basically going to do is depending on when we click play it will find out which option we have selected in our drop down and then send a message to our background page to then play that file so as you can see i have an mp3 file in here already i'm going to delete that and because we're going to download just three random tracks from the youtube music library so we're going to go there first so here we are in the youtube music library now there's a number of different ones but all i want is the three longest tracks so this one okay so you have to have this if you're using it in a video but for the extension you probably have to add some part some type of attribution to this inside your extension but for this video um as it's just an example i'm not going to add that in but if you're going to be using this in production and actually out in the in the web store and out there then you definitely need to add some sort of message on here as well so that's the first one the second one and the third one so there's our three files downloaded so i'll come back once those are downloaded okay so the files are downloaded now so i'm going to open these and paste them into my folder so they are i'm just going to rename them track one track two and track three just to keep it easy so track one okay so there's my files so what we basically need to add now is a select element in here and then the three different options like that and then just in here we're gonna add a value of one will default to the first one being selected and then all we're going to add underneath is a button that will say play and then in our popout.js we're going to add an event listener for when this play button is clicked and that will then send a message to our background page so that'll be in here now what we're going to do next is add a background page so that'll just be a new file in here called background and then in here this is going to be it's not going to be visible on the screen so it's just going to be an audio element with the source of this actual file so if we had it like this and we added it to say auto play if we added this extension in it should start playing straight away so if we just check this now so here's what we have so far so we've got play random music track one track two track three so we're going to change this and change the manifest um to be our epic mode extension that we want to have so again we're going to close epic mode make browsing epic there we have it we'll change the title here to epic mode and then what we actually need to do is add our background page into our manifest as well so as we did last time for the word of the day we'll just copy this across just to make it faster but one thing we need to change in here where we had persistent false before because this is a audio element it's going to play for a long time or potentially a long time with the size and duration of these uh files we need to make sure we change this to true now just to point out this isn't the best way of doing something like this if you're using it in production especially manifest version 3 is coming out you'll probably have to change this um but for the this for this video it's okay um it will work and it will be this example um because what we're trying to do here is show how you can quickly put together extensions as an mvp or a way to prove how an idea could work so there is a background page so if we go back and refresh our extension you can hear the music is playing so that means that the code in our background page is working so we can take away this autoplay part just here and just give this audio element a class like that and then we're just gonna stop this extension okay stop that from playing and then all we need to do is add a javascript file for our background page as well so something we can send a message to um so what we'll do is add a new script in here so we'll call it background.js and then we'll just add that into the background page like this okay so that's like that and then if we just go now across to our popout.js what we're going to do is say document query selector and then we want to listen for our button then we're going to say add event listener for a click and then we'll run this function then in here what we want to do is first find out what is the value of our selected element so if we go over here and see this here and inspect just make sure we can see what we're doing if we do document query selector select that should grab this element just here and we want to find the value of our selected element so let's see that's one and if we change it to two and then just go back over here and run it again you can see it's changing so that's the code that we want to use to grab the value of our selected element so if we go in here we'll say value or selected track equals this and then what we're going to do now is similar to in the word of the day function if we look in our script just here we can see we're sending a message now all we need to do here is just copy this first part and say send message play track and then track is cell track we don't need to wait for a response so this is all we need to do then just make sure that we close the event listener off like that so what we have now in this uh code just here is our pop-out html file is going to open up it's going to show the selector and the button when they click the button in our popup.js file just here we're going to wait and listen for that event grab the track that they've selected and then pass that through to our background page so in our background page i'm sure you can guess by now we need to do what we did similar to our word of the day function is we're going to add a listener in here to see which events have been fired so we're listening out for a particular event so what do we call it again play track so if we hear the uh play track message we want to run this code in here so all this needs to do is adjust the audio element in our background page so what we're going to say in here is document query selector audio element i want to grab that so we first say audio element equals this and then we can just say audio element source equals and then we just check what this was so we're just saying here it's this but obviously we need to make a slight change so it'll be um we'll say track name equals message what do we pass in again so it's message.track just here so then we would just update this part just here with our track name so i'll update the source and all you need to do is say audio element play so that should do what we need to do so we'll just check this then we make a few styling edits for this extension so let's go across now and refresh go to our page over here to make a new tab click on our epic mode select a track and press play and it's working so if we then change this track if i just turn the volume right up you can hear that if we change the track three press play it stops and starts playing the next one if i can hear it yeah so if we click away from our pop out you can see it still works so if i go and browse any website like this for example we can see it's not affected by any of the tabs that i go on to so that's playing within our background page now again as i mentioned it's not the best way to do it through a persistent background page but for this example you can see we've tested this idea and then you could share this across to a few people to see if it's something they're interested in and if you found that people are using your idea you can then spend more time to look into this idea this is a great way to build a quick mvp using the extension so finally before we finish off this one we're going to just adjust the uh design over here a little bit so let's just um stop this from playing we should probably add a pause button as well actually so let's add that in now so to add a pause button we're going to go back to our popout.html and add another button just here called pause and what we should probably do next is add some classes in here so i say pause and add a class here that'll say play and then in our popout.js we're going to make sure we change this to be button play and then we'll add another event listener on button pause and then all this will do is uh we don't need to get the selected track so we can get rid of this bit and then we're going to change this to say pause track so we'll save that just there then we want to add a little bit of styling so we're just going to say epic mode up here now i want to keep the styling really simple so if you want to add your own design to this and launch it you can so we'll just put a body a width for about 400 pixels background of gray again and just try that so what have we got so far so there's our new display so we have our pause button but at the moment we haven't linked this up to anything so if we press play we can hear that this is playing the music and in the new um version of chrome you can see this information over here but if we then press pause so i just turn the volume up a little bit at the moment this isn't doing anything so i'm just going to refresh that to stop it so what we need to do is go to our background.js and add an event listener well add to our event listener for this extra new event so we're going to change this to pause track over here and then i'm sure you can probably guess where i'm going with this we need to get our audio element again and then instead of play it's going to be pause like that so if we refresh our extension now we can test this out so let's go to another tab again refresh to make sure up to date go to our epic mode pick a track press play see if we can hear anything [Music] okay so we can hear it now and if i press pause it stops it okay so that is epic mode you can find all of the code for that included in the description as well okay so next we're going to be making our to-do list extension now this is going to be in a pop out in the corner as we did earlier with our epic mode extension now this one is going to let us store our to-do items to local storage and then we can mark them as complete and then when we're finished with them and we want to just clean up our to-do list we can then delete them from that list so it's going to be based around local storage and we're going to have one json object that we're going to be loading when we open up the extension and we'll make all our updates into this json object as well so let's start by going over to atom again and we're going to duplicate the pop out option here so we'll go in here duplicate actually we'll probably duplicate the epic mode just because that's got a little bit more code in there so it's easier for us to follow and again saves time so we're going to call this to do so really simple to do list and then here we have it down here so we're going to close everything else and then open up our to-do list so let's go to the manifest first after we delete our music okay so let's go to the manifest and change the name so we're going to call this to-do list this one won't need a background page so we're um that saved us a bit of time there as well so we can delete the background.html and background.js just there okay so all we need is our popup.html and uh popout.js so in our pop out.html we're going to change the display here a little bit so let's remove this styling change this up here to say to-do list and up here we're just going to say my to-do's like that okay so we're going to remove all of this code and then we're going to think about how exactly we want this to display so ideally we want to have a number of rows and then on these rows we can find out the status of each of these items so it could look something like this we could have a an unordered list which we could adapt or we could have a div and then inside here we have other divs like that these could be our items and that's just like a hold element but for now i think we should just use an unordered list um which we can then style and adapt before we need so then each of our to-do's become a list item now inside here we should probably add a button to mark as complete and a button to just delete so what we'll do is first we'll set it up here and then we're going to adapt this in javascript as well so first we'll have a little line of text so a simple to do like this so record next video and then over at the side here we're going to have a span which is complete or we could have a tick so we use emojis for this and then we have another span to delete okay so if we just test this by copying this and pasting it a couple of times and then we're going to open up this extension so if we go over here find our to-do list pin it open up okay so we can see that this is it looks a little bit like a to-do list but we need a little bit of styling here now so let's go over to our style block over here we're going to add a class to our ul and we're going to call this to do items and then we'll copy this put it over here so just say margin none padding none and then add that as well to the allies inside of here like that and then we actually need to do as well is extend the width of the page so let's just set that as 350 pixels maybe slightly less maybe just 300 okay so in here now we want to remove this this dot here so we just say list style none one thing we've just noticed is that's not we need to put that like that now if we refresh we should see the changes here okay so there we go now we've got our items we want to add a little bit of padding just to the item itself not the uh container so we'll grab this one just here paste that underneath and just put a padding of 10 pixels and a border bottom of two pixels gray okay that's almost what we want and now we just need to make sure that we have our icons at the end of the row so we'll do it just by saying display flex justify content space between so if we refresh this now we can see we have these buttons here which is almost right um i mean for now this is perfect but we probably want to make sure that this uh span is inside these bands are inside of an element so if we just put this inside of a a div just here and then copy that across that'll just nestle them next to each other so we can adjust the padding between the two icons uh separately yeah like that okay so that's what we want here um and maybe add a slight hover effect so if we go to this something like that okay so we can get a nice hover effect now for these icons here if we tick it we just want to have a strikethrough and if we press the bin it's going to be removed so again we'll just test the styling here so for this to do items if it's complete we're going to add a class called done so if we just force this class here or this item to have that class i will say done then we'll say text decoration line through so that first one now should have a line through it there we go but it probably shouldn't be across all of this so what we'll do is just add a another span here for our actual text element and if we have that class we'll make sure that first one is only applying it to that first span so we just put a little class in here called item and then if it's done we'll say item line three so if we look at this now yeah we can see that that's crossed out and then if we would press it for another one that would cross the right now for that as well so that is all we need here let's add a little bit more padding between these two items so if we just go to to do items div span then we'll say margin 5 pixels that should uh just about do it yeah there we go we've got a nice little display there we'll just make these a little bit bigger [Music] and add a cursor okay so these now look clickable there's enough space between so you won't accidentally click the wrong one and if we click these we can then adjust these documents okay so that's what we need there now let's make adjacent object that we can start to manipulate when we are storing this to our local storage so what we want to do is on our popout.js now which we're going to switch to we want to remove everything here and we're going to first write out a default json object so let's just say const items equals this object and then this object uh actually this will be an array of objects so this will be our first one just here so we'll have item so this will be the actual to do so let's just again say record next video and then we'll have the status so status and this will either be let's just put zero or one so again this one here [Music] is zero and this one will be one so this is our example one and then all we want to do is say um const item string equals json stringify items so if we console log this we should see what this actually looks like in action so if we go over to here again inspect elements go to our console we can see here that we have this list but if we were to go back now and add another console log up here just of items we can see this is we can interact with this one so if we refresh there's our items we can interact with but when you save this to local storage it needs to be in this string format so it's just this extra step that we need to do so what we'll have is a function up here called fetch items and this will make a call to local storage to fetch our items and decode it this will basically be [Music] like that and then we'll have another function down here to save items so whenever we make any changes we want to save items down here and that reminds me actually one thing we need to do is add a button so we can create a new a new to do so down here we'll just have a button at the top here [Music] called create to do and we'll just say new item let's have a quick look at that maybe a little bit of padding around it but that should be nice and if we click that we'll just have a box up here we can enter in our item and then save so let's just add this area as well so we'll call it new item and then this will default to be hidden okay and then in here we'll just have a input field and another button called save so once that's pressed that'll get saved into our object so we'll save this for now and nev whenever this is clicked this will toggle that to appear so let's just make a note of this here so our button um here so if this is pressed we need to make sure it makes that input area appear so that's new item just here so on click that will open this area just here and then for this one [Music] if the button's pressed [Music] it will save it and then hide that new item so save and hide new item so these will be the event listeners we need to link up in a moment but first what we're going to do is just make sure that we have a default items saved in so when we have our fetch items just here it's going to try and grab this from the local storage but we'll put this in a try block just in case in case there's this is empty so what we'll do is we'll say try and then enter our code and then put catch e and i'll just catch any errors um just here and then if there are errors we'll create a default a default item list so that'll probably be something similar to this but just with no objects inside there so next now that we know we've got our items we want to create a for loop that will loop over all of our items like this so it'd be an items array but first we need to convert this from a json string or a stringify json string into adjacent object so to do that we're going to say const items array or in this case variable items array equals json pass and then the item stringified string that we saw up here that we're going to save to local storage so that'll be just here and then down here what we're going to do whenever a change has been made we're going to pass in a string and then save that to our local storage so all we need to do for that is just say if i just scroll down here so we have our string it can either be a string or it could be the object let's just say object so then all we would do is we'd say string equals json stringify and then then we have the object and then all we need to do is say local storage set item to do items and then pass in our string so that will save it and that'll fetch it so now for this to actually appear on the page we need to go in and make sure that we are updating our unordered list so this part just here with uh the new items so if we just copy this for a moment and remember that we want to fetch the to-do items so in here we would have a would grab this element so i say const items list equals document query selector [Music] unordered list and then to do items if it's felt like that to do dash items like this so we've grabbed that there and then all we need to do in here is say so we're going to first up here we say items list in html we're going to remove everything and then we're going to say new item html so we're going to set this string up here and then down here what we want to do is grab just this part just here so we're going to remove this first class there and we're going to set this into our array so we're going to say new item plus equals then have this just here i'm just going to make this wrap around there we go and we're actually going to do because this is all in es6 is wrap it in these back ticks here so we can adjust the display a bit and go on to new lines like that so there we have it and then what we need to do is make sure that we pass in the different information if this item is if it's marked complete and then we can change this area just here to actually be our item so what we need to do is take note of the number in the index that this item is so we'll have a thing here where we put data item index and that will equal i and then in here we're going to replace this [Music] with the item part of this object so that'll be like this okay and then when we're checking to see if this is marked complete or not we need to check the status part of this so up here we're going to say if um items ray and then the number in this index status equals zero we don't want to do anything if it equals one we're going to set this class so if we remember over here we're going to set this class just here as done so if we go over to here we're going to say status equals empty but in here we're going to say status equals class done and then just in here all we need to do is just put status so if we remove this bit of code just here and save this nothing will happen just yet because we don't have any uh any data in our local storage but if we go to our extension over here and inspect and say fetch items we can run this code you can see that it removed all of the items just here but if we go ahead and take this uh code just here so this string object be sure to select it and if you say local storage set item and if you remember what we put here ah where was it to do items and then we're gonna put comma and then just make sure to be sure to get this just here like that and then save and then run fetch items again and the problem we have here is we need to go ahead and set this new inner html so once this for loop has ended if we go in here and set this to new item html and then go back to our code inspect element here run fetch items you can see now that this is if i just move this out the way that we can see we have a real item and our fake item just here so if we now remove this code from in here this is it's just an empty ul and then inside our pop-out at the bottom here we're going to run the code to say fetch items and what we will see if we go back and refresh it's remembering each time what we have here and if we were to go into the local storage and change this object obviously it won't be like this we'll we'll be able to change it within our own code um but if we see in here we have local storage and you can see the items that we have here now the way this works it displays the object um like this but you have to send it in as a string so that's one thing you want to really be careful for and if i change this title so i put new title over here and if we close this and open again you can see it's remembering exactly what we've put so another thing you could do really if you're developing this at the same time is going ahead and changing the text here so making this a content editable or even having it as an input field that anytime there's a click event or on key up you change the text that's saved to local storage as well anyway quickly we're going to go ahead and add these next two parts just here so if any of these items are clicked we want to make sure that we have an event that's going to listen for this so down here we're going to add an on click event just here so where we have us the div element and our s bands i'm going to say on click um item complete and then what we'll do is pass through this again just here so we want to make sure that we pass it in like that and now i have our item and then over here we want to make this say item delete okay so we can see this and then once we click these we're now going to add the functions for these to actually adjust so this is item delete so we add a function here so again we have the index that we're going to use just here and then the same thing for item complete we have our index what we need to make sure that we do though is over here when we're fetching our items from the storage we need to make sure that we can use this same code so again we're going to go over here we're going to copy this and the start of these functions we're going to paste this in now you could save this as a window variable but this just helps to make sure that it's always the most up-to-date code the only problem with that is if it's changing behind the scenes the index could change but thinking about it it should be the same because the change will be in this event just here so we'll paste this in again for these items just here and then all we need to do here is change the status for this item so to do that we just go to the items array so we'd say items array and then use the index that we passed through just here and then status equals one and then we'll do exactly the opposite of what we did before so then we've got our object um just here and then all we need to do is say save items and then pass in our object and i'll save that string for us but before we do that we need to update the uh display of this field so over here we want to add the the class of done for this item so what we do is we say document query selector then we can go to uh list just here so to do items and then what we want to do next is grab the li so the list element and then we're going to use the data that we set up here so the item index like that so we say data item index equals and then we want to pass in this variable so we've got the index so make sure you add that in just like this so we can see we have these brackets then we have first double quotes and then single quotes and then the plus to make sure that the variable fits in there then we're just going to say class list add done so let's just test this now i think i've put it in right and then go over to here click this box let's check errors here you kind of inline click events that's fine so all we need to do is just make sure that we have a separate listener which is probably better to do anyway actually so over here we have these on click events we're just going to change this to be a click event on these particular items so again after this we're going to loop through this separately so what we're going to do down here is say document query selector all and then we're going to say ulli so we're going to loop all of our list items so we'll call this items list like that and then we'll create a new for loop for these items and then on each one we're going to add this event listener so we'll say like this so we grab the index again for this item then we're just going to say add event listener we need to make sure though um first that we don't add it to this whole function we go and say query selector um span and then we'll probably set a class here so we'll say span class item complete like that so then we just say item complete and then we'll add our click event like that and then all we need to do here is because the index is the same we can then call that function so we'll just say item complete and then i like that and then we'll do exactly the same thing for the delete function so we'll change this to item delete and then up here we'll change this to a class so if we refresh this now um i think i've put this in right so if we go on this one and tick okay so we need to make sure that where we have this eye this is looping so when that event listener has happened it's gone through to the end of that function so we need to make sure that we grab the list item from here so if we say um var index equals let's work out so we've got the item here so it's parent will be this div i want the parent again so parent.parent and then we would say data set [Music] so let's start by just logging that to the console and see what we get so if we do console log index this button will ignore the error that we get and just before that so it's parent should be parent element on parent node so if we refresh this now and try this again so if we look in here we should see the data set so we've got item index is zero so that was two before so that was where it loops through all of the array we're right at the end because the event listener is running after that's all happened so that's where we need to grab this item index so all we need to do is put this just here and then instead of putting i we're going to put index and that should then uh link this all up correctly so that we're not getting this so this status part isn't invalid so if we save this and reload and now if we tick this we can see that it's marking it as complete but if we just go into our application now and edit these as cells so we put zero just here and just here and fresh so if we go over here and tick we can see it's not updating right away but it is if we went away and then came back um we want this to happen there and then on the page so let's have a look at what could be causing this so if we tick this one we know it's happened and we know it worked okay so it's the add part just here so we could just say class name equals done that should do what we need so if we go ahead and undo where we updated these because it's updated into the local storage already so that is zero that is zero go over here and refresh come back there we go so it's marking these as complete and then all we need to do next for this part is just remove that item from the object so for our delete all we need to do here is a lot easier so for our index we'll just say items array splice now we pass in the index and then how many items from here do we want to remove is one so then all we should need to do is then uh where is it up here we have save items we pass in this same code um but then what we need to do first is where we were setting the class just here on this one we just need to remove it so we'll just say remove like that so if we test this over here again and delete help if we call the right function so item delete and then go over here open this delete open this okay so as you can see it's deleted the item um but the problem we had so if we just add this we need to call the function and that would remove it so if we go now we've removed all of our items so this should be empty like that so if we go away come back we can see this is all removed so if we now click on our new item we want to now make it so we can set our new items in here so this won't take too long so just over here we're going to create an event listener for each of these so we can remove all of this code over here and then all we're going to do is create a event listener so let's do document query selector on create to do so this is our new item button like that then i say add event listener same as before click and now go to this function and then in here all we want to do is open or display this new item element here so we just say document query selector again new item style display is block so if we go back over here now open this we can see that it's appearing and then all we need to do is add a listener to the save button so we can grab whatever is in this text field as long as it's not empty and then save it into our list and then hide that input field again so all we need to do is copy this code rather than writing that out again and then we'll say new item here new item button so if we just check what's that button called yep it's just button so when that's clicked we want to grab the item let's just call it item name equals so it'll be this instead of button it's input and then if input or item name does not equal isn't empty then we will save it so to do that all we need to do is go down here and grab this so we've got item storage that we're grabbing and then all we need to say is items array equal so we're going to add a new element onto this equals item and this is where we're passing our item name like that then status is zero or zero like this so we just need to put this in quotes and then as same as before we need to say save items and then pass in our items array and then once that's done we want to fetch our items again so that everything is renewed so let's just test that and then obviously we need to hide it if it worked so if we go over to here new item okay so one thing we probably should do is say push and put that in like this because we're pushing the object onto the end of our array so let's just refresh that it's a new item record my next video save almost okay right i didn't say value so the item value here we want item name to be a value and if it's not so if we save it that should work now we know that that's all there so if we go over to here new item record a video save there we have this we can tick these we can remove them and what we need to do is make sure that we click save let me hide this so it's just the opposite of this line so under here once everything is complete we say none so that will hide it so here we go we open our items so we've got a item here so again record my next video save that's added so the next item we should probably make that uh remove that value as well could be um fix my laptop and add that here so go to new item so all we're going to do now is just make sure we remove this and that is this extension complete took a little bit longer than i thought for this one um so over here we'll grab this value and we'll just say value equals empty so if we go over to this again go to our item so item text here save and then here we go it's empty so that is how we can create a really really simple to-do list so you can mic mark items as complete and then remove them all from within a pop-out extension okay so next we're going to be building our web scraper and automation tool so it's a simple um extension that's going to be in a pop-out and this will let the user set a number of different actions that they want to perform on this page so for example you could say after three seconds press this button enter this text into this input field and then save this text from another from a div on the page for example you can create a number of different actions in a number of different um combinations so you can do different types of automation and grabbing and scraping data from the page as well so that's what we're going to be building next now because this extension is a little more uh complicated than the others i've gone ahead and set up a folder for this one already so we have this web scrape folder just here in the manifest we have um the title here so simple scraper we have our browser action popout.html and we have a content script that we're going to run as well so the way this is going to work um i've gone ahead and just planned this out a little bit in advance this time so in our popout.html we have just a simple heading here and then we're going to have a div underneath of our different types of commands now each command can be can be a number of types so it can either be a weight a click you're going to enter some type of value or text and then you can save text as well so that will be you can grab that all at the end once this command has completed and then once you've entered all of the inputs in there there'll be a button down that can just start this command and start it running so that's what it looks like in our popout.html so the javascript for this will work in a number of different ways as well so if i pop out dot js here and that's going to generate an object based on all of that information we've just set up just there and obviously you can add new items into this array and they'll each be an object so as you can see here we have this first one's type is weights and then we've got a value so there's two value fields i don't know if i showed you there yes we've got value one and value two so obviously if you want to have a type of weight you need to say how long that they should wait for and then for click the option there so you could say click and then value one it will be the actual query selector id of an element for example so that's all we'll be doing here so when they click start it will just run this function here that will grab the current tab so because the pop-up's open there we can grab the current tab and then send this message in to our content script they'll be listening for any events to be sent to us so again for this we're using the manifest version too so down here would then send a message to our active tab so as you can see here active tab and that will pass in this run commands message and then this data object that we're going to be generating from whatever we've selected in our pop out extension now the content script is going to be listening for this command so here you see run commands then it will grab the scrape object which again will look something like this and then we'll have a loop that will run through of each of these objects and perform this action so that's what we're going to be building that's how it's going to look so let's get started on this now okay so the first thing we want to do is make sure that we have this object being generated so we're going to start by just commenting or removing out these comments so i'll just change this like that and this like that so we know um what we have just here is an example input field so let's just remove this bit so if we um save this now and open it on the page we can just see what we have so far so we'll just save that so if we click over here we can find a simple scraper here unpin this one okay so if we open it up you can see what this will look like so again it's very basic design so what we need to add so far is uh two buttons so one of these buttons will also add another element onto this uh display and then the next button will let us start running this command and it will send that event to our content script so let's go ahead now and add two buttons and then we'll start to link up all the javascript for this as well um called action buttons and then inside here we're just going to have button here and this will be to add a new item or a new command so we'll say add command and then down here underneath this one will just say run so that will start running all of the code now just be run command so if we just refresh that now over here we can see we have our two buttons and one thing i think would be important is um for this to just be displayed alongside each other as this could be quite long if we have lots of different events and then maybe add a maximum height here so it can scroll if there's loads more um so if we just go back over here add a little bit of styling again it's not to make it look look too nice it's just to make sure it's functional and again as with the other extensions the main thing we're trying to get here is speed so we can see how quickly we can prototype these ideas so again we're just setting some basic styles in here just to see what we have so that's a little bit more space and if we can get these all to appear on one line so we'll set a maximum width on these and then that should be everything we need so we make this slightly smaller and then our input will have a width of about 130 i think something like that almost let's just inspect this make sure we're getting exactly the right amount here okay so a hundred and that seems okay like that okay so there we go so let's change that down to a hundred and make that maybe 55. how does this look okay yeah that's okay and then we can just add a bit of margin around there um later later on um but if we copy this number of times just to simulate if we had lots of events here so i'll just copy this five times okay we can see that we can fit in a number of events here so you can imagine if we had say wait um one second and leave this empty and then we'll say click um so it'd be body and then something of the class of button or just the first button on the page so it always grabbed the first element so we want to be specific with that and then we could enter a value so say we want to add something into the first input field on the page we could say uh this is a string and that would add that onto that page so if we were to say run and then start to run this code um yeah this seems to be okay this is what we're going to move forward with and then we need to make sure if we press this button here it's going to add another element that we can use here so this is what we need so far okay so now we're going to go into our popout.js and start to link up these buttons so let's take this add command just here and first we'll set a event listener to that button so we'll use query selector we'll find that button and then we'll just say add event listener and then in here we're just going to append a new element onto the end of that list that's a blank object so all we need to do is just copy this html just here and then we will say new item equals use backticks because we're using es6 we can have this over multiple lines like that and then we just need to say commands list so we'll do query selector again pass in this and then we'll just say in html plus equals new item so what this would do if we had because we're um setting the inner html rather than appending a new um div element that we've created if we have any event listeners where we are if we have any event listeners on these actual elements here they will be removed because we're actually replacing the inner html but for this example we're not going to have any listeners on this part we will on these buttons but that's not going to be replacing the buttons because they're outside of that scope so if we refresh this now and try and press this button we can see it adds new commands here which is exactly what we want so the next step is just to add a listener for this run button and then create a function that can convert this list of input fields into the object that we want to create so all we need to do is just copy this event up here change the uh thing here from new command to run command and then all we're going to do is just call a function so this can be more repeatable if we wanted to add this in from another part of the code so we'll create a function up here called create command object and then all we would do is just make sure that we call this from here and then all this is going to do we're going to say document so it actually would say up here command commands and this would be query selector all for each of the divs inside of that list [Music] so that'd be crew selector all then all we need to say over here is command list and then command item so we grab all of the items that are inside there like that and so now we've got an array that we can loop through so if we just add a for loop just here of our commands atoms helpful in filling that out for us just to save time um so what we can do in here is start to create our object so what we're going to do up here is set an empty array so we'll say say a variable again of commands array this will just be an empty array like this and then down here we're going to say item object and that'll just be an empty object like this and then all we need to do is just push these onto the end of the object so if we find the example we wanted to create here like this we can see we're just going to add a type and then one and two at the end here so as simple as it is we just say item object type and then we can grab the uh select value inside of here so because we know which item we're on here so we've got commands i we can say item object type is equal to commands and then the index here we can run the query selector again so this is on this element just here of each of the elements and we want to grab the value of the select field that's currently selected so we need to do here is say query selector select value so that'll be the type and then we're going to do the same thing again for value one and value two so that would just be let's just double check yeah so it's called one and it's called two says one and two and then we just just need to change this select part here with value one which links up with this class name down here and then the same again for value two so that will generate our object now we just make sure we need to make sure that we add it onto this array so to do that we'll just say commands array push and then add our item object so that should be everything we need so far we're just going to run through and test this first so what we'll do is at the end of this loop so once that loop's finished we'll just say console.log and pass in our commands array like that so if we go up here and refresh add a couple of commands over here so we've got weight let's say one second again it says a thousand milliseconds and i want to click the first button on the page and this one will just enter a value onto a element that's got a class of input and we'll just say uh text so if we say run and then inspect this and check the console if this has worked yet we have an array here of object so that is perfect that's doing the first part that we need now we can push this through to our page and start running this code okay so all we need to do to push this through to our page is just adjust this code we had down here so we can remove our example object because we're building this ourself now and then we just need to move this across at the into the end of that function there so we'll just copy this and add it down here and then because we have our commands array here we have our objects we can just say object equals commands array and that should then pass this through so we just remove this so what this piece of code does is it grabs the current selected tab and we'll push a event through to that tab so we can just move these lines save that and if we go to our content script now and just when we're listening for this event we're just going to do exactly what we did before and add a console log for this scrape object just to make sure that it's getting through to our content script click onto our extensions we're going to wait one second again and then what we're going to do is add another command to so as you can see actually what this is doing is it's adding that onto there so that removed amount of seconds so here we can find out what part of the code we want to adjust so if we would click this page here [Music] we can find what query sector would actually need to click on to but what we're going to do first is test out grabbing the content from the page so if we look to try and grab this title here that would be this element so if we press this button over here we can grab that so if we go over to this uh extension again we would say wait one second add a command actually it's done again so we would wait one second then we want to save whatever content is in this query selector just here so this is what we're going to do in the next part of this extension but if we press run now and just go to our console ah keeps disappearing but if we wait again one second add our command so one second add our command then run so we need to add into our permissions access to this active tab [Music] like this so if we try it again now that's like that refresh our extension refresh the page so we go over here just wait one second run our command so let's change this from active tab to all urls but so now that we have our manifest has access to all urls and a permission here and a content script over here should have access to the page so if we go ahead now and try and run this so if we go over to our website if we go over to this website again press on to our extension and set our commands now obviously we have this problem at the minute um where if we enter this then press add a command because we're updating the whole of the inner html each time it's going to remove this from the page but we can adjust that later i'm just by appending it rather than adjusting the ring ht inner html okay so the reason this isn't coming through yet it's because we have message name which i put in wrong it should be message command so if remove this extra console log that we had and run this code again so we go over here refresh our page refresh our extension over here open up add a command so we're going to wait one second and enter value onto the first h1 um actually save the value of the first h1 and then run this command we can see this is getting pushed through and then here is the data just here now what we need to do next is take this object and actually make sure we perform these actions on the page so we're going to go over here now and create a function that can actually do this so now that we know that we're getting this data through to this page we're going to go down here and create a function for each of these different types of events so the first type that we're going to have is a weight and then this will then call the function to run the next one so we need to think this through carefully and to make sure that we're doing this in a way that's going to work so if we click events we'll say click event then we'll just have the input or let's just say selector and then we can do the same thing for save event and that would just be the selector we want to save and then the same thing again for our enter event and then what we're going to do is pass in the index that we've got through so far and the whole object itself so all we need to do is pass the object and the index so the next time that we are moving through the object we can just add one to this so what we'll do is just say um the end item so the end of the index so if this matches it we know not to continue anymore so we just add these for each of these like that um we might change this as we move forward but this is what we're going to use just now so over here um actually i thought of a better way of doing this already we're going to say function get next item and that's what we're going to call at the end of each part of this event and then this here will then work out what function we need to call so all this needs is the selector and if it's a save event it will need the the input whatever it's going to be there so we'll create this now hopefully that makes sense um so forget next item that will need to take in the object and the index um so the previous index will add one to it each time so when we're running our commands all we need to do here is say get next item and then pass in the object just here and an index of zero so we can start at zero each time yep that sounds good so over here this is all we need to have so it's going to grab our data and then pass our scrape object into get next item so in here all we need to do is check that there's a valid item at this index so we'll say if object and then the actual index we've been sent here is not undefined so strong assist exists then we can go ahead and run this code if we know that it doesn't exist we've completed all of the results and then we can start to uh send um a return with any data or just so that the the command is completed so we'll leave that here for now and all we need to do in here is just check which function that we need to call so would say if object index type equals click then we can call the click event so that means we don't need any of this over here we just need to pass in the object and the index but we don't need end item anymore so look a little bit like this so if it's click we would just need to pass in um actually it keeps it a lot more simple so it's just the object and the index that'd be this current index and at the end of this function we would just say get next item like this and we'll just do index plus one so that keeps it nice and simple because we have that check every time so what we need to do first here is have our click event and we also need to add another function over here as a weight event if we need to wait um x amount of seconds for example so again we can remove this selector part we only need the object and the index so let's just focus on this weight event first so up here we know that we've got our object and our index so what we're going to do is grab our items we'll just call item equals object and index that'll be the actual object within this array so i don't know what i'm calling it object um but that'll grab the one that we need here and then we can just literally say um with for this we already know that it's a weight event so we'd set a timeout here so because we know this is a weight event we can set a timeout straight away so we'd have a set timeout a function just here we can run our code and then all this needs to do is enter the amount of seconds that we need to wait so we've just closed that function just there add a comma and then this is where we would put our value but we'd need to make sure as well that we changed this into a number rather than it being a string that it is at the moment now the item.1 and then we can just close that all off like this so once that's finished we've moved this inside here so once that's finished it will then run the next part and grab the next continue on the different commands but first we need to make sure that we change this uh into a number so to do that we have a variable just here then let's just say pass int like that and then it will be what we need just here so next for our click event we'll follow a very similar pattern so we're going to use our item just here like that and then all we would do for this one is for this part the query selector is item one so we just say document query selector and then in here we'll pass in our item one like that and then we'll just say click and then we'd run our next item straight away so that's all we need to do for this one for our save event it's a little bit different so just copy this code here in the save event we want to grab any value that is at this uh selector so instead of saying click we'll just say in a text or inner html for this option we'll probably just grab the value um one thing we probably want to adapt if you're wanting to launch this is check the actual type that we're grabbing here so if it's input field you want to change this to value rather than in a text but for this example we want to move through quickly so we'll just use this for now and so here we'll say value is this and then what we'll add somewhere actually is an array of objects that we're saving so up here before we start running this we'll just say window scrape scraper extension and then just send empty array just here and then we can just push these values onto the end of this so down here we have our save event we'll just say scraper extension push and then add our value just here so that's all we need to do there and then again we'll go to our next item and then for our enter event it's a very similar method that we'll follow here so instead of um setting the value here we'll just change this to value equals item two then we can get rid of our save just here so that obviously would be useful for input fields and things like that so if we just go through and check what we have here it looks to be what we need so we have our weight event our click event our save event and our enter event so up here we just need to add the extra types and call the right function each time and enter so and then down here we know that it's all completed but for now we'll just set an alert so let's say command have been run and then all we need to do is send a request back to our pop-up extension with the any data that was saved here so all we need to do for that is go up here actually we'll do it straight from here actually we'll say chrome runtime send message we'll say command run complete and then data will be this window object just here we can pass that straight back we don't need to wait for um a callback here because we know that that's complete and then in our popout.js we can just add a listener for this event it's up here we'll just say chrome runtime onmessage and listener or message sender and response and then we'll just have a function in here that will call this code so we call this function just here and then all we need to do is if message dot command if i put that in right equals run complete we then want to run this code just here so over here in our popup.html we're going to add a text area at the bottom here that by default will be hidden like that but when we get this callback just here we're going to fill in this information of any response that we get back so we'll just say text area so over here we'll do document selector grab this text area then set the value to b what was it we passed it on so we call it data so just be message data but first we're going to turn that into adjacent objects we'll just say json stringify and pass that in just there so there's quite a few changes but let's just check now if this actually worked so we have our event listener here that's listening before we send a response back from our content script we wrote all of these events just here so again um that that should work and then that's called over here so let's give this a go let's make sure actually we set this before we start running these events we need to make sure that we refresh our extension over here and then we refresh our page so what we're going to do is set two commands let's make sure we move that comma just there so we will refresh our extension so we're gonna add a command so first we'll wait um say 500 milliseconds um we want to save the value so we want to get the first h1 if there is one and then we want to click on the first link or we could say wait um 100 milliseconds and then just run that let's just try this for now so let's run this function it says commands have been run if we say okay we see this is closed um was there an error nope so we should probably do as well um is have that alert run on our pop-up extension rather than the content script so we'll just take this here remove that and have that appear over here and be sure to update the display of our text area as well so say style display is block like that so if we just first grab this element just here this will be the one that we want to grab so we'll do that go back to our console instead refresh our extension actually and then we'll go in here add a command so it's going to wait 500 milliseconds again they want to save the value of that first link and then we'll press run all we've actually noticed down here in our weight event we're not using the integer that we uh passed here we're just using the item one so that's going to add um the wrong uh part here on our timeout function so if we go back and refresh our extension now we can test this properly so do we still have this copied nope so let's go ahead and grab this again so we'll get this part here go back to our console open here so we add uh two commands again so we're going to wait 500 milliseconds we're going to save the uh value of this link here so we'll grab the inner text from here and then we'll just say run we can see it's starting our commands it's saying um the pop out has got the response back it's saying commands have been run so let's see when we click ok it should show our text area and see if we get our response from that link there there we go we can see it save the link from this so if we had this grab a number of different links you can see how that would pull in different content from different places now let's try this on a different site where we can actually enter um into an input field for example actually there's one over here so let's try entering something into here and grabbing that uh text event so if we grab this over here and try and enter something so what we're going to do is say wait um 200 milliseconds we'll add a command to it wait 200 milliseconds we're going to enter a value into this field here so we'll say search this text and then we'll just wait 100 milliseconds let's try running this command just here so again the commands have been run we'll say okay we didn't save any data here so that's what you'd expect it shouldn't return anything but as you can see up in the corner here it says search this text and that means that it's all worked and it's actually inputted into this input field so that is how you can quickly put together a little extension you can use to either scrape data or automate certain actions on a page now i would recommend another a number of changes if you're thinking about launching something like this yourself so the first one would definitely be you know where we're entering this uh data over here then adding new commands changing it so we're creating a element that we're appending onto the parent div each time rather than changing the inner html then it wouldn't remove this and generally making it so that we can perform actions across different pages rather than all on one page so for example if i wanted to make this click this button and that changed the page you should think about ways you could get it to continue running as well there's actually a video on my channel that details how you can run functions across multiple pages so um be sure to check that out as well if you want to do something like that but that is how you can build a simple web scraper and automation tool using a chrome extension so we managed to make four extensions in this video it didn't take too long so it's showing how you can quickly prototype ideas and get them out and get people using them and see if the idea works before spending loads of time on development so it's just a few ways you can really speed up the way that you put things together so if you've got any questions on how i went about anything in this video on the different extensions that we made feel free to leave a comment and i'll try and get back to you but otherwise you can find links to the code that we started with and the code that we created for each of these extensions as well in the description so thanks for watching i hope you found this video useful in the next couple of videos we're going to be looking into the version 3 of the chrome manifest so there's a lot of changes that are coming soon but at the moment these aren't confirmed yet there's a few things moving around here but i'm going to try and make a really in-depth series looking into the changes that are going to be making and how we can actually improve our extensions with the updates that are coming to chrome as well so anyway thanks for watching and i'll see you in these new videos

Channel: Rusty Zone

Views: 11,732

Keywords: chrome extension, create chrome extensions, new tab extension chrome, chrome, extensions, how-to chrome, chrome extensions, google chrome, new tab extension, javascript, html, how to, build a chrome extension, how-to chrome extensions, rustyzone, chrome extension tutorial, popout extension, background page, chrome extension challenge, development challenge, coding challenge, live coding, programming

Id: Aw3G2jR-5IM

Length: 101min 18sec (6078 seconds)

Published: Sun Jan 03 2021