develop

Build & Publish a Custom Google Chrome Extension



Sharing buttons:

[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