CODE WITH ME: Build a Chrome Extension | How to Build & Publish a Chrome Extension in 10 Minutes?

we are coat no it's weird I can't no no maybe no singing hey friends I need more coffee we are going to be coating today a Chrome extension why you ask because I've never done it it's a super simple project and it's great for beginners who are learning JavaScript also I really love this project because it's something that you can really customize to whatever kind of Chrome extension you want which is really fun also I need a little moment of breaking can we check out the Tiff and Tech mug like general manager is that me I don't know if that's me we'll take it okay let's get into it let's start coding [Music] okay let's get started on our Chrome extension uh I look a little different because after I filmed the intro I wasn't feeling it and I just had a relaxing day so we're gonna dive into it now for the scrum extension there really is three things we need to do one is create an index HTML file and make some kind of structure to this the second is to create a script so some JavaScript and the third which is unique or not unique just to but in order to make a Chrome extension you need to have a manifest Json file and this is really a file that contains metadata about your Chrome extension to start with let's as you can see on screen here make an index HTML file fun trick for you in case you didn't know it if you click on exclamation mark enter it will make the structure for a index.html file I'm sure a lot of you already knew that but it's a little tip if you didn't all right title let's call this I'm going to call this Toronto because I'm located in Toronto but Call It Whatever City you want because you can with the API get different cities so Toronto concert lineup perfect okay in the body here let's have a div and let's have an H2 tag which will contain our title which will pretty much be the same thing let's call it actually upcoming Toronto concerts and now we need to have an unordered list which is really just going to contain the concerts I guess you could say ID uh and this could really be spiked out further this API we're going to use uses quite a bit of things uh so right now we're just going to grab a list of concerts that are upcoming for certain dates but you could do things such as add into the extension the dates that will be used the URLs to sign up for the conferences there's a ton of things but the point of this tutorial is really to show you how to create a Chrome extension give you a strong foundation so then you can kind of build it out how you want to all right this looks good for now now let's create a okay now let's also add in oops now let's also add in script which will be let's call it script.js and let's make that file right now okay in here we are going to create an async function called Fetch data and this is where we will be fetching the data from our API we will use which Speaking of API let's go to it so I signed up for Rapid API which I'm late to the game on but I'm obsessed with there are so many fun apis to play around with and for this I used the concert here we go concerts so I was going to use Eventbrite for this but when I was looking at the doctor Eventbrite from my understanding and I quickly scrolled through them so I might have missed it but from my understanding with Eventbrite it has to be you can only get back your events that you created it doesn't really make sense so I found this API artist events tracker and I really liked it it was just very simple you can get upcoming events events of artists past events and I really wanted events by location so that's what I did and if you haven't used rapid API before it's super friendly all you need to do is Select which kind of endpoint you want and for this one I said events by location then if I go down you can see the name which is uh the name of where you want the events so for me I'm going to put in Toronto and you can also select the Min date and Max date so for this I'm just going to do for the next upcoming days otherwise it returns a really long list so let's go today until uh let's go Wednesday why aren't you number of pages one and then to test it out I also want to use JavaScript fetch for this but like there's so many it's a really cool like I said I'm kind of late to the game so let me know some really cool apis if you've played around on rapid API that you really like and if you haven't well here is your a little bit of information to go check out rapid API this isn't sponsored by them or anything but I just I'm really excited that I found them okay test endpoint items and then you can see here's what we will simply do is copy code which includes our fetch of the API we're passing in the options up here and let's just add here paste that in then if we go here let's kind of update this a little bit so you can see here right now we're doing Fetch and passing in the options I'm just going to delete this for now just start from scratch though and let's give this a name let's call it res for response and let's await until we get the response of this API then we're going to have something called record which will turn the response into Json perfect now let's just log out that record here and then in order to see it all you need to do is open your index HTML file just on a different screen here me this is not what we wanted where is should be showing a list here well not here but in the console let's see what did we do wrong we have a weight and we're passing in the options yes and then we have the record await fonts Json this is so embarrassing you know what we didn't do and I'm sure you're screaming at me but this is why I'm being real like let's just code together and we were going so quickly here couldn't even call the API okay let's give this another try okay perfect as expected nothing comes up on screen because we haven't passed anything in yet but in our console we can see 25 objects and it includes a bunch of different uh things as I mentioned from performers end date description so it's pretty cool there's a lot of exciting bands coming up I must say okay now let's go back to our code though and now what we need to do is let's simply get the element by ID which we created here which is concerts so we go foreign filled with objects we're going to need to map over that so map and let's go item [Music] item.name and here we go okay as you can see we have the upcoming Toronto artist but it doesn't look good in this way so what I'm going to do is just a bit more um I'm going to go like this and make it list items because right now it's making everything one list item so let's go like this [Music] and we will pass in item.name and then what we need to do is simply join them together again all right this should be more like it let's see okay this right now is just pretty simple straight well very simple stay straightforward uh getting list items unordered list items to come up and you're like okay Tiff like this is not exciting at all but just wait for the magic part of it okay so I hope I really wanted to do something very simple for this example for the purpose that it will show you really how you can put anything in here you want whatever kind of content you want you can make in this Chrome extension and this is really where the magic comes in so we need to create a manifest Json file manifest and as I mentioned this really just contains metadata so we're going to do the name which will be upcoming Toronto concerts and this is the name of the Chrome extension let's do version so the version of it let's do ah this is going to be the first one 1.00 and description this is an extension to look up [Music] [Music] default pop-up which will be our index [Music] and default title which again let's make it upcoming Toronto concerts next up open a new window and in Chrome here navigate to more tools extensions from here all you need to do is turn on developer mode load unpacked and you can see I was testing this out but let's go to where is it here we go and just select the folder where your extension is and look how cool that is it's so easy to do upcoming Toronto concerts amazing so now if we go back refresh here we go and we can see our upcoming Toronto concerts how cool is that as you can see there's a lot more we can build onto this uh from dates from actually linking out so we can go get tickets for the concert but I didn't want to make this video go on for too long and I really wanted to show you just the implementation of getting a Chrome extension and building it out and how simple it is so leave in the comments if we should continue building this out and what the UI should look like or what other functionality we should include thank you all for watching I hope you found this very helpful and leave in the comments some Chrome extension ideas that you have that you might end up making and if you haven't already hit that subscribe button I'll see you all soon thanks everyone [Music]

Channel: Tiff In Tech

Views: 343,157

Keywords: Chrome Extension Coding, Chrome Extension Coding Tutorial, tiff in tech, chrome extensions, chrome extension tutorial, create chrome extensions, build a chrome extension, how to make a chrome extension, Javascript chrome extension, Coding Tutorial, how-to chrome extensions, chrome extension development, chrome script, coding challenge, tiffintech, learn to code, women in tech, how to learn programming, self taught programmer, How to learn to code for beginners

Id: B8Ihv3xsWYs

Length: 11min 33sec (693 seconds)

Published: Tue Oct 11 2022