Build a Coupon finder Google Chrome Extension like "Honey"

1. Skillshare welcome promo: Hello, I'm Russell. And welcome to my new skills Check class, all about chrome extensions. I've been working within by web and mobile development for the last 15 years, and over that time I had the opportunity to work on a number of projects and startups. In this class, we're going to be going through everything you need to know to be able to create a coupon finder Chrome extension quite similar to honey. This beginner friendly class will take us through all the steps you need to know to go. To do this from creating a database in fire base and connecting this to a crime extension all the way through to hokum published creations on the chrome store. I'll be recording every step of the way so you can see exactly what you need to do. You need any development experience if you've ever wanted to know how to create chrome extension and this is the cast for you ready to get started will join me in the first lesson 2. Create Firebase App & Extension Folders: let's get started. So in this video ago, new start what? You build out the basis off the chrome extension. So we're going to be creating APP in fire Base, which we're gonna be using as the database that we're all the coupon codes reached Main will be stored. Then we're going to create a folder with the necessary files we need for the crime extension, such as the Manifest Jason file and the like, JavaScript and background HTML files that the extension we made up off, Then we will add this folder to chrome. The way we add this first is as an unpacked extension and then at the end, off the development, we can pack it on. And that's what you would then submit to the Chrome Extension store. And then we'll start to connect firebase to our extension so you can have communication back and forth from our extension to the fire based database. We can start to actually put it all together, and then step five is well, just refresh the extension so we can start to see how the development will move forward as we make changes to the codes and I have to submit it to chrome each time we compress the refresh button, so it makes it a lot faster. So we're start by creating a new app in five base. So you can do that by just going to the firebase console like this and then clicking on Add project. So it's very easy to have to enter a name for the project, so we'll call this coupon finder. You can call it anything you want, though, so just click continue. It will ask you if you want to add analytics to your project, you can if you want, but I'm just gonna say no for now, just to make it more lean and then create project. This may take a couple of moments, just Teoh factory thing and set up. Okay, so as soon as the project is ready, you can click continue. Then we want to do is click on the Web icon just here and then register a name for your app . So again we'll call it Coupon Finder. We don't want to sell five A's hosting, and there's click register app and now will be provided with this script here. So all you need to do now is just copy this toe one side. So the next we're going to do is create a folder on the need of files we need for the extension. So to do this going to your sort code editor of Joy. So for me, that would be atom. And then we're going to start to create a folder on the files that we need. So first have been Atom gonna add a project folder. So this is my, uh, new folder of Created Just Tears. When you add a folder inside this and we're going to call it coupon, find us to just keep the same name ings along the way here to keep easier. And then we're gonna add a file inside off this photo. Well, I'm gonna do to make it easy to follow along is just drag this window up So space along the bottom Here, future. Follow along. Okay, So you can now add your code editor underneath. I'm just here 3. Create Files needed for the Extension: inside of our coupon finder folder. We're going to create the files that we need to run our extension. So we just open Cranie file. Here is the 1st 1 will be the manifest. Don't Jason them We would need ap dot Js and next We need background. No, html and then finally we need firebase dot Js These are all the files that will be using on the next we need to do is set up a manifest file so that we can actually submit extension to chrome. Okay, so inside the manifest file, we need to create a new object here. I'm just gonna enter in some attributes that we need to make our extension work with Chrome's. The 1st 1 is the name off our extension so you can put anything you want in here. But again, I'm just follow the same patent already have. So we're going to call this coupon finder, have version numbers of this just 0.1, then need a description which up? Coupons. So the permissions we have to enter these as an array. So we do that like this. And then the permissions that we need will be active tab this gives us the ability to solve access the tab that the user is on on. We want to be able to run this on all your girls. Have you also know access? Other tabbed as well? This helps us to be able to access our background page on the way. We're gonna make communications back and forth. So after that, we continue adding more options. The next is the background. This is a file that we run in the background. So again it will be the page. Here is at background html, see to put quotes around here. So again, background toe html Andi, we don't want this to be persistent, so we don't just be running all the time just when we call it. This just helps, um, for the amount of calls, the makings. We just keeps it, um so performed slightly better. Next, we need Teoh set the type of extension that we're creating. There's a number of different ways you can have a extension with chrome. You can have extensions that only appear if you tap the icon in the corner. Up here on chrome have other extensions that inject content into the page like we're creating here and you have other extensions that adds like a landing page of Ukraine in New Tab. They take over that new tab while she that but for this one, it's gonna be we're gonna inject code into the page. So that is called a content script. For that, we have to pass in information that we're going to be using. This is an array again. So this array takes in an object. So the first of thes attributes is called is called Matches. Now, this is Senator up here. It tells us what your olds we want to inject code into now because we want this script to work on any website, this extension toe, any website. If we have a coupon, we're about to show it. So again you will put all you RL's. Then we have to mention the actual JavaScript files want to include so us. That's app dot Js. And then we just want to say when should this content be added, So save run a document and this should be once all off the content for that page has been added, which is normally enough, Some pages, such as linked in to good example. They take a while to load the page, and there's some extra sort of calls that take place eso when you're making extensions for patients like linked in perhaps Gmail, we need to add your own checks to make sure that the like the dibs and elements of the page Mona Interactive are loaded. But for this example, when what? We're going to be doing this thing, this is perfect. So at one more, which is the manifest version, which at the moment is version two and then you want Teoh, add a content security policy. Now, this is quite a long string, which has all the information we need to use fire base, which I'll type in now. But I'll have, um, this so you can copier in a description of this video. Okay, so that should be all the information we need to enter for the manifest. So you can go ahead now and save this. Okay, So now that we've added that we want to go into crime, go to settings, then go to extensions. I want to click load unpacked up here, click load, unpacked. Then we want to find the folder that we've just created. So for me, this is in eyes. Coupon finder. It's what? Click select. Just to then if we searched for this new extension, you can see it just here. Now, that is an error at the moment. That's because we haven't got any content on our page. Just make sure that you have a doctors too. If you're following of May of white if your copy and paste in, don't worry. Also, if you go back here, clear this all on a fresh, you should see it work. So this is the next step I was gonna show you in step five, actually. So once you've added your extension into chrome, any changes that you make, you have to refresh, and then these will be reflected. So, for example, if we go to this is find a random store here are extension will be running on this page. So if we add to our app dress, this is the file that will be actually injecting um, code into the page. So if we look again, we have a background, um, a background file here, which is back under html. But this won't actually run anything on the page. That's just what we're using to send information back and forth from fire base. So if we go into here and just say a lot hello from extension, then go back to the extensions, refresh and then reload this page. You can see now we have more, says former Hello from the extension is that shows are extension is on this page. Andi. It's loaded correctly, and I manifest file has worked. Now you can see what your background date tomorrow is looking like here in the next step will start to add five base into extension and start to make the connections to a database . 4. Connect Extension to our Database: before we continue, it will make a quick spelling fix from the last videos where we had persistent. Just here. Make sure you switch this a into an A like this, but I see only change need to make it just that. So this video we were gonna be adding in connection to a fire base script. So if we go back to fire base or find information just here, we want to take the fire base conflict information here. So free Copy on. We're gonna paste this into the fire base dot Js file. So go to five base and we paste this in. So this is what we need to do to the firebase. Start Jess file for now. But we will be coming back to this file later on. So to save those changes and then in background or HTML, we want to make a request to this firebase file on. We want also make sure that we load the firebase sdk. So the way things work in chrome extensions is a little bit different. Teoh, we might have seen just in normal websites on absent things. At least you can't call in, um other external Js directly from your extension. So what we have to essentially do is use this background or HTML as a bridge between our extension where we inject the script onto the page on to the website that went on on the background dates to Mel File which will have the connection to fire base. That's what we have to make this extra step. But I'll show you what this means. It isn't too complicated. It just helps to make this or perform nice tea with chrome. So we want to do is in the background i html If we go back to chrome, just do you want to take this script and paste this in? And then if we just copy this same script and paste, it will make one change here two database and then just change the version number Teoh 7.9 Doctor, I'm six feet the most up to date as off March 2020 and then we want Teoh ad again like oh, five base that would call in this file just here. So if we save this and they go back to Chrome and refresh will now have firebase connected , I'm so if we go back to extensions. Refresh this. If we know, click on the inspector views, you can see that we have description we want just here. So if we actually go back to firebase dot Js and do a console log off fire base. Refresh this Open up background days to mill. You can see now that we are connected to fire base. This is what we need to start to make connections to and from the database. 5. Setup Chrome message events: Now in this video, we are going Teoh make changes to a map Js file so we can start to grab the domain name from the page that were on and then send this through to have background HTML page, which we can then check with fire Base if we have any coupons for this page. So let's start by removing this alert script we have here on add a few sections we want to start to code out, so the first will be get the current domain. So we'll set this as a variable off domain and this will be equal to window location, host name. But this may have http or www dot prefixed at the moment. So we just want to make sure that we strip all of this away so we can do this with a simple replace. So first we'll check if it just has http and then one for 82 ps on, then finally for w w dot as well, like this. And then we also want to make sure that we are splitting any hash parameters from this as well, which we can do like this. It's good to make sure that we get this expression incorrectly and they want to pass in only the first part. So that should make sure that the domain name is all that we're getting from this. And then we're ready to actually send this through to the background to HTML. So the way we do this is uses the chrome extension object and we want to use run time. And this allows us to send a message through Teoh background waged email. So when we finished right and this would be able to add a piece of code into background extreme El, which actually called the firebase file. And that's why, as a listener event for any messages that are sent, But first we'll create the message here. So we want to set a number of parameters for this. So I sent an object through that has a command on. The reason we want to set a command here is because we want about a cent different types of requests through to this vile. So the to request that we want to be able to create is first is a request. When we load the page to check if we have any coupons for this domain notice that spoke wrong. Family requests. So we will pass this. We'll call it one fetch on the second type off command who want to make is if we want Teoh submit a coupon to the database. These are the two different types we're gonna be creating. But right now we're gonna focus on this one type. So we're gonna pass in some data as well, which will be an object. And we called domain, and we're just gonna pass in this variable just here stays the only parameters want just here. And then we obviously want to listen for response. And that will cool on that would be sent in just here. This is where we get a response from the database, which is background to HTML, which actually makes it cool. 25 a stodgy s. This just helps us remind remind ourselves where these calls will be made. So we're safe that for now and then we want to go into so that we have background html and then fire base. So in here, we need to create a listener for any messages that are being sent through to the background to 80 mil page. So the way we do. This is very similar to the chrome runtime sent message. So instead we put crime run time on message. They want to add listener, and then this will be looking for these same parameters. The first would be the message which will be all of the parameters. The ascent just here, sis will be called message. And then we have two extra options here, which Ascender. And then the response this is we want to send the response back three to this function just here so we can access the information inside this. So open this up into a function of our own and them insights here because, like we mentioned, we're gonna have the two different types of commands. There'll be the fetch to grab the coupons, and then there'll be a post to push new coupons into the database. We want to just make sure which type of command has been sent to us. So we say message, but our command and it is equal to fetch. But then we can start to run some code in here. So what we'll do just now just to test this is at a console log off the domain. So that's just set. Domain is equal to message. Don't data, Dr Main. Just pick second and then we'll console log the domain just here. So we saved that. And make sure that we have this or correct. Just here will then go back into chrome on go to the extensions, refresh the extension, and then go to a page and then we'll check if the background html page is logging the domain into the console. So again, we pressure fresh just here, we'll load up, um, shop again. So if we got just a couple of websites just here and then check on the background page, you can see that we're now getting the results log just here in the console. So if we load up another page and then check the log, you can see that these results are updating as and when we go on these pages. So that means that we have a connection from AP through to background html, which we can then receive these requests and then send a result back. What? The moment we're just locking this to the page. So next we need to send this result back to app Js so we can see a response 6. Setup Database Structure & Fetch Coupons: Okay, So in this next video, we're going to make a request to our thigh based database and send the domain name encoded in base 64. The reason we're gonna encode the domain name is because within firebase inside out database Over here, you can't use dashes or dots as three key. So we need to make sure that it's encoded correctly before we get to this stage. So we're going to be using the real time data base over here. We're going to start it in test mode to a state that creative there and move making the request to thought slash domain. Then inside here will be the encoded domain name. And then we will have an array off coupon codes that you can have inside here so they will be shown. So this is how the structural look has an example. So we'll have the encoded domain name just here and there be an array off coupon code and for each coupon code will have the code like this and in a quick description off each coupon. So, for example, how much money off you get for this coupon? So now we're going to create a script that will make searches make request to a database at each of thes. So be domain Ford slash. And then whatever they encoded to make name is an effectual of the results. So we can never end of these on to extension. So if we jump back Teoh, that's him now or your co editor, we're gonna go into a fetch command just here to make sure that it's not the Post Command and we need to encode our domain name. So we're gonna just create a new cable here when we encode the domain on this will be using the Java script based 64 in code function, which is B t o a. Then we just pass in domain just here. Get rid of this console lock. This is what we want to be actually making a check with. And then now we just connect to fire Base and see if we have any coupons. Have already set up a connection to fire base so we can call our database right away. So you just called database and then we need the reference or path off the coal that we want to make Slightly said this would be domain and then forward slash Encode it domain now because via base lets you get results real time. We have to make sure that we expressly say once just here it's this will fetch it, get the latest information each time we make a cool and then we need to listen to the response. So in here we will get results. So we will say response. This will send it back to app Js So we'll get the results in here so we can start to use this to render onto the screen to say we want to set a number of different parameters. Yes, we can actually debug on, find out what's all the information we're getting back from the database. So sad type of result. We want a status as well. So if it's got to this stage has been a success and then of course, would have passed the data in a swells. This will be snapshot. This is the very believe assigned to this here and then we will pass in all of the value that we've I'm fetched from five base and then we just want to say what the initial request waas, which will help it for debugging. So again, we're gonna set this whole message just here. They should now send this result. So if we set a consul lock here for the response, we can now see how this looks without having to go to the background to HTML each time. So if we go to chrome, refresh our extension and they're going to Ah, webpage, Let's see what response we get from firebase burying minds. We only have this one test example here at the moment, so you will refresh. And now let's go to a webpage. Inspect, Check the console. You can see here. Response from fire base. Undefined. So this just here is showing that we don't have any record for anything in the database at the moment for this path. But if we now go to encode this, we can actually make sure that we have a response here. So if you wanna in code this by hand, he goes this handy site khirbet 64 encode the dog paste in the string that you want to encode. Then we'll copy this. Go back to a database, create a new entry just here. So this is that domain name. Then we wanna make sure we set a code. This is a coupon name, sad description. So if we add this into the database, then go back over here, We can see that the error is still happening. But if we go back into a code editor just here and then underneath point make this check for the command I need to add in return. True. And this will keep the message poor open for us while we make the request to the five a state based. So if we go back now and update our extension and try this again, you can see now we do have a response from Fire Base, and it should show our example. Coupon. I'm just here. But if we go to a different two main name, um, you just slight again is an example. You'll see that the response is no, because we don't have any coupons for this for this domain. So we have this one here. Now that's linked up to google dot com. So in the next video will start to make sure that we take thes coupon codes that have been sent back for the database on We looked through these and actually display them on the screen to round to keep looking into the console log and debugging it each time so I start to work away into making actual displays for this data. 7. Render coupons onto the page.: next up, we need to start to display the coupons that we have fetched from the database. So in the last video, we look to getting the responses from fire Base. We could send it back, um, to the message response that we wanted over here. So we now have the coupons, if there are any in this variable just here. So in this video, we're going to loop through this array if there's any coupon stairs and start rendering these onto the screen. So we're gonna start by creating a new function down here. We're cool. This past coupons like this, and then over here, which is cool dysfunction, then per in response dot data. So that way, we're making sure that this send message to our fire based or Jess file will make a cool. We'll get the response that I send the response through to this function over here. Now, to begin with, we just want to loop through coupons array and then Adam to a list, and then we'll use this later on. So we'll put all of this inside a try block in case there is in case there's no coupon. So this will be null. So we don't wanna be looping something that is not excel calls in a row. So if we just placed inside a try block that will catch the era and we won't have any issues. So I call this coupon html, and this will be empty to begin with, the newer just say coupons for each. And we just set this as coupon on bond index fixed up there. So this would loop through the array and then set each item as coupon and because the index there if we need it. But what we're gonna do is call coupon html ads for each time. Um, you just say inside this list here the code, this will be the coupon dot code. So again, from the database weeks up in the last video, we saw that we have two parameters for the for the coupon. There's the code, and there's a description. So after this will set the descriptions. We just put this in italics selfie coupon dot description, and then make sure to close off that tag just there. So this will mean we have a, um this variable here will have all off codes. Coupon codes in a nice list for us, so we can use this to actually render onto the page. So the next we need to do is create some elements that we can use to display this. But first, we just need toe at a check in case that this response was no so that we don't have an error. So we just say catch, then set variable for this era just here and begin. If we're just locals to the screen and just say no coupons found this domain and then we'll just put the error message there was told us we can debunk that. So I saved this for now. Before that, we just want Teoh. We just want to render this list onto the page. So to do that, we will create a new element just here, jumping ahead of myself there. So we call this, um, coupon display, and this will be a new development like this special to capitalize that. And then we'll say, keep on, just play in 80 mil. It cools. Fix these quotes and then inside table put the coupon html and then it's just a matter off adding this to the body like this So what we have now is we have a sent message from earlier with an artist new past coupons function which will take in the list off coupons just here. So the response data were then loop over all of the coupons that have been found and add them to this list on. Then we create a new development just here and then set this as the interest to melt, and then we appended to the page. So let's go and refresh the extension and see how this appears. We've refreshed our extension. Now, if we go to Google, which is where we had this in the first place, you can see a coupon is appearing up here without any styling at the moment. But that's good. That's the coupon we had there. If we change anything about the necessary put kind of exclamation marks After this, they were fresh. You see, it is updating each time from the database, which is why we're using fire base because it helps us have a really quick, easy to access database, and they can do of all the security Onda authentication for us keeps everything nice and quick. 8. Add click event to open coupon list overlay: Okay, So in this video, we're going to take the display we have so far and contain this. We've been a clickable element that when they click on it, it will open up and show the list of coupons inside rather than this random sort display on the corner of the screen here. So let's jump back into a code editor and start Teoh, make this hard. Okay, So here's the code we have currently where we have a coupon does play development, and this has been added to the screen, which is a great start, but we want to change. That surrounds that. We have a part that's great, you can click on which would then show this. So let's start by actually hiding this element. Um, To begin with Onda we want to set a class named this so that we can access it later on so you could do it just by saying last name and we're called this coupon list. Just have a couple of underscores had wanted a starting into in between Onda we want Teoh add a little bit more html here just to make it clear what has been shown sort of heading here and say coupons. And then we just set another or subheading just as list off coupons. And we could even pass through the domain name here. Um, like this we could say list of coupons for and then at the domain. So we have a look. Now what? You won't look just yet because this is hidden. But what I want to do next is add a a little circle in the top of the screen here that if you click, it will open thisted display its next move slightly further down here. Andi, create another element called coupon button. So again, with document creates element and this will be a div. Then we've got a coupon button here. But give this a class name off, keep on button. And then we want to add some styling to this. So we're just at this as CSS so at a list of things here. So first we want to do is, um make sure we have a height off less around 30 pixels. A with of 30 pixels. We want it to be rounded. Dispels has had a border radius of 100%. I have this country new line here just like this, We can carry on the border of one pixels Andrada, background color and said text color just so we can see this will probably look horrible to begin with, but we'll style it later on in the course so we can make it look much more appealing for the user. But begin of this will make sure they've got something that we can interact with. Um, semesters at another new line just here. So we have the quotes here on each line. So is to start with one. Have one closing them for that. After this. Wanna have the plus icons we can add to this string? We want to make it clickable on. Then we I want to set the positions of the position will be fixed. So as we scroll down the page, it will stay there. We want it to be five pictures from the top of the screen on and five pictures from the right hand side of the screen. So again, around here, Andi, this should be everything we need. We just have to set Cem contents with text the line to the center close off the string, just there and there. We want to set in html Teoh, I should say, Cook on that might not fit like it's that's just check this here on. Lastly, we want at this to the page like this. So for now, a fresh, uh extension and see what we get. Okay, we can see that our circle is appearing over here, but it's not the easiest to see. Let's just make sure that we index this correctly. So if we go, um, back over here, just say, said Index, that's a nines there. Just toe. Adjust the hierarchy. Refresh the extension again. Gates now over the top. So now we want to do is add a click events. When this is clicked, you'll open on display the list of coupons that we had before we want to stall. That's well so it appears over here. Let's just fix up this coupon tech so it's centered nicely. It's so we'll do this by just saying display flex, justify content center on a line items center. Just fix this here and then want to add some styling over here as well. So they're going to if we just copy all of this Andi want at a high of about 300 whipped for about 300. Don't need a border radius here. Maybe three pixels. Something just around the edges. A little bit, Um, on the rest of this. Want to move this slightly further down the page. So it's no overlapping. Other elements were, say, a top of 100 very slightly. Lessen that 90. We don't the text the line to be center or this either. If we just look over this suddenly overflow hidden because we have a list item here myself . Um, push it across to the side. So we should have everything here. So if we just change this to a emoji, maybe this one. So it's safe. This refresh our extension. Okay, We have a slight issue there. Let's just check what we have off course. We're saying coupon butter, not people display. That's why it wasn't hasn't been defined yet. So if refresh this, we should see our updated I'm just play here, and then we just need to add a click event to make this display. So we need to remove the display type of flex because it's making these items appear in a column. So this will then be hidden. And then when we click this, it should display it. So we just had code for these now, so removed this display flex And then let's create a new function down here. Request create events I don't hear you say great events is a new function. They want to say document query selector and they want to get the class name of this buttons. If we just copy this, paste it here, Aunt Event, listener on click. And then we want this to run a function down here. So then when this is clicked, we want to display this element Appears so we want to take the other class name. I start in here that style display block. So they should create this event down here which adds an event listener to the button, which is that relevant? Just here. So when this is clicked, we update the style of this element up here to display. So we just go back now or fresh this so as you can see at coupons still currently being shown, that's because this CSS is over writing. They're CSS here is over writing what we've put up here. So we put this underneath. Remove that one that refresh cases. Here we go. The coupons list isn't showing. If we click up here, it will appear. If we go on to a domain that hasn't got any coupons, for example, this Argo site here, we can see that our little icon isn't appearing. It's a later on in the course, we will make a check to see if there aren't any. Coupons will still show the icon, but in a slightly different design so that users can submit their own coupons for that site . But for now, we can see that it's detecting from the database if coupons exist. If they are, it will show this icon in the corner, and users can click on them and see the list of coupons. So obviously want to make this look a lot nicer and easier to use. And if there's more coupons to make its, they can scroll down and taken easy copy. They can easily copy this coupon code and added into their basket. They get a discount, so these are things will be doing later in the course. But now we've got some basic styling on. We're showing the data from our database on fire base. And then that makes a check to see if this encoded domain name is the patriot on that it will show these coupons for the user to use. 9. Create CSS file & populate with styling: welcome back to this new section. So it in this section we're going to change the design off a crime extension over here. So it will be adjusting the little button we have here that opens up the extension. Make it so if you click it again, it will close and start to add some styling to the extension. So it doesn't look like this. It's off once based, horrible blue color. But this isn't a design course, but we'll move it along so that it does start to look a lot nicer. And then you can take this for with your own design and change that you want to make. But what we're gonna be doing first is starting to jump back into a code editor, and it started changing of these styles. Let's go back into a code editor now. Okay? It's one of the first things you want to do is start moving some of us dialing across into its own CSS file so that we're not having to import styles directly into the page like this . So to do this me to go back into a manifest file and where we have our content scripts, we're going to add an extra entry to this object called CSS. And this will be similar to what we have up Js above just here. This will just be called coupon dot CSS And make sure to add a common here so that this object YSL in that correctly and then after that would seem to add a new file called coupon dot CSS. Okay, so we have this file in here now, and it is linked up into a manifest file so that we can access this from AP. Jess, we don't have to stop using this CSS inside that JavaScript so you can remove all of these , but we're going to start to move this across into ATS coupon dot CSS. So what you want to do first is just copy the CSS. Do we have here? Take note of the class name to remove this across into here, grab the cost name paste this in. So you had a dot in front of it and then remove all of the, um quotes and plus signs that we had amusing before Then we just wanna adjusted index indebtedness correctly. So it's easier for us to read and make changes, so we just saved that they want to do this again for the other elements. We have sex removed. This part, the coat now no further down here. We have the button. We'll copy with this code, go back into a CSS file and do the same process again. It's removal of the quotes. Okay, so we're going to making some stunning changes as well. Let's just make sure that we have all of this organized and structured nicely inside our CSS file. So I don't have to keep going back within four words. When you make these changes, not the dog up here for a cost name and then save. And then again we can remove this line just here. Okay, so save this now. Let's just go back to our extension page, refresh our extension and see if this is still working with CSS file. Rather, And having that Thestrals added directly in Thai JavaScript, a case we can see, it's working nicely. Still, here it's Now let's start to actually change the styling that we have before changing into styling. Want to actually make sure that when you click the icon to open up ah list of coupons will make sure if they click it again, it will close it just so that we can free up the space for the user to do this. We're just going to add in a small check just down here to see if the coupon list is appearing already. So we just do that by saying, if the style display type is a block and then we'll say it is no, we'll add in this line here. So if is currently a block, we want to change it to be hidden and then the opposite that if it is a block, if it isn't the block, we wanted to be a block, so that would just mean if we go back now we can click type from 80 appear when we click again, and it hides the next. We want to make a couple of the changes like this. So up here we want to change this from being the cash Emoji chose to see for coupons like so so we can start to change the design. We can change the content that's displayed just so that we may have at these new design changes. It starts to look a bit nicer. So again, we're gonna change the wording up here as well. So just change this to say, instead of list of coupons for I would just say something. Brows, coupons. Hello, that have bean used for. And then we'll just put the domain name. There have been just bold. Just bowled the domain like so And then what? We should probably do us. Well, they just move this on 20 line again just to keep things much easier to read. And then in here, we'll add another paragraph that will just say, click any cape on to copy a news. So this line just here is last Usti on symbol. And then we want to close off that paragraph, and I think we should make this a talic a swell. I would put this in line just for now. So again, we'll save this. We could see we have a change up here, and then we have a little more information now. Okay, so we're almost ready to start adding the CSS changes that we want for, uh, coupon list here and the coupon button. But first, we just need to change the way that we display the coupons eso that it makes it look a little bit more clickable on and to make it so that when we do start to read the styling, we can select these elements much easier. So you can add the styling that we want. Let's just go back to our code editor and just make a few changes just here. So to do this, we're gonna scroll up here to where we're entering the code for a coupon. I'm just gonna remove this part here, that saying code and we're gonna put a span element here of a class of code and then close that off like this. Then we're gonna move this next element here onto a new line. Instead of putting this inside the E M tags for italic, we're gonna put it into its own paragraph. And then one thing mission. When we do a swot is at some toff emoji arrow like this one just so that it adds a little bit of extra flow to the way they were displaying this. But again, if you want to change this slightly, you can have your own display. I recommend you just, you know, add your own store flavor to it just here, But you can copy the CSS that I'm adding us share linked this after the video, so you can use the same CSS if you want. And then from there, you know just things. Making your own at a logo. If you want on things like this, let's just say that now, just to see just to see what this display looks like. So we go back to extensions. Reload fresh in case we can see it's a spaced out just a little bit more. So now let's jump into the CSS file and start to add some more styles. Case will stop here with the coupon list and let's add some styling first for the header off coupons. So I picked just a simple from family off seventh. We're setting new font size of 26 to make it stand out a bit more. They want to add a margin to the bottom of around 20 pixels. Was that a border bottomless well of one pixel, just a sort. A light gray color. We'll have padding to the bottom just to space out this border and then was a line hias well so that margins are just a little bit more consistent. This will be 26 picks. Also the same, Um, sizes. Have fun size. Then we'll add some styling for paragraph. I'm tag inside the coupon list, so we're changes slightly on the farm family here to be Sand Saref line height. 20 pixels of font size of 16. Just had a bit of contrast against the header. Center it and then add a front weight of 500 and set a color in here. A swell, a light gray, and they want to remove the margin. Top gets next. You want to add some stylings. Toothy, um, actual list of our coupon codes. So again, this being creep on list, we'll get the list element would change the list style type. It's a nun, and then just remove any margin for patting from the left. And then we're styled naturalist items. So you want to contain these in their own sort of little elements. So out of Board of Radius here of three pixels and then put a border around that like this , a bit of a petting 15 pixels, and then we'll add a shadow around this, a swell then we want this to be up case. Then we just been a margin bottom of 20 pixels just to space out. If we have more than one code, more than one coupon code available so safe they're safe on just what we have bearing in mind of a few more styles to adhere. But we should start to see this take place. Case is starting to take shape now Bob's who have a few more issues here like this. Andi, padding around the overall element isn't too nice noises, horrible blue color. So we're going to start to make changes to those items. Now we can see this area here. It's time to take a bit more shape. So next we replace them. Styling to the code item. This is the actual coupon code holder itself. Let's just scroll up. So without a background color off a light orange, a little bit similar to the one used on honey, but not no, exactly the same again. If we change this, these colors, you should have patting five pixels. I wanna make sure that it's display in line and again we're going out of border radius of three pixels. I have a border around this as well. I want to make sure that if the cursor off the mouse is moved over this set to be pointer. Okay, then finally want to add some styling too? The new paragraph tag for a description. So again that we keep on list in the list item and then paragraph I'm a text. Align this to the left. Sam Margin, top of 10 pixels removed in margin. Bottom on. Do you want to remove the text transform from here as well and SEF on size of 14 pixels? It's fun size, not take size. Let's refresh. This case is looking a little better now you can see here while I'm suggesting for you to add your own styling. Um, but again, this is starting to take shape. So now we need to actually work on the overall enclosing element here off the actual parent coupon list development to remove this blue color. And then we'll actually have some styling to the button up here as well. Okay, So first we're going to change that border radius to six pixels. We want to bring the box. Showed that we were using up here just had a shadow around the outside of the list items. We want to make the border color white. We'll keep the background the same. We will keep these elements the same. We'll add some padding. 15 pixels. Remove this blue color just here, as we mentioned. And then we want Teoh. Allow the use that belt a scroll down the page, something when we have overflowed hidden. So this means if we have more than one coupon and it will get cropped off of the bottom of the deer fears, we want to make sure they can scroll down some of the overflow. Why were set that auto on then dyes everything we need So far, so safe that and then the actual coupon button you need to set as well we'll adjust. The size here will change the height to 40 pixels set. The width was 50 on. Then we're changed the border radius just to be six picks. Also, we've got more of us off rectangle thin this circle. We'll use the same book Shadow again on again with the color were removed. This and we'll make our border kind of white was a fun family of South and we'll adjust the distance. We often the top on the right hand side of the screen, just a 15 to give it a little bit more room to breathe on. Then we're gonna say font color. So that's just save this now and have a look. What we have so far in case we can see this is it's not perfect by any means, but it's got a bit mawr defined sections and a little bit of styling going on here, which is enough for us to move forward with On Did use for the next bath, of course. So next we're gonna be allowing users to click a button down here at the bottom off this elements, they can submit their own coupons to the database so you can start to populate this proof information on DSO. This will be the next section of the course 10. Ensure extension appears: case when this next video, we're going to be updating extension so that you can see the coupon overlay like this, whether you have any coupons available for this website or not. So just to give a quick example of this, we already have Example coupon code in here for google dot com. If I going to BBC um, weather over here. I don't have any coupons, but I can't actually see the extension up in the corner. So the first changes we're going to make are to make sure that you can actually always see the button to open the coupon overlay here, and they can submit a coupon. So to have had in the button to add the coupons down here. We're probably added up in this top corner, so even if they scroll down, you can still easily click to add a new coupon. But so first we need to actually make away so you can click to openness overlay from any website. So it's jump back into a code editor on make some changes. Okay, so we're in our code editor now, and the first thing we need to take a look at is this line just here. So right now we are taking the coupons variable just here and looping over it with the four each function. Just here. Now, this is great if you know that you're always gonna have content to loop around, But because we know that some of these domains will be empty money to change this up a little bit. So we're gonna change this instead to say for key in coupons. And this will be Luke just here. So if we come in this part out and instead of using this coupon variable, just hear from the for each function, we're going to set it ourselves. So if a coupon equals coupons on news, Katrina's feel that correctly so this will look through each element just here on set this key variable, and that will be through the actual key. Want to access in this array. So this will be each each individual. Cooper will have a different key. And so we can access the object the same as we did before. But this will mean that it wouldn't have an error if there aren't any coupons. Just make sure that that isn't there. So we're changing this line into this just here. So after you've made that change, if we save that on refresh and go back to the website again so fresh. Reload this other domain. Just before we do that, we need to make sure that we take away this closing bracket just here because the four H function opens an extra bracket just here. So now we only need the one curly bracket just here. Cali braces. So if we go back, refresh and try again. This should fix this problem. Okay, there we go. So we can see a coupon overlay appear now. So in the next video will start to add styling for the submit button and the overlay that will appear when we click it, and we'll add a little bit of text just done here to say, you know, you could be the first person to add a coupon for this website just to give them a bit of a call to action to actually create on enter coupons 11. Display form for submitting coupons: Now that our coupon overlay is appearing on every website, we need to make sure that we suck. Show a separate message if there aren't any coupons for this page. So we're going to add a check in just after we make this loop through the coupons here and say, If coupon html is empty, we want to run this piece of CO. Just here. So well, then just add to the coupon html and we'll say, be the first to submit coupon for this site. Fix has been in that. So if we save that and fresh and take a look at our page, just make sure to close off that paragraph tag. We should now see a message in chrome extension. So if we go to a site that doesn't have any coupons just like this, wait for the page to load open the overlay and there is that message just there so you can see that it's now showing on this page. Okay, so now that we have a message that's appearing here, they don't have any coupons. We need to add in a button for people to click on to it, to submit any coupons they have for that workplace. So what we're going to do for this is go into the inner HTML area just here, and we'll just add a new development, then moved this onto a new line and we'll say submit coupon will add a class name in here to submit. Bottoms up the name of this class. So if we save this and refresh, we'll find a new button. Were at styling for this a T end off this video. And then we need to add a further element down here to create the actual overlay that will appear when someone clicks this button. So at that, just here. So then create a new variable again. We're called this coupon submit overlay and this is a crane new element, which would be a death similar to perforce will at a class name. So just copy this line here. Class name is underscore. Submit overlay on the same as before. I'll go through at in the CSS, but I'll provide the updated CSS file that we're using at the end. So if you want, you can just copy and paste the CSS or follow along with me and then we'll set the inner HTML off this element. Swell. So we'll say heading in. So h three, Do you have a coupon for this site thing? Close that off on a new line. We will create a number of inputs that they can use, So we need them to pass us the actual code and description off what this code does. So, for example, it's 50% off, and then finally, there'll be a button underneath them to actually submit the coupon. So we just had those elements now super each of them inside a day of Andre. Need three of those for each of those. Those parts of this first won't be the button with this last one, and I'll say submit coupon. Thank Christ. The button off up here, we need to label which say code label here to say description. And then we need the actual import elements as well. So you do that just the same as you would usually input type is text in class is code. We just copy that on pace that down here and just change the class Teoh description or disc my best for short. And then we just need to finally add a class name for our submit button so we can had an event listener when this is clicked and then almost done. We just need to add one mawr attributes for this element before we add it onto the page to make sure you closed this off just here. So I want to say coupon submit. Overlay style display is equal to none because we don't miss to appear until it actually has been clicked. An amber just at this at the bottom of the page. Make sure it's coupon submit overlay. So if we just look over there, we can see the everything is correct and save. We just refresh this and make sure that there aren't any errors. This is running smoothly. You shouldn't see anything appear. If you inspect element on the page, you gotta find this of the bottom of the page, but we don't need to worry about that just yet. Now that we have submit overlay added to the page me to go down and make sure that we create an event. Teoh Ensure disappears once the user clicks. Thesis. Admit button up here. So to do it's me to go down to our pre event function down here and add some space at the top. We're going, Teoh, copy this line just takes. It's gonna be an event listener for the click event. Just the same as this one here doesn't make a few changes. So instead of, um, waiting for coupon button, we're going to be listening for coupon list and then submit button to be sure to close thes brackets both up here. And then we're gonna be saying document query, selector submit overlay style is block. So basically the opposite of what we had up here on this with them. Make sure that this element appears. So let's just test this just now. So it's safe here. Refresh Andi. Reload a page. So we haven't added any styling for these elements just yet, But if we know click, submit coupon, we should find some way down the page. This element appears of this doesn't have any styling either. But if we refresh and just go back down to the bottom of that page, we can see this hasn't paid yet. But if we click the overlay on the submit coupon button, it then appears so next me to add styling to actually make sure that firstly, this button is styled nicely and that this coupon overlay appears in the middle of the screen just here so that the user can enter their their coupon code and a description. And then finally, we need a function that once they press submit coupon that it sends a request to fire base to add this information into a database. So in the next video, we're going to be looking at those two. Two parts of it would do the styling. Andi, add the connection to Fire Base to send this coupon code into a database. 12. New command to submit coupons to Database: welcome back. So in this next video, we're going to first create a function that we can use to send the coupons that the users are submitting through into our database. So do this. We're going to go up to the top here after we have our chrome runtime send message function on, we're going to create a similar function, but for submitting information to fire base rather than fetching. So we'll start by creating a variable function like this. It looks a submit. Keep on and again, this is a function and we're taking three parameters that we code description on domain. So open up like so we'll add a console log just to help us t bucket. If we need to Swiss steak submit coupon on. Then we'll just passed through theon object that we actually want to send through to fire base as well. So this will be code description again on the main. So all the information of a passing and basically just in an object dropped in the plane variables. That's the logging so we can see it. I'm just there. But next we need to say chrome run time send message so similar to what we're doing up here . Okay, Onda, we can actually copy this code taters to save some time. So if we take this just bit here and paste in, and then we need to change the command from fetch, it's a post and then in data, we're going to pass in this object just here, like so and in the response instead of running the past coupons, um, function just here. We're going to use a new function, Gonna create a second. So it called this one submit coupon call back, and this would take in the response data on the domain again. A swell. So if we just take this same callback function just created this will be a function, and it would take the response on the domain. And then from here, all we want to do is hide the overlay. They're gonna be Crease Lecter. I just want to get submit, overlay, and then we're saying and a style display is no. And we're just a lot to the screen just for now and say coupon submitted. Just give a little bit of feedback, but I would recommend styling these a little bit nicer if you want to actually use this a lot. Box six Embassy. That isn't the best way to display messages to the user. But for now, this is perfect process. See what we have. And we can't really locked this to the console. A swells. We can check that information. We're getting back. If you need to debug any of this so you can check the response, just that. So next we need to actually go further down to the page again, where we created our event on add an event listener for the submit part of the button that actually will use this new function have created here. And then we'll go into a firebase file on add this separate events. So we have the fetch commander to add the post Command into here as well. 13. Push coupon details to Database: welcome back. So as we mentioned the last video, we're going to be adding a function down here in the crate events function so that we can have a listener for when the user fills in the coupon overlay and submits a coupon is this will call the function that we created up here that submit coupon function. So we basically need to make sure that we passed through the code on the description on through to this function. So first average it before, as we did before. Let's copy the event listener. Just a sex and time on change the impediment to actually listening to. So for this example, it is theseventies overly and then we won't listen for the subject people. So if this element is clicked, we want to run this piece of code to the first we want to do is get the code. So the coupon code. So again we use the query selector and this will be the submit overlay code we have just here. So be that class of suddenly overly and then want access the the code in purchases. We used this class name so that could be access just like this we actually have a dot for the class name and then code. They just add value to make sure they actually get the import value from this input field than exactly the same for the description like this. And then all we have to do is just pass this through to the submit coupon function like this. This is all we need to dio inside our app dot Js So we can save this now and then. This is all linked up. The next one we need to do is update firebase file and then finally add our styling for the actual overly Okay, now we're not firebase dot Js file. We need to make sure that we add a another check in here for the actual push event. So, in our case is a post command here, so imperiously fetch and down here we say post So we'll add another if statement underneath this one listening for the post. So we now know that this is where will have thesis admit group on data coming through here . So we first need Teoh set some variables, just that we did up the top here so we can copy the domain example, because we'll need that again, and then we need to get the code. This will be message data code on the same for the description. This will be a message Data description. That's quite straightforward. But now we need to make sure that we actually do pass this into the database. So at this inside a try block. Just if there's any errors from fire base that we can't predict that they won't just break silently swing to capture these these errors. So you can do that like this. If I spell that right, then we can look the era like this, but otherwise we're okay inside this block just here to run the code that we need to run. So we're start by saying new post firebase database of accessing the update base itself, the way to set a reference. So be in the domain. And then we want to use this encoded domain appear so very similar to what we're doing at the top here. We're gonna say, push and set code as code on description as description. So that is everything you need to do down here and then for us to send the response back to the usually want to say the new I d like the new idea that's been added into the database. So to do this, we just say posts, I d equals new post Key. So uses this reference up here. And then there's a firebase function that can be generated so we could get the unique key off this new coupon code. And then we just passed the response back. So again, because we've set everything up here, we can just pass a response back, similar to the beated. Just here, instead of it being for the fetch Command is for the Post Command. So we would just say response type results, said the status again as a success and then just past the data back as the new Post I D. And the request. It's the message says all we need to do to make sure that we passed this into the database , but it's pretty backs instead of just looking into the console that we do set a separate response so that we actually passed this back to Abdul Yes, rather than just having the error in this page. So you just set the status here as error and change the data. This makes it all to change this comma and then save and be sure to that down here. A swell, um, off ways you can account for hours because it's no correct object. But now just make sure to save, and we'll run the chrome extension again. Do you find when you run that it doesn't quite load toothy overly when you click the extension in the top right hand corner? But to fix that, we just need to make sure that we adjust this class name just to excite. Missed healthy underscore. But if we update this, save it and run it again, we can start to see extension appear. So I now need to add some styling. But let's just first check the extension so we'll go to our coupon finder and refresh. We'll go to a domain open up and they can see that on here. We have a coupon. Never submit button, which means add some styling for on that overlay that appears as well. So in the next video, add some basic styling for our overlay and ask submit button 14. Add styling to button and overlay: next, we need to add some styling to our overlay. So an estimate button. So we're gonna go into our coupon dot CSS pile up here and scroll up to the top. And so we're going to stop at in some styling to our overlay. We'll call this coupon list. Dave, I'm not the only story at buttered, So 1st 1 to make sure that we have some padding So five pixels and 10 pixels for the height for the top and the bottom in the left and the right was set a font size of 10 pixels. Black background. If you want to change any of these colors along the way, you feel free just to make it stand out for us. Tried to use it in this. In the example set some font color is well formed family on. As I mentioned before, you can copy the CSS added after this video so you can grab CSS there, so I just go through and at the rest of thes the case, this is all the styling we need for our buttons. So if we save refresh on, check it out, we just need to make sure to add a underscore again. Let's start here. Keep missing these off. So for refresh again. Now open our extension and they can see we have a button styled. So now we need to add some styling for our overlay to make it appear in the middle of the page. And I think at the moment as well, yet this is hidden behind the elements off the page. So underneath where we added the standing for the button, so add some styling for overly. So again, this is under school. Submit overlay. The 2nd 1 is a hyphen, and this can be fixed as a position will set a width of 220 pixels are heights 200 pixels. Position it halfway down from the top of the page and 50% from the left. For the margin left, we're gonna be doing minus 110 pixels, which is half off the whip on the same from the top set of background color. The border color as ed index of the appears on top of every element possible because we're working with different websites here, they could have floating elements. It's just to make sure that the overlay appears on the top of any content was sort of patting. And we can use this box sizing CSS property here and says his border box. And then finally we just text the line as center. So if we save this now and then reloaded extension on a fresh so we can open up her extension, we could submit button. And we now have overlay appearing on the page. No, it's not the prettiest, but it should be functional. So if we open up a five ace console and check out database, we're gonna add an extension to make sure that are functionally mate of post the coupons through to our database is working. Okay. May have noticed this on your code as well, but I took this wrong up here. So you see the description line, But what we have supposed be message. So it seems to change this one line here. We should have this correct on yours. But just in case you were copying exactly what's righted, I must make sure to update this line just here. But otherwise everything should be pushing through to your database. So I just run my example again just to show you so any errors will appear just here. If we're fresh this reload the page opener overlay at that discount code at a description and submit. We've got a message saying Coupon submitted, and if we now check in a database, you can see that has appeared done here. And this is the unique post idea that we mentioned before so you can use this Teoh actually display different information on the page if you want, So at the moment they don't appear just here yet. But if you refresh this page because it was for this domain name and we reload, you can see that it appears just here. So in the next section of the course, we're going to make a few adjustments that if you click on the discount coaches tear, it will copy to your clipboard so you can then just paste it into your car. Andi will make a final few adjustments and the styling areas like this. I make sure that you can close this overlay and just more finishing touches on. Then we'll look at how you can actually publish your criminal attention onto the chrome extension store 15. Copy coupon to clipboard & close overlay: this new sections, as we mentioned before we're gonna carry on will be left off. So we're gonna be making it so that when you click on these coupon code just here, they'll get copied to your clipboard. And we're also gonna add a event so that we can close. This overlay will make clicks will add a button up here so you can just click. Andi closed the overlay, But first, we're gonna work on this area over here, so we conduct a copy to Clipboard interview, click on any of thes codes. So it's jump back into our co editor and start to add the's functions. The case of here We are back in that code editor, and we're going to scroll down to where we have event functions down here and we're gonna add a new function just above this. They will actually be the copy to clipboard function, so it would be a new function. Here's a copy to Clipboard, and this would take in a string that we want to copy. And so in here. What we basically want to do is create a text area temporarily and will input Ah, a string as the value of this text area, select it, copy it and then removed the text area so we'll start just by creating the input. And this will be, as we mentioned, a new element off text area. And then we'll set the in HTML to be asked Drink like this and then we just need to add it onto the page. So use a pen child again at the MPA event or input element, and then we just select it Says will select all of the contents off the text area, essentially sort of doing this so it's just select it. And then we want Teoh carpet to clipboard. There's a number of different ways to do this, but the best way on chrome, which is where the extension will be on that supports and most browsers, is to use this executive command function like this and have possibly copy. So that is a X E C command copy, and then all we have to do is then remove the element that we just created like this. Make sure you spell removed correctly. There we go. So we're creating the element set in the enrage to mill as our string, adding it to the page, selecting it, copping it and then removing it from the page. And then we just returned this function. So that is our copy to clipboard function. Now we need to actually use it. So down here, we're going to create a new event on this event will be similar to what we have done before . Speak document query selector. But this time I want to say Chris liked all. So we're selecting all of the elements on the page that will have this matching class and we're gonna be looking for coupon list. Make sure you have underscored coupon list and then we're looking for the code class in here as well, which corresponds Teoh class class up here. So span class is code. So I looked through all of those elements, and then we'll make a check down here. So we're calling them code item, and then we'll just run again. This is essentially like adding an event listener to each individual item with this class, so expecting all of them, looping through, and then we just say code item at event listener on click, and then this will be basically the same. It's where you don't normally. But inside here we can now run code as if it's on each of these individual elements without having the crew sector. All this pit down here makes it be exactly as it would be. A sui created it down here. So inside here, we just need to say Coach String is code item in the next TML and then we just say copy to clipboard Coach, String like this. This will add an event listener toe all of our coupon codes on when they click on them. It will copy them to clipboard. So it's safe this on. Let's go back to our crime extension. Refresh, Andi, see what we have. So refresh and go back to extension. Could come out of that coupons paste and we can see that is pasting. I'm coping the events that we have just hit that's working correctly. So next we want to make sure that we can close this overly so we're gonna add a span element of the top here on when it's clicked. It will close this overly. Okay, so first we're going to add a span element. So up here where we have our overlay, we're going to add in a span just here and move this down onto a new line. Make sure there's a single quite just there on a single quake, just there to start off with. And we say class is close and then we just put a X in brackets there and say Close. So that's all we need for our button. And then we just go back down to events area and then we're just going to add another crew . States actually can copy this one here and paste Andi instead. Off running on here. It will be the sudden overlay itself, and they were looking for the clothes class. This will find the subject overlay and then asked Band that we just created and instead of to make it spares block, it'll display as none. So I saved this. Go back to extension. Refresh, Andre, run casing. We open our overlay. Now we have this close text, and if we could kit, it closes the overlay. So there we have it. So we have our extension that can display different coupon codes. You can submit coupon codes, Andi. He can then click to copy any code and use them on your site. In the next video, I'm going to paint how you can submit dysfunction to the chrome extension store and think about some ways you can improve this extension both in terms of styling on the different use cases and performance you want to get out of it. 16. How to publish Chrome Extension: Welcome back to the final section off this course now. So far we've gone through and we've created our extension. We've connected it to a fire based database. I have had it all the interactions we wanted to and from the database to show out coupons. But let's have a quick think first in the first part of this video about different ways. We could improve this extension if we wanted Teoh, make it support more users and add more features for them. So let's have a quick look at our extension over here. So here we have it. Just we built. We have our button up here and it opens this overlay. Now the first thing that stands out to me is that the design off this is very, very basic. So the first thing I would suggest for you to look into and maybe look at websites like dribble dot com, we can find good design. Inspiration is different ways. You could tweak this gun starting point to add your own unique flavor to this extension. Andi, change the design and just on the display of this a little bit now, in terms of features that could work quite nicely. One thing aren't suggest looking into is adding a vote option just here so you can do, like, thumbs up or thumbs down to see if this extension. If this coupon code worked for the different users, so then you can quickly see which coupons have been have been good for people of which ones haven't worked. That could be a good option. Toe Ada's well, and now another thing that could be quite useful for your extension is some way you can search. So if you can imagine, if you go into a shop has lots of different coupon codes, it could be quite overwhelming at the orders listed here so it could be useful to add a search box up here. No, I won't show you videos just yet on how you can. You can do these sorts suggest to try and implement needs yourselves, especially starting with changing the design. If you have any questions on how you would want to go about this, feel free to send me a message or drop it in the questions box. But these are the different ways you could start to really add extra features to the extension and make the design a bit more your own. Okay, so in the second part of this video, we're going to look into how you actually published this to the crime extensions door. Now there's a full write up about this from the chrome extension, like documentation site. Now, this is always gonna be up to date. So I'm recording this in in May 2020. So by the time you're watching this, it could have changed slightly, but chance, I would be pretty much the same as this structure. So the first thing they mentioned to do is crazy up a zip file. But one thing that that can often be forgotten is you need to have an icon. So if we have a look at extension just here, we can see the in and manifest. We just have the name version description, permissions, background content, scripts and so on. But you also need to have a icons. Um, option in here. Now, this is Theo images that you need to have to be able to publish your extension, so I'll show you what this looks like in the documentation here. Okay, so every chrome extension needs toe have an icon in the manifest file. Now you need to have a Nikon that is at least 128 by 128 pixels for an extension. Or you need to have another icon of 48 by 48 pixels, and you can also have a 16 by 16 icon as well. This will be showing up here, but the only way you do that is by adding in a perimeter like this. So it's icons, and you just have an object with each of the different sized icons and then where the image is located in your folder. So once you have that, all you need to do is go into your fold. We have your coupon functions. Make sure you add your icon in here and update your manifesto linked to this, and then you just compress or turn into is it? And then you're ready to upload this. No next need to go to the chrome web door developer dashboard on creating New item. If you don't have an account for the developer dashboard yet, you need to create developer account on an oily to do is click on New item so once you do that, you're then browse and select the ZIP file you just made. So once you select that, it will start to process and upload your extension, and now you can fill in all the information that you want to add. Fuel extensions of this all comes from the manifest file. Then you can add in a more detailed description. Selected category. Select a language on. Then you can add more screenshots here, which is definitely recommended. If you want people to be able, Teoh, download your extension. This will make it stand out. Maurin the extensions door, and you can add a link to your website as well on support links. We don't have to have these, and you can also have Google Analytics for tracking to see how many people are finding your extension, Listing on how many things clicking onto it and then all you need to do after that is click save draft and submit for review. It should normally only take a couple of days, sometimes up to a week and songs. You have your icon in there. If you don't have your icon, it won't pass this review, so it's important to make sure that you have that. Now there are different ways. If you wanna charge for extension, there's a few extra steps, so you have to make sure that you pick a payment system. Andi, A few different options there. We need to make sure swell when you're signing up, you pay the developer fee, which at the time of recording is $5. I'll just check down here. Yeah, there's a $5 sign up fee. So you have any questions as well on how to publish? Just drop a message in the questions box, and I try and help the best I can. But this should have to give you a quick I'd on how you would go about creating extension and actually set in this. Live onto the chrome store so you can make your extension. And once you've uploaded your extension, if you make any changes, you can go into the package section just here and upload a new package. Eso updated zip file If you've made any changes and just try to make sure that in your manifest you change the version number so that everything keeps being updated 17. Thanks for taking the course!: So as you mentioned in the last video, there's a number of different ways you can move this extension forwards. Now, I would love to see what creations you come up with. So if you've made any contact me on instagram or you send a recording of your course, send me a message on here with what you've managed to create. They have any questions along the way. Just let me know as well. But thanks so much for taking this course. I hope you found some value from it on would be sure to see you again saying 18. Bonus Video - Auto Apply Coupons (Source Code in Resources Section): In this video, we're going to be looking into how you can run a function in JavaScript across multiple pages. So we're gonna be using the local storage part of the browser so we can store in the state of our function how far we've progressed. And then we can then listen to see what's happened on the page and then adjust our function and then continue running through the rest of it so it can work between these page loads, this video, the example I'm going to be using is a coupon autofill function. So we have a list of coupons who want to apply to our basket. So I've made up her a pretend site here just for the basket on it. And there's some coupons that will work and there's some that weren't. So I'll show you now what the site looks like. Okay, so here is the site just here on the left. So we ignore the code on the right for now. We'll get to that in a moment. So as you can see, we just have a example, Order Total over here and list of coupon codes that are valid. So if I was to type in one of these so 320 and apply, the discount is made a difference. If I was to get rid of that and apply the discount, it takes it away. So it's really, really simple. Does runs on the backend, Musharraf or all the code of this afterwards as well. But that's how that works. And then I have this function over here. So if I click this button, is going to run through ray of coupons. Do we have so such these ones over here? So one of these is in this array or in this list. So that should be the coupon that we use. So straightway for this first example is not going to reload the page, but we can see what it does here. So if I click this button, you can see it's checking each of the coupons. Check him out. The auditory tool does. And then it will tell us which most best. So we've got this one here that many different, so then applies that afterwards. So that's how it works. There are run through the code in a moment and show exactly how this works. So if I was to change this from need reload false, to need reload true. Or this is going to do is gonna reload the page each time. So I'm just going to add the console over here. And if we just refresh and run this function again, so if we click this button now saying wait for the page to reload. So imagine this example that when we click apply discount, this is telling the server to check this coupon and it reloads the page. But because this is just an example, I'm just going to be that server. So what is click reload each time it asks. So it's going to check that coupon. And then it's asking frustrated again. So I press it again. It's gonna reload, check that one. It's going to read out again. Here it goes. And then one more time. And then I go and it's still knows which one was the best out of all of those times. So even though it reloaded the page and the session changed, it's still kept the status of a function in between all of these calls. So as you can see, there's a coupon winner there. And I click OK and then applies it again. Now, this works because of local storage. Now what we're doing is we're setting an object that we keep updating each time we run a function. So I'll go through the code in a moment, but that's in a sense how this works. So we have. The local storage that we create an object with. And then we update this object each time and then run a function again. And when that function loads, it first goes into local stories to see, are we in the middle of running this function? So if we are a continues the process and if we haven't run the function and we've asked it to start, it starts running it, if that makes sense. So this, you can see all of this from the Application tab just here. And if you go to local storage. So if I reload this now with this open, you should see this actually as it moves. So if I click begin here, you can see what it's doing. So is to expand this window a little bit. Blew this up. So what we're doing here is we have a selector object. So in this example, to apply a coupon code, a few different things you need to have. So instead of just writing it for one particular site, if you've written a Chrome extension, for example, you need it to make sure it works across lots of different websites. So it's important to bear this in mind when you're creating your code. So sum, checkup processes have the coupon that you enter the coupon and then press enter some of them you enter the coupon, then press a button. Some of them the patient needs to reload. Other times it all works on the page so you enter it and presses a button and then they'll call that behind the scenes without reloading the page. So that time, you might need to set number of seconds, then wait for the page to change, and then go in and grab the basket. So as you can see down here, this is what we are doing. So we have the cost fields such as this area just here with a cost field prefix. So that's to make sure that we remove the dollar sign, the pound sign or anything like this. So if that's one character, we just remove that from the front of the string. We then have the coupon type. This is, as I mentioned, is a button we have to press or do we have to press enter? This is if the patient needs to reload or not. So as the thing like changed earlier. So if it doesn't need to reload, we call the function and then just wait and use a timer if it doesn't need to reload instead of, you know, weight into grab the changes to the basket total on this page. We wait for the page to reload and then run it once the page is opened. So I'll show you that in a moment. Then we get the coupon filled. So that's just this input just here. And then a submit button. So that's this button just here. And then we have a wait time. So this is how many milliseconds we should wait. The page to change. There's sometimes some pages take a little bit longer than others for us to go in and make this check is what we have here. Then we have a function, a variable here that checks to see if the extension or if the code is running. So in this example, it is running. So that means when I press reload, because it's waiting for me to reload just here. That's how it knows to carry on this same check. So here we have the start basket value. So actually this is wrong because, because I ran this afterwards, run it before, it had the basket total already reduced. So it'd be interesting to see how that runs there. So here's the current coupon that it's checking. So we keep a track of which will much checking. And then up here is wanting to show you here. This is the coupons that is check. So if I refresh the page here as if it was going to go through the actual checks. You can see now is updated and said that we've already checked this coupon. And unless this chip is properly, so if we, so if we now refresh the page, wait two seconds. You can see here's the checks again, so there's the best deal. That's this one just seeing what the valley was when he applied that code. And it knows that that coupon was the one that had the best deal. And then there's the ones that it's checked is currently in the process of checking this next coupon ID. So if we then see that it's waiting for us to reload. So if we go back to this page here and refresh, we should see it update this array just here they go to the next one. And in the meantime, it's now checking the next CTO is going through each one making these checks. And the reason there's that slight delay is because as we mentioned over here, we have it set to two seconds or 2 thousand milliseconds. So that's how it works from this view just here on the front end. Now let's actually look at the code and see how it's actually doing this. Ok, so here is the code that we're running on this page. The first thing we have here is as select objects. So as I mentioned, it's created in a way that can be adapted to work on lots of different sites. So as we see just Timmy about coupons is our array of coupons that you want to check. Now probably when this function is actually being used in an extension, this you would pass in as the last item. So you would have all of this up for your actual sites. You might bring them in from your database perhaps where you actually have the different information for each site that your extension works on. And then your coupons would be in a similar way, but probably stored somewhere else. So that's how we have that. Then we have a coupon field, as we mentioned a minute ago, I submit button if it needs to reload or not. I'm not being true or false. My coupon types that we button or enter, wait time in milliseconds. I cos field. So how much the query primitive of this over here, the querySelector of this id here. So this is a class name, same as this one up here. And then the prefix of basket value. Then what we have done here is we're using local storage is the first place. You'll see this. If the run checks part of our local storage item is running, then continue running checks, simple as that. And then down here, we just have a simple event listener that starts NEW checks. So if we're not automatically run this in the background because we started already, we're adding a click event to this button here so we can start this function and beginning to run. So if we scroll up, I'll show you a little bit more of what this does. So the first piece of JavaScript we have on this page is just where creating a new object for function. And then that includes everything else afterwards. So here is our wrong coupon check. We set an empty array for asset coupons. We don't really need to do that just here. And then here is the first sort of main function that we cause. We have our run check function just here, which takes in the selector object and the status. So this is. By default it will be start, so we want to start the function. But if you want to continue, so if wanna run this over page loads, then it will say continue. It's not just have a page load. Say for this example, we use it in between each check so that it works both ways. So here we go, we check what the status is. So if the status is start, there's a few things that we need to set in here first. So as you can see, we set the run checks part of local storage to running. So you just set that like this set item, the name of the item, and then the value in here. Down here we get the basket values. If I just move this across a bit, a bit easier to see, we get the basket value, so we're using our Select Object cost fields. This is the class name that we passed in in that object at the start. So we use it in the querySelector just here, and then grab the contents of that elements. That is, they'll grab this part just here. Then what we do is we make sure that we turn this into a format that we can know is going to be there. So this might be a string, it might be a number, but we make sure that we have it as a float with two decimal places. So in this example, it's sent column apart of this string just here. We then set this as the starting basket value four, a function. So we need to know what the basket is stein up before it run anything so we can compare the different coupons against this. Next we add another part to coupon checks object just here. So we have our best deal. This is where we check later down the function when we're running to see which coupon is best, we compare it against this. So we start by having the existing basket value that we added just here. And then we add a space in here to say which coupon was best. And then we just set another array here that is all the coupons that we've checked. Then we just set this, so we say a current coupon. So that's a local storage disposal which when we checked in at the moment. So that's an empty, but we make sure that that's in the local storage wherever console lock here, which is useful just to see how this is progressing. So it's harder when you're creating this whilst share or the code as I mentioned with this video. And then we are send this all to coupon checks part of our local storage, but make sure to turn this from an object into a JSON string. So in local storage, it's not stored as variables that you can access it through an object. You have to make sure it's just a string. So you convert that just here. And then that is all that you need for starting this. If we want to then continue running the function that is this part of the code just here. So as you can see, the first thing that we need to do is grab the existing selector object. So it's important that we're not setting this each time. So we save this in the local storage and then we used JSON pass to make sure this is now a object that we can interact with and we can use. And we did the same thing for the coupon checks just here. So this is the object that we just, just created so that we drew for the selector one and for coupon checks. And then we just have a bit of logging to the console to say we're continuing. This isn't a brand new run of a function with continuing at here. What we have here is a check to see, are we partway through checking one about coupons? So we say, what is the current coupon? If it's empty, we don't need to do this, but if it isn't empty, continue checking this. So to give an example, if the page has to reload each time, what will happen is we have the first part of the coupon check is where we enter the coupon into the input field here and then press the button, and then the page will reload. And then when the function first runs after that, it will get to this point of our code. And then we want to make sure we return false. So it stops running any code after this, and then it continues to check this, this, this coupon. So in this example, what that would do is it will grab the basket value there and compare it against the star basket to see that it reduced the cost at all. So if it, if we're not currently checking one, it continues down. So we have just this here is a, a check to see. Is our selected objects valid in a sense. So you're probably check this a bit more detail, but this just shows how you can see. If we have a query selector property on this object. Sanctuary select the input field just here. Otherwise, if it is there, we just continue to run the function. So that's where we have this. Here's where if it doesn't have that, we killed a function there, otherwise we continue down. So next we just set array of coupons into a more accessible variable just here. So you could use a left or a const here. But again, we just got this as variable, keeping us all simple here. And we have that current pupil names. We're just setting a variable just here along with our next check coupons. So what this basically does is we have our array of coupons that we want to check, and we have a current coupon. And then we create a for loop that looped through this array of coupons. And we're checking to see if this coupon has been checked already. So we have an array of checked coupons and our array of all of our coupon. So what we're basically doing is we're saying, has this equivalent been checked yet? If it has, don't do anything. But if it hasn't add this to our next checked or next check coupon. And this means one coupon at a time. We'll be checking. So it's normally means we'll be checking the last coupon of the array. So as it's looping through everything, this is gonna overwrite each one. That's fine for this example. So a grab that last part of our array that hasn't been checked yet and set this next check coupon. Then further down here, what we're doing is we're saying if next jet coupon is an empty, then we had a coupon that we need to check. So we pass that into check coupons star with a selector object and the name of the coupon that we want to check. I'll show you what that part does next. But otherwise, if there isn't any coupon in here, so if this is empty, we then that means that we've checked all of our coupons. So all we need to do next is tidy up and display the result of running this function. So we would just clear out the next run checks so that we're not going to run the function when the page reloads. And we just say to the console to stop by in this function. And we, they, we then make a check to see what was the best deal. So in this code just here. We know that we have a name about best deal. So a coupon has one, essentially this, this comparison. So what we do is we run this function again so that the coupon is applied to our basket. Because what might happen if you run three different coupons and the first one was the best deal, but we've ended the function on that third one that wasn't the best deal. We wanna make sure that we reapply that coupon to our basket in this example anyway. So we can see that then we just set an alert just here to say which coupon was best. You're 41 just based in a nicer way. But for this example, that's all they were really need. If this best coupon, coupon name was empty though, that means that we didn't find either occupants are invalid or they didn't make any difference to our basket. So we basically want to say that they already have the best price. So we just return that there and make sure that we applied an empty coupon just here. But that depends on, on what you need for your function. And then all we're doing after that is removing all of these items that we've created from my local storage. So basically just cleans everything up there. So as I mentioned a minute ago, the check coupons start path the function here. So we have two parts of where we check coupons. So just up here where we're running through all of our coupons, we've make a call to get coupon star. And as we mentioned earlier, if we're currently with the page is reloaded and we get to this point. Wanna say check coupon end. So I'll show you what those two parts do next. Okay? So the first part of the check is to apply the coupon into the input field and either press the apply discount button or the add coupon button or press enter onto that input field. So as you can see here, what we're doing is we're setting an item just here to say what coupon we are currently checking specific needs to reload. We grabbed the input field here for r coupon, and then we apply our coupon name into the value there. And then we check to see, is this a button we need to press or do we need to press Enter? If need to press a button, we click the button. If you need to press Enter, we fire off an event that would simulate that enter press. So what we do next is we check if the page need to reload. If it does need to reload, we don't do anything. So we want to leave that to the page to reload and then wait for the time the function runs next to take that on and deal with that then if it doesn't need to reload. So if it's false, we then cooled the check coupon end. And then we have this check up here. This is where as we mentioned at the end, if we've found that our winning coupon, we have this check just here so that we don't run this extra checks or we're doing there is one, I'll just apply it onto our patients here and submit it. So that's that part. So uncheck coupon end. What we're doing here is this is where we wait for the function. So we have that amount of milliseconds that we're going to wait. So we first have a timeout to just wait this amount of time. And then once that timeout has completed, we run this code here. So yes, you can see there's a little bit of stuff here, but this is really simple. So again, we're saying what is the coupon that we are currently checking? So we get all of our updated information. We grab the basket value. So we use our cost field querySelector just here and grab the value of this basket again. So we apply that here. We then take away any prefix, thus what we use just here, so substring and then one in this example or wherever your prefixes. And we then just do a check here. So is this lower than the basket started with? We then need to make another check. Is this lower than the current best deal? Is we have a new best deal and we apply that to our coupon checks objects. We do coupon checks best deal, and then update that basket value. And then be sure here to make sure we set this again to afloat. So it's a number that we can compare with other things. So just serve things consistent. Because you never know if the basket is gonna have a pence or sense part to that as well. So it's best to convert that. And then we just set the coupon name in here. Otherwise your server but console. Okay, just for debugging and check-in to say this is not the best discount. Otherwise, that's all fine. And then we just push this onto the array of are checked coupons so that we make sure that we're not going to check. And these coupons more than once you wanna end dinner ever going loop. And then we just update our coupon checks. So again, we turn it into a adjacent string. We take away our current coupons, we've finished checking that, so we remove that from the local storage. This is just a piece of code does here where you test, where we're mimicking if it was going to send out to the server, so we can ignore that. And then we go on to the next function. So as you can see here, we've wanted to continue. So after every time the page loads, we would have a check there. I'll show you in a moment. And at the end of checking this coupon, we make the same call to run that main function. Again, we don't pass in our selector object because we're continuing, not starting. Thus, almost everything is just one more point I want to show you down here. So as we mentioned, we grab the status from our local storage to see if we're running or not. And then if the status is running, we continue that run check. And if it's not, we just add that event listener, which I think I've mentioned already. Now if you're interested to see how we do this, apply discount. We just have a check coupon deal function over here. And it just says, here's a list of valid coupons, is the value of that input field in that array. If it is, we just have a hard-coded part here that changes the basket value. So it's really simple. But if you're using this having the wild sheet and you don't need that tool. But as I mentioned, all the code for this has been shared with this video. And we'll have any questions on the way as his work and this video or adding a function of your own that can work across multiple page loads for free to leave a comment and I'll be happy to take a look and see if I can help.