Build & Publish a Custom Google Chrome Extension

[Music] hey what's going on guys so in this video we're gonna actually create a Chrome extension using just HTML and CSS we're not even gonna have to use any JavaScript here which what we're gonna build is just a launcher I called it the Traverse II launcher you can do this and you can have my links or you can build it for your own site and your own social media links basically what it is I already have it installed as you can see and you can see up here I have my little icon if I click that it's going to open up the launcher which just gives us easy access to my website YouTube channel Twitter Facebook and github okay so if I click it it's just going to take us to each of those links and it's going to open on a new tab so something very very simple but I think it's nice we're gonna style it nice and neat like this use some font awesome icons and of course you know a lot of you may want to do something more in-depth and actually use JavaScript and make something dynamic but I think this is nice for beginners just to see how Chrome extensions are formatted how the manifest file is set up and how to load developer extensions and then to upload it to the to the chrome store is very easy as well you can see I just actually submitted it about 10 minutes ago and it's in progress for publishing it said it'll take about an hour let's see we'll reload this and at the end of the video we'll reload it we'll see if it if it's uploaded but if if it gets accepted which I believe it should then you'll be able to actually download this from the chrome store alright so that's what we'll be doing guys I think it's a pretty interesting project and something that even beginners that are just getting into HTML and CSS and so on can do there's no complicated logic or anything like that alright so let's go ahead and get started hey guys if you've been watching my videos for a while and you really like what I do when I've helped you out a lot consider becoming a patron even for one dollar per month it pushes me to keep bringing you guys the best content I possibly can there's reward tiers for discounts for you to me courses personal support and more so check out the patreon link in the description below for more info alright so we're gonna go ahead and get started with the launcher extension so I'm gonna create a new folder here and I'm gonna call it Travis e dash launcher and like I said you can follow along exactly with me and build this or you can make it your own what I would suggest is building this out first and then recreating it as your own if that's what you want to do alright now in this folder we're gonna need a couple things I want to take care of the icons okay because we're gonna need a couple icons we're gonna need one main icon which is the the actual one that you see in the button the toolbar and that's gonna be 19 pixels by 19 pixels and it should be called icon dot PNG so I'm gonna grab that and bring that in okay right in the root folder here and if we take a look at that I guess I guess we'll just open it with Photoshop alright so you can see it's just my tee logo and if we look at the image size it's 19 by 19 so you can use Photoshop or you can use something else just go ahead and create that the next one we're gonna need is the 128 by 128 pixels icon so you're going to want to create that so I'm just gonna bring that in real quick let me find it okay and what we're gonna do is call it icon underscore 128 dot PNG and we'll go ahead and open that with Photoshop and if we look at the image size it's 128 by 128 okay so those are the two icons for the actual app now I am gonna have my logo inside the actual markup so that's gonna go in my images folder so I'm also gonna create a folder called images okay and you can put these in here if you want but since these are actually part of the the application the extension itself I'm leaving them in the root but I'm gonna paste in my logo here I just called it travesty logo and if we open this one up this one is I think it's one Fiats 150 by 150 so this will actually be displayed in the little drop down from the extension so those are the the icons that you're gonna want okay or the logos so now that we have that done let's go ahead and open this folder up in vs code or whatever text editor or IDE you're using and let's go ahead and create our main manifest file every every Chrome extension needs to have a file called manifest Jason so we're just gonna create that and inside here we're gonna create or just gonna put in our curly braces and we're gonna say manifest underscore version and that's gonna be version two okay at least at this time you might want to check the chrome Doc's if you're watching this a while from when it was published and we're gonna give this app a name and we're gonna call it traversing launcher okay we're gonna give it a description I should be a lowercase D so description I'm just gonna say quick launch traverse it media and let's give it a version number this should be legit Jason so version and gonna give it a version of 1.0.0 it's usually how I like to do my versioning and let's see we're gonna add icons and this is where we want to specify different sized icons this should actually be an object and then we want to say the 128 pixel icon we want to point to that image which will be icon underscore 128 dot PNG okay next we want the browser action okay so browser action and in here we want to put the default icon default underscore icon which is that standard icon dot PNG file okay and then we need to specify the default pop-up so this is going to be the HTML file that we're going to use for the the launcher pop-up where we have all the icons and stuff that's going to be called pop-up dot HTML okay and then we just want one more it's gonna be permissions so for permissions we only want one it's actually an array but we only want one called active tab and that's it that's our manifest file so we can go ahead and save that and in vs code I get this little green line that says it should be an array if you if you're getting that just ignore it it's not actually an error all right so now what we're gonna do is create our HTML file so remember that's called pop-up dot HTML and then we're also gonna create a JavaScript file called pop-up j/s now this particular extension isn't using any JavaScript it's just it's just presentational but this is where you would put your JavaScript if you are adding any ok so let's go into the HTML file and this is where we're gonna do most of our work we're gonna put all of our CSS here as well so let's go ahead and use Emmet and just stick in our head and body tags and for the title I'm just gonna say traversing media or just travesti launcher alright and then I'm going to use open sans for my font so I'm going to go ahead and put a link tag in here and I'm going to link it to http s and we want fonts dot Google api's com slash CSS and then we want to add a parameter so we want our question mark family equals open sans okay and let's just add a type here of text slash CSS and then another thing we're going to want to bring in is font awesome that's what I'm using for icons so I'm gonna go ahead and open up my browser and we're gonna look for the font awesome CDN gonna grab this one here and let's just say we want the link tag so copy that and we're gonna paste that in there alright so now let's move on to the markup so we're gonna go down to the body here and let's create a div with the class of modal - header and in here we're gonna have our logo so we're gonna have h1 with the class of logo and we using Emmet as you can see and here we'll have our image and give that a class of logo - icon and then the source for that is going to be in the images folder and it's going to be that traversée logo just can't spell my own last name traversée - logo dot PNG okay and then let's see we don't need I guess for the alt I'll just say Travis C launcher and then let's go right after it and say Travis C launcher okay and then I'm gonna have the version so I'm gonna put a span tag here with the class of version and inside that I'm just gonna put parentheses in 1.0.0 so that'll be the version next thing we're gonna do is go under the header and we're gonna have a modal content class okay and in here I'm just gonna put a simple paragraph and we're just gonna say easily access Travis E media content alright and then underneath the modal content I'm gonna put a class of modal - icons and in here I'm gonna put a class called Flex container we're gonna use flexbox to align these things and then we're just gonna have some divs with the class of Flex whoops Flex okay and in each one we're gonna have a link and this is gonna go to my website first so I'm going to put an HTTP WWF oversee Mediacom and we're gonna add a target to open up in a separate page so we want target equals underscore blank and inside the a tag is where we're gonna put our icon so it'll be an eye tag with the class of FA and the class of FA - globe that'll give us a little globe icon okay so now what I'll do is just copy the whole Flex div and we're gonna have what I think it's four more okay so the second one is gonna be youtube so font awesome has a YouTube icon so we're gonna change that and then change this to my YouTube URL which will be youtube.com slash traversing media this next one here will be for Twitter okay so we're gonna change that URL to twitter.com slash traversing media all right and then this one here will be Facebook so that'll be facebook.com slash diversity media and then this last one here will be github so that's github.com slash Brad Travis C and you just want to change these icons this should be Facebook and this one should be github okay so that's it for the markup now we can actually see this if we want if we just open this up let's see I'll open it up with live server and vs code but you can just open the HTML file up and it looks like that so doesn't look too great so let's start to add our CSS alright so let's see we're gonna go to our head and let's go ahead and put in some style tags and let's start off we'll start off with the HTML body okay so we're gonna set the font family and we want to set that to open sans so open sans and sans serif okay we're gonna set the font size and we're gonna set that to 14 pixels we're gonna set margin of 0 and we'll set a min height so the min height is gonna be a hundred and 80 pixels and then padding we're gonna zero out and then we're gonna set the width to 384 pixels so that's the HTML body now we want the h1 which wraps the logo so for this I'm going to say font family and we're actually gonna set this to mean low or Menlo and also after that we're gonna say ma no space all right in the font size for that is gonna be 22 pixels we're gonna set the font weight to 400 let's set margin to 0 and let's set the color I'm going to set it to my branding blue color which is to F 5 8 7 6 and that should be it for the h1 alright so for the links let's do a we'll say a link also whoops no space there a link also a visited we're gonna set these to black and let's set the outline to zero and let's set the text decoration we don't want any underlines so we're going to set that to none okay now for the image so the image I'm going to set to a width of 30 pixels and that that'll be the logo image and let's set the I'll start to work on the modal so it's a modal - header well the whole thing's a modal I guess did the modal parts and that's going to have a actually we're gonna align the items of the header to the center and then we're also gonna add a border to the bottom which will be 0.5 pixels solid and it's going to be like a really light gray which is gonna be da da da okay and then let's do the content so say modal - contents and for that we're just gonna add some padding we're gonna say 0 on the top and bottom 20 - on the left and right okay now for the icons so we have modal - icons and for that we're gonna set border top again to 0.5 pixels solid and the da 3 times okay we're also gonna set a height of 50 pixels and a width of 100% alright so we can see what that looks like so far okay so it just looks like that you can see we have the border and stuff now for the logo class actually know what let me snap this over so let's see for the logo class we're just gonna add padding of 16 pixels and let's do the logo icon so the logo icon I want to vertical align to text - bottom and then we're just going to add a margin right of 12 pixels okay that way it's kind of in line with the h1 the version number so that had a class of version that's gonna be color 444 which is kind of a darker gray and then the font size we're gonna set that to 18 pixels okay so that looks good next we're gonna work on this part the Flex the icons so we have flex container okay so obviously we're going to display that to flex and we're gonna justify the content to space between that way all the extra space is kind of put in between we're gonna set padding to 10 on the top and bottom 20 on the left and right okay and then for each flex item we're gonna add opacity opacity one and I just want a little transition when we hover over it so let's say transition [Music] opacity and let's say 0.2 seconds and then we want it to ease in out alright and then we're just gonna set a width of 120 pixels okay and then the Flex hover so for the Flex hover we're just gonna say opacity is gonna be 0.4 so we wanted to just get a little lighter when we hover over it and then the icons you can see how small they are we want those to be bigger so let's say flex and then FA which is the class of the icons we're gonna set the font size to 40 pixels and set the color to my other blue which is the darker blue so that'll be 2 F actually no it's the same below 2f 5 8 7 6 okay so that should be the CSS let's save it and there we go alright so like I said the pop-up j/s is for your JavaScript so what I'm gonna do is even though I'm not using any JavaScript I'm going to link that file just in case I want to add some later so that'll be two pop-up dot J s alright and I think that's it so let's save it and we're ready to add this as an extension so what we need to do now is go to our browser and we're gonna go to more tools and then extensions or you can just type in Chrome colon slash slash extensions and you want to make sure developer mode is checked so that you can upload your own and then we're gonna say load unpacked extension and we're just going to go to the folder that that we just created which is travesty launcher and let's click OK and there we go now if you don't see the icon here you may see a little puzzle icon just exit Chrome and go back in and your logo should show that with the 128 this is that 128 pixel icon and you'll also see up here we have the little icon if I click it there we go there is the HTML that we just created the HTML and CSS and if I click one of these it'll go ahead and open up the link in another tab which is exactly what we want now for the chrome store what you want to do is go to your developer console actually let me just search chrome store upload I forget the exact URL let's see publishing the Chrome Web Store so this is kind of a tutorial on how to publish it let's see so basically you want to zip your application up so you would take this whole folder so everything in it and actually would you yeah you would just grab everything and then add it to a zip file so we'd go like that and then you could actually upload that to the store so if we go back and let's go to the chrome developer dashboard and you could go down and say add new item and this is where you choose the zip file and click upload and then it's going to ask you for a couple images some screenshot images and I think it says it on the documentation page sizes let's see does it say it's right here so you want a 128 by 128 icon and then you want at least 1280 by 800 or a 640 by 400 screenshot so this is what my screenshot looks like I have the 1200 by 800 here and then the 640 by 400 here and this is what I use so that's what will show up all right now if I go back to my or is it developer console which is right here and you can see it now says published if I click on this there it is so it's now added to the store now instead of me having it added through developer tools I'm going to delete it so I'm gonna go to extensions and I'm just gonna trash that and then what I'll do is go back to the chrome store and let's see if it comes up in search there it is I literally just uploaded this less than an hour ago so let's say add to Chrome add traversing launcher add extension there it is so it's as easy as that awesome so if you guys I mean you know obviously if you don't watch my content that much it's not worth it but if you watch my content quite a bit and you want easy access to YouTube and social media my website to see if my udemy courses have been updated go ahead and install this and give it a rating I'd really appreciate that but yeah so that's that's how you can create your own Chrome extension and get it live and up and running so people can actually install it alright guys so thanks for watching please subscribe if you're not subscribed already and you like this type of video and leave it'll excuse me leave me leave it a like and if you could install this if you want that would be great as well give it a rating and thanks for watching

Channel: Traversy Media

Views: 249,509

Keywords: chrome extension, create chroome extension, chrome extension development, build a chrome extension, publish a google chrome extension

Id: wHZCYi1K664

Length: 25min 24sec (1524 seconds)

Published: Tue Jan 23 2018