URL Shortener - Chrome Extension

URL Shortener - Chrome Extension

19.Jun.2021

we are going to learn how
to create a chrome extension and also we
will learn
how to publish the extension in the
chrome web store
i have created tiny project that's going
to be very useful so if i click on this
icon
you can see this is our extension which
is going to take any of the url and it's
going to give a short url
for example if you notice in my video
description i have all
this playlist link right so that links
are mostly like
60 to 80 characters so we don't want the
url
to be that big if we wanted to send to
someone
or just using the url we can give so we
can track like how many clicks are
happening on that link
so the idea here is we can sort the url
so i can just copy the url so copy link
address
and go to your extension and paste the
url
and then click on generate short url now
this is going to give us this
short url here right so i can just copy
this and
if you see if i click on that link it's
going to take me to that same page here
right
i mean the corresponding page redirect
page so very simple idea very simple
extension but of course i think it's
going to be very useful
so in this video we are going to learn
about how to create this kind of
extension using some of the api calls
some of the
javascript and some of the css of course
and then also today we'll see like how
we can
make our extension for both positive as
well as negative scenarios
for example if user doesn't give any of
the uh url and try to click on this
generate chart url that should give us
like
a warning message kind of and
we also give an api so how to interact
with api using the chrome extension so
if i go to this option page
here we can see that we have this option
page basically you can
enter your own api based on that api you
can track like how many clicks are
happening on that link and each and
everything
so let's get started now so i'm just
going to create a new folder here let's
name this as likely
hyphen short url
and of course you will open the folder
in vs code so right click and click on
this open with code
so very basic stuff already we have
discussed about how chrome extensions
works and what are the mandatory so of
course we are going to get a
manifest failure so manifest dot json
file
and within the json file we have to
specify like name portion
description and the manifest version so
i'm just going to copy the code from
this
developer.chrome developer.chrome.com
dot com slash extensions last overview
just copy this boilerplate code here and
paste over here
and of course we don't want this guy so
let us remove this
we don't need any background we need
this permissions not now
and also we need a browser actions that
is going to be our pop-up page
and icon is not needed here let's create
a file with this name so popup.js i mean
popup.html so popup
and apart from this also we need a js
file to handle all the javascript stuff
so popup dot js and also we need a
setting page that's going to be
your option page
and then it's going to be your option.js
page
so so far we have created this manifest
file and i'm
just going to increase the font here
okay so so far we have created a
manifest file and i'm just going to
remove this metadata and
and of course we want icon so i'm just
going to copy my icon
so here i have the cycle called logo.png
so let's add
this so here i'm going to specify within
of course 128 size
and that's going to be our logo.png
that's it so basic stuff done
now also we have to specify that we are
interested to create a
option space so we have to specify here
as well so if i go back to this
developer guide so here we have this
options page
and let's copy this so here we have
something like options.option.html so
i'm just going to
bring it up here and let's change the
file name to option
so we are pretty much done with the
basic stuff let's copy this folder path
and go to your pro browser and make sure
you have enabled this developer mode and
then click on this load unpack
and paste the path and select the folder
now that should give you some mirror
like this okay
so let's go back to this
and here of course we have to specify
what is the manifest version so that is
uh mandatory so i'm just going to copy
this and here we'll specify like
manifest version is going to be two
should be within double quotes
let's go and retry and uh okay so cannot
load option
dot page so what is the file name here
we have options.html and here also i
have to specify the same name so that is
the area
let's retry and of course it's going to
work so this is my
name and this is my description this is
my version and this is the unique id
that is generated by this
browser or the chrome extension
okay so if i click on this probably you
have to pin this and if i click on this
suppose it's going to open in this
blank html page and if i do right click
and if i click on this options
it is going to bring up the options.html
here you can see but i don't want this
to be in the
new tab rather i just wanted this to
embed in the
settings tab or maybe within this page
itself so for that we have another
option so i'm just going to
copy this one so options ui and within
that we have to specify
so let's go back and replace this guy
here
that's it so here we have this option
underscore ui
where we are specifying this page this
is option.html and this open tab equal
to false
right now let's go back and
refresh this icon let me right click and
click on this option and here you can
see that we are able to get this right
so basically the logo and the title and
then followed by
this area is basically our uh option
space that html page
in my previous video i have used this
bulma css
today for this project i'm going to use
a lightweight css that is known as
spectre
now let's go back to this docks and it's
actually lightweight so it's around 10
kb
so that's the reason we are using this
now let's go to the docks and we'll see
the installation
we can do it in two ways we can either
download the entire source code and we
can have it locally
or else we can use the cdn link so for
this
demo i'm just going to use local file so
let's go and download this
download the source code and that's
going to be your zip file so let me save
in my
desktop
and let's go to the desktop and we are
going to extract this guy here
okay so here is the folder and within
this folder you can see we have like
uh so many things just go to the disk
folder and within the disk folder we
have two options one is the spectre css
and
another one is the minimum version so we
are good with the minimum so i'm just
going to copy this guy
and let's go back to our project so just
drag and drop or copy paste whatever you
feel
that's it so let's close this and we are
done now let's go back to our popup.html
and here
just give exclamatory and enter that
should uh give you this boilerplate code
here
now with this i will first include our
javascript file so script
src and he will specify this popup.js
and after that of course we have to add
this link here so
link and css and that's going to be our
spectre.min.css right
now document title uh we'll just name
this as lit code
and within this what we have to we are
going to do is basically we are going to
create a card first here so let's go
back to the documentation
and if you go to this element not
element so within the layout
not layout within the component uh we
can go with this card
basically it's a card with the shadow in
the background so that looks really good
for the extensions at least
so that's the reason i'm going to use
this so i'm just going to copy this
center core here
and we'll paste it here
and we don't want this one card image so
we can remove this block
and then we'll have a header so it is
going to be
a url shorter or shortener ur whatever
you like to call it and then
we can say like enter url
okay and within the body we are just
going to have a
input field so if i go back to this and
if i go to this element and within the
forms i can find a input
field so i'm just going to copy this guy
and paste over here and of course we
don't need any label here so i'm just
going to remove this
and i know need placeholder as well so
and this can remove this and uh
id will change this so here it will say
like my url
and that's it so let's go back and open
it here
in this browser so if i open this now
here you can see that we are getting
this
a title and a some short description and
a
text box and also a button right so
let's give some
text to the button so here you say like
generate euros okay that's good let's go
back
and open this up again so generate short
url and we are able to see this one
but the problem is this guy looking very
small so we want it to be little big so
in the
body tag we can add like width so the
width is going to be like
maybe max content that should work or
else we can give some explicit
width like maybe 320 pixels something
like that
yeah that should work so we are going to
give this 320 pixel so i'm just going to
copy this and let's go back to our html
page
and within this i can create a style
here so within the
head we'll get a style
we'll target the body and here we'll say
like well
it's going to be 320 pixels right that's
it so let's close it up and open
and okay so we are done with the ui but
of course we wanted to give like
positive as well as negative scenario so
we if i don't enter any value
and if i click on this button it should
give me like
uh please enter a valid url right so we
want something like notifications or
maybe the toast message so if i go back
to the document and if i go back to this
components here we have a section called
toast
and toast is different so one is success
warning and error so we are interested
on the success
and as and as well as this error guy
right so i'm just going to copy this one
from here copy this and go back to your
html page and we can set it
anywhere so i'm just going to set it uh
maybe before this so within the card
header i can have it like this that's it
and here we'll say like um play center
valuer
okay and we don't want this close button
so we'll just remove this guy here
so that close button is basically this
close icon right so we don't want that
so it's like going to
appear and after a few seconds it's
going to disappear now let's go back to
our ui and check
okay so we are able to get it but of
course the color is wrong here so we
have to give the warning color
so or maybe this error color here right
so we can copy this so
toast hyphen error is the class name for
that
let's go back and instead of primary
we'll set it this set this as does type
in error
now let's go back and try to open this
okay so we got this so but of course we
don't want this to be shown
each and every time right if the user is
going to click and if the data is not
there then only i have to show
so basically what we have to do is
basically we have to first hide it right
so i'm just going to bring this side by
side
okay so first of course we wanted to
hide this guy so let's
bring this
so once we click on this of course we
don't want to show it we wanted to hide
it first
then we will show it once the user
clicks on this data
i mean this button if there is no data
available right
so by default we can hide it so for that
we have a class here so if i go back to
this utilities
within the utilities if you go to this
display you can see that we have options
called d block the inline d
block and so on things we are interested
on this height part so i'm just going to
copy this class
and by default this toast is going to be
in the height state
so different height now if i try to open
this page here you can see that we are
i mean yeah so this one you can see that
we are not able to get this one
right but if i remove this and
then if i open this of course we can see
that so basically we are going to toggle
this
height and based on the input from the
user
okay so let's i have a positive block as
well so
within this button right so within the
cart footer we have this button so below
the button we wanted to give a
toast message that's going to bring like
if
the short url basically right so i'm
just going to copy this
and paste it here and here it should be
like toast hyphen success
and it's also going to be hide by
default
once the url is going to be there short
url is going to be there we will just
change the value we will see that in the
coding part now here we can say like
nothing so we don't want it to say
anything here so it's going to be the
purely the
short url right okay so as of now we are
done with our
pop-up page html and the designing part
as well
now let's quickly design the options
page as well
so if i go to this option.html and
of course we need a boilerplate code
here and then
we'll add our respect to css so link css
and here is going to be spectre.min.css
and also we want the script of um
option switch so options.js and title is
going to be
inlet code that's it
now within this body it's very very
simple we just want only
a text and a
text box basically right so we can
borrow the code from popup.html so i can
just copy this guy here
or maybe we'll copy the entire thing so
we'll copy this card here
and let's go back to this option.html
and we'll paste it here first
and then we will remove what are the
things we don't want so of course we
want this button so let's say like
save and okay we want the success
message as well so as soon as the user
clicks on that
of course we have to say like data
stored or something like that
and we don't need this header as of now
so let's
remove this and here you will say like
enter
api so this is going to be our api key
here so enter the api key
and please center valley api
okay i hope you are able to understand
like what i'm trying to do here
basically we are trying to create an
options page where user is going to
enter
their api key and based on the key we
are going to generate some of the
url now we'll just change this id as
well so here i will select my api
and that's it so we'll give you id to
this button as well so id
and we'll say like save and let's go
back to our popup.html and here also we
can specify
some of the id for this button so id
equal to
short underscore we'll just name this as
short even okay
that's fine okay so as of now
we are pop-up and this option page is
ready so let's go back to this and click
on this options
and here you can see that we enter api
key and here we have a text box and here
we have this save
now what are the api we are going to
enter we don't want it to show in the
text box so i'm just going to make this
guy as a
um the type as a text that means if i
click on this option and if i type
something of course it's visible now
right
but api keys are like case sensitive so
we can just change the type to password
and that's going to hide this uh text
whatever we are going to enter
so here i can say like type equal to
password
that's it now let's go back and click on
this options
now if i type something of course it's
going to hide that's it very simple
right
okay so as soon as i click on this save
button of course it should take the
value
and it should store somewhere right to
do all the storing whatever the data
we have to store you know in the chrome
browser we have something called chrome
storage api
so basically we have to we are going to
explore the storage api now
before that we will finish this pop-up
positive as well as negative flow
for example if i click this now of
course it's not going to happen anything
right
so let's go back to our popup.html and
here we have this id
that's going to give the what are the
text we are going to enter that's going
to capture by this id
and whenever we are going to do the
click action here that is going to be
captured by this
id here so if i go back to my popup dot
js
let me close all other files okay so
first we'll just query so let
um save button this is going to be
generate button actually
so generate dtn equal to document
on this one so document dot query
selector
and here of course we have to pass the
id and the id is actually let's
let's inspect this and start url so i'm
just going to copy paste here so id in
the sense of course we have to this hash
symbol
and then followed by the id value and
then of course we want the
text as well right so uh url equal to
document dot quiz selector
and within this we can pass this guy so
basically right click and inspect
and here you have the id called my url
and of course the hashing right so we
have found this one
button begin that button element as well
as the url element
now based on this we can write a event
listener so whenever the button is going
to be click
so generate button dot add event
listener and
we are interested on the click keys even
here and once the click is going to
happen we are going to do something here
right so first
we will check if the text has a proper
text
that is very simple thing i'm just going
to get the text and i'll check if there
is any
um text length or else it's going to be
like you're undefined if there is no
text
so we can simply check right for example
i can say like
if you are so i assume that if there is
an
url i'm going to do something if there
is no url
and then probably i can say like error
message right
so basically we have to target the
if i go to this popup.html you can see
that we have this toast message right so
we are going to
target this guy here so toast error so i
can copy this class
and here i can say like let
toast
so if there is a valid url we are going
to generate if there is no valid url we
have to
trigger this um class right so it's
going to be very easy we can say like
toast error dot class list
and we are going to remove the class
list of this error first so
um classic dot remove and here we have
this
d hyphen hydride so we are going to copy
this and here we will paste it
so that means if the class is going to
be removed from there of course it it's
going to be visible here
right so let's try to do that so i'm
just going to close it up and open again
so if i try to click on this button now
of course we are not going to any
get anything the reason is it's going to
give us null error
so if i go back and inspect this page
and if i go to the console you can see
that
it says that cannot read property at the
event listener often
and it's coming in the line number six
so in the line number six we have this
generate button
so what is happening here is basically
if i go back to my popup.html
we are trying to load this um
popup.json so it's going to load even
before this
page is going to get ready and this
elements are going to get ready
so of course we have to say like once
the body the entire page
or the entire html is loaded after that
we want to trigger our javascript file
so for that we can use this keyword
called default
now let's go back to this popup.js and
we don't need to change anything here so
we can simply close it and
open and click on this generate short
url and and still if i click on this
because it's not going to work the
reason here is we have this
we have taken this url right so that is
the element of course the element is
present
but we have to check if the element has
value or not
before that let me show you the inspect
i'm in the console and here you can see
that we do not have any error
so we fix the problem using the default
keyword but here the problem is
because of that value so here i can say
like url dot value so if i have a value
then it's okay or else it's going to
trigger this height i mean trigger this
text message right
so let me try to click on this button
again and here you can see that please
enter valid
url so of course we are able to uh cover
up the
negative flow right so if there's any
data
we just wanted to print that data to our
success message right
so here i can say like and
let's assume that user is going to enter
something and he's going to click on
this generate short url
but this error message is going to be
always there right but we don't want it
to do like that
so if there is any error message we will
trigger this so we will remove the class
for the hyphen height that means it's
going to
show this one but after a time so i'm
just going to use the set timeout
i also wanted to hide this one basically
right
so within the set timeout function i can
hide this value again so here you will
say like
toast i can just copy this line and
paste over here
and then instead of remove i can give
this as add
and of course within the same timeout we
have to specify
the time so i'm just going to make like
1 5 0 that is
um 1.5 seconds basically right so if i
go back
and without entering any value if i try
to click on this and
generate url after 1.5 seconds it's
going to disappear right
if you wanted to show the message for a
long time of course you can increase
that time here
very simple now similarly if i
give values and then if i click on this
generate short url i wanted to show that
in the ui
in the success stores message right
so here same concept so i'm just going
to
query this guy again i mean i'm going to
write a script here so toast success
dot class list dot add and here we'll
say like
uh not at this time of course we have to
remove this so we'll just
uh remove this guy and this one
basically right so d hyphen height
and we no need to give time out here
because as soon as the user is generate
and
he have to click manually to copy the
url
and then he is going to close the
extension probably so we don't want it
to
do the set timeout and make it disable
again
right okay cool now let's go back and
first we'll test the negative so
without entering anything i can click on
this and that's going to give us this
test message and if i enter something
and if i click on this
of course it's going to give us this
text message but of course we didn't
append any of the value so that's the
reason it's giving us like the small
guy so we can write something there so
whatever the value we are going to enter
so we'll say like uh toast success
dot text content and what are the value
we are going to get that is url dot
value
that's it so let's go back and enter
something and click on this
of course you can see that we are able
to get it whatever we have typed
but of course we are not going to type
the value whatever we are going to type
i mean
i am not going to show the value
whatever we are going to type rather it
is going to be dynamic
it is going to be the from the api okay
we'll see that in a moment
now same thing we are going to perform
for the option page as well so if i go
back to the option page
and we are going to write some of the
javascript code here
so let me copy this guys again so
so let me just tell you again so this is
my save button id and this is my
this text box and this is the error
message
and this is my success message so same
thing whatever we have done here so same
concept so i'm just going to copy this
guy and paste
over here let's check quickly so
of course uh generate button so that is
this save button so we will rename this
just for our understanding we can say
like save
median and this is going to be our api
so f2 and just type and enter that's it
and here we are not getting anything
because we have to change this from api
okay okay so when we click on this
generate button so that should be
actually save button so
why it's not saving everywhere i'm not
sure but we can
use the f2 to rename each and everything
but okay now okay so same button add
even presenter we are looking for the
click event
when when there is a click event it is
going to take the value from this
particular
text box that is my api and if there is
a value it is going to hide the
success message basically i mean that's
going to show the success message
by removing the the hyphen height class
name
and what are the value we are going to
get we are going to append that we don't
want to happen here so we don't
uh will not show them so basically just
the
value right and then if there's nothing
so it is going to give us this error
message and it will
remove right so let's do the testing
here so right click and click on this
options
and click on this save okay we are not
getting anything because the same
problem
in the pub in the option.html also we
didn't use the default keyboard so i'm
just going to use the default here
and now let's go back to our extension
let's close it right click and click on
this option
and click on enter so here you can see
please center valid apk
now now let's assume that this is my
going to be my apex some text and if i
save it
and here you can see that we are able to
um
this make visible of this success close
to success
but we'll say something here so i can
just target that or else i can embed
that in my
uh code here itself right so here i can
say like saved successfully something
like that
any positive message that's it
that's fine i think okay let's quickly
test this again
so a negative flow without entering any
value of course that
text message with red color or orange
color and we'll enter something and
we'll save and here we can select save
that's
pretty good right that's it we are done
with the ui part so we have created our
popup.html and also we have created our
option.html
now the remaining part is of course the
important part how we are going to get
the api
and how we are going to use the chrome
storage
uh api now so so far whatever we have
learned is purely the css
and the html site now we are going to
make use of the chrome extension
apis so before that we will understand
this api so t dot
ly slash rom if you go to this of course
you have to click on the sign up
and you just give your name email
password and uh
create a register you will get a email
just confirm
and after that you can do the login so
enter your
email and password and click on this
login once we logged in we have to click
on this generate api token
and it is going to ask you a token name
so i'm going to say like
let code extension something like that
just give any name
and click on this create now you have to
copy this api so just
copy to clipboard or something and close
it
then go back to our chrome extension and
let's go back
to our
let me store this somewhere so i'm just
going to store this in this option.jss
as of now so we want to pass
this in our options.html
and whatever the value we are going to
give in our option.html of course that
should be stored somewhere right so for
that i'm going to use the chrome storage
api so if i go back to this chrome
storage
i mean chrome extension document and if
you go to this developer guide
here we can navigate to the storage
and first of all we have to get the
permissions and that's going to be
storage
right so let's copy this guy from here
and go back to your manifest.json ctrl p
and then you can type manifest.json and
here comma
and at the last you can specify so we
are
going to use only the storage api
nothing else other than that
now we to store a value we have to use
this and to retrieve a value we have to
use this so i'm just going to copy
and then i will explain you so let's go
back to this option.js
what are the value we are going to get
if there is any value
we uh we wanted to store that right so
here i can say like after
this line maybe so i'll just add a
comment like
storing the data and we can paste this
thing so what is happening over here is
we are calling this chrome dot storage
dot
sync so sync is basically it is going to
sync up with your email so if you
logged in in your browser like this what
if you
if you are going to switch to another
browser with the same email id the
enter whatever data we have stored in
our extension that will be
reflected over there as well but i think
for this simple example we can go with
the local
so local means it's like your local
storage it won't
go out of your browser okay even if you
restart your browser or
if you restart your window any of your
machine
that's storage is going to be in your
local store the browser memory
not in your uh cloud or something like
that okay within this we don't need this
console.log maybe we can have it we will
remove this later on and we will just
change this now to ap so this is like
your key and this is like your value
so this value is actually going to be
this value so i'm just going to copy
this and
paste over here so
it's paste and paste right so what are
the value we are going to get we are
going to store that using this
chrome.storage.local
and we are going to give a name to it as
a
api so we are done with the uh
option.js so options is over this part
is over
now what are the value we have set we
have to use this in our popup.html we
will see that in a moment
so before that let me close all this
file and let me open this
popup.js so let us understand how this
is going to work so here
if you go to this particular url you can
just go to your api docs
and here you can see that we have those
api right basically this guy so this is
the actual thing that we are going to
make use of it so i'm just going to copy
this
and let's go back to our code and if
there is any success we are going to
perform this task
so i'm just going to paste after this
line
okay now let me explain what we are
trying to do is so here
we have this url so this is the api url
endpoint
so let's move this outside
and after that we want the header so
here is basically
uh what is the content type and what
what it's going to accept so basically
application application slash json it
can be different based on the api in
this api we have this json so
we are good with this header so i can
remove this guy
or yeah we can remove this outside as
well so let me remove this here
and this body um okay let it be here as
of now
and this is the actual task so here we
are passing this page
which we are passing this your url is
nothing but this guy right the end point
and within this we have to pass the
arguments like method so method of
course we are doing the post action so
if you are familiar with postman
uh this is going to be exactly same
right so in the postman we have to say
like what is the call we are going to
make like
get post put patch or something like
that and of course we have to pass the
header and then followed by the body
so in the body i'm just going to write
here itself
so let's copy this guy and here we have
to pass this within the json
but that is somehow not mentioned in the
document and i figure it out that
uh within the body we have to use the
json.stringify and then we have to pass
this value
okay so please remember that now here
you can see that this is our api token
so api token of course a second onto the
hard
code i have to get the ebay token from
the user
and then i have to pass it here right so
we'll do that let me get this we don't
want this guy to be here
okay now here we have this long url and
that's going to be
uh the url that user is going to give so
of course i cannot use this so let me do
this guy
here and domain is basically this one t
dot ly so that is the domain we are
using t dot like so of course that can
be
here so i'm just going to remove this
slashes here
okay and come on and here also comma and
here we are going to pass the value
so how we are going to pass the value is
basically
uh this value right so you paid out
value so you can copy this guy
and paste over here so longer so value
this is basically your along your
uh whatever the url that means uh let me
go back
so here whatever we are going to type
that is going to be take
as long you are here so here we are
going to give this value
then domain is needed so we'll just
leave as it is
and after that we want this api token so
here comes the main picture how we are
going to retrieve the apex token from
the
uh background page i mean the options
page right
so if you remember if i go back to this
let me show you that so options.
here we have stored the set using the
local storage of this keyword
i mean this key called ap right so using
this key i can read it
there as well so if i go back to the
chrome extension document
and here you can see that to read this
we have to use this guide right so let
me copy paste
and we'll paste it here first so it's
like
your callback so once we get the key
after that we are going to perform this
guide right
so here i can say like uh not this one
so we'll just remove this
so what are the key so key is basically
the api
whatever the value we have set it's very
simple api so chrome dot storage dot
sync not sync we are using the local
here dot get and here we have to pass
the value now it's you can see that it
is actually within the array that means
we can retrieve multiple
keys at the same time now whatever this
guy is going to get
it will be stored in this particular
result object now
we can say like um before that let me
just move this dice
within this bracket okay very cool
and here we are going to send the this
key right so here i can say like user
dot api api is my actual key right
that's it so what are the value we are
going to get we are going to pass it
here as well right
that's it very fine now if there is
a uh response so when we call this this
fetch options it is going to give us
the call back not the callback it is
going to resolve the promises so we are
using this then
and it is going to give us response so
whatever the response we are going to
get we are going to transfer that
in the format of json now this arrow
syntax means uh we now need to write
written keyword uh if there is a single
line only one line
and we can use this fat arrow just to
return the data
whatever the data is going to return in
the format of json from there
we are getting this json object and i
mean we are storing
that we are storing the json in that
json object and from there we are trying
to do the
but of course we don't want to log as of
now so what we can do is we can just
uh print the data right so here we can
say like
uh this thing so i'm just going to cut
it here and i'm going to paste it in
this
okay so here we are using this curly
braces because of course we have more
than
one leg and of course we are not going
to return anything if you are going to
return something
within the same line you can just use
this arrow without any curly braces
right
okay fine so we are almost done now
now of course we don't want this api
value to be shown rather than
whatever the value we are going to get
from this json we have to show it right
so if i go back to the documentation
from the
d dot ly and here you can see that the
response is going to be 200
and this is the variable i mean the
value in which the short url is going to
appear right so i'm just going to copy
this guy
and paste over here
and of course using this object so json.
okay so that's it we are pretty much
done i think but let's
uh try to test it out
so let's copy this um this api key
whatever we have generated so let's copy
this guy or i'm
just going to cut it from here and let's
go back to our extension
and go to our option dot page before
that we'll just uh
update this again so let's go back and
refresh
and let's do the right click and click
on this option
and we have to enter the url i mean the
api and click on the save
of course it's going to save right so
the api is saved now
now let's go back to this option and
here we have to specify any of the url
so let's copy this
url here maybe uh not this one so we can
copy this here
maybe let's copy this and go back to our
extension
and paste it and click on this gender
shut your right and of course you can
see that it is going to give us this
output that is the short url right so i
can copy this and let's go back to our
incognito mode
and paste the url and hit enter that
should
now bring the uh page that we
copied right so here you can see that
spectre docs and this loading url
basically
so that is what we have here as well
right that's it very cool
so we are able to do now just in case if
you have doubt we can go to our api
so and let's go back to this home page
and here you can see that this is the
this is the actual data we got right so
here uh so what is that copied paste
let me just paste here yeah so said dr
that is what we copied it's i pasted it
from my clipboard and here you can see
that the same link
now if i try to open this maybe it will
also give you like how many visits are
there and everything
right so i can just copy let me try to
open this here
and it's opening the page if i go back
and if i refresh
okay so here you can see that it is
giving us one visit right
so we can do that we can check like how
many visits are there everything within
our
extension itself so we have this api so
if you go back to this
uh links and here we have the stats
right so you can get like how many
visits are there and how many clicks are
what are the browser name
and based on that you can get all the uh
datas right so i'm not going to do that
maybe we'll do that in
later on later on videos but i think
it's very easy i have
teach you how to read the documentation
and each and everything so i think you
can do
of your own right so let's go back
and check our extension once again so
um okay so if i open this this is our
extension we can enter any of the url
and you can click on the generate
short url but when i do the uh
generate when i click on this gender it
is not actually showing like what is
happening we wanted to give like some
loader is loading and once the url is
generated we want to disable the
loader icon so for that of course we are
going to use the css called
loading i mean the same specter css we
have a class called
loading right so i'm just going to copy
this and let's go back to our
popup dot html so popup.html
and we can enter uh we can have that
maybe
up before this side so here we are going
to save this let me go back and open
this guy again
so here we can see that we are able to
get this uh loading symbol
i wanted this to be between this guy so
we can just move it around
anyways it's coming here because that
guy is basically hidden i think
or else we can just make it above okay
so let's go
and open and here you can see that we
are able to get this loaded
but i don't want it to show the loader
each and every time once the
button is going to be clicked we want to
show the loader and once the url is
generated we want to hide this loader
so let's go back and see same trick so
we are just going to add a
class quality hyphen height
and we'll query this so let's copy this
let's go back to our popup.js
and first we'll copy it so let loader
and then if there is a value first
we'll just uh show this right so here i
can say like loader.classlist.remove
and here i'm going to remove the hyphen
height
right so we are going to remove that
class now if there is any success
so within this guy right so if there is
any success we can just add the class
again so i'm just going to copy paste
and instead of remove i'm going to make
this as add that's it very pretty neat
and clean
and of course if there's any error let's
assume that
this is not working maybe because of
connectivity issues or maybe because we
are not able to connect to the end point
something like that
of course we have to solve that so for
that i can just use this
dot catch here and
we'll just edit we just log it maybe uh
we can
again show like uh we can have this
toast error and we can
append the text but as of now i'm just
going to alert so
that's pretty much good i think so
whatever we are going to get we are just
going to alert that
right that's it we are pretty much done
with our extension
so let's try this once one last time so
i'm just going to copy
maybe this github url so i'm going to
copy this and let's go back to our
browser
and click on those and click on this i
mean give the data and click on this
general short url
so it's loader is coming once the data
is done the loader also disappears right
so i can just copy this guy
and i can open this here and if i open
this
link you can see that we are able to get
the github link now if i go back
and check in my uh this guy so
t dot alloy and here you can see that we
have two visit
i mean two visit for the previous one
and one visit for the this one right
that's it we are pretty much done with
the extensions i think this is
a really quick tiny project of course
and but it's going to be helpful you in
any way i believe if so do let me know
in the comments
so now what we have to do is basically
we have to
uh pack the extension and we have to
upload the upload date into the chrome
store
right so it's going to be very easy so
i'm just going to open my chrome dev
tools i mean chrome developers console
first
and go to this first link and from here
you can see that we have something
called
settings and from there you can go to
your developer dashboard so if your
first time you have to do the
registration
and you have to pay around five dollars
that is
approximately 350 to 400 inr you have to
do that if you don't pay you cannot
publish any of the
extension in the chrome store it is free
for microsoft edge
firefox and opera but chrome you have to
pay and here you can see that i already
have this guy called latex part now we
are going to publish
a new extension okay so let's go back to
this source code and
we will just open this neary willing
explorer
and select everything and
[Music]
just zip it so you can you have to zip
this for entire folder
make sure you are going to pass error
free code or else your
extension will be rejected in the first
time okay
now let's go back uh to this one so new
item
and you can just drag it drag the zip
file
the size is very less i think less than
20 kb so that should work fine okay
now here we have to give some
a description so basically we will just
i will just add some
random text maybe i will correct it
later on so this is just for
uh tutorial i'm of course i'm not going
to give this
any extension to anyone maybe i'll just
leave as it is okay
okay and what is that category it's
going to be like i don't know what is
the category so we'll just
make it as productivity maybe and
language
of course english okay so we have three
english
i will go the first one and here we have
to pass this storage icon and
i mean stoker icon that's going to 128
128
okay so we have the logo and the
screenshot so let's go back
and here i'm going to upload that so
let's go to the desktop
and this folder is this extension logo
and
this is the logo just for demo purpose i
have created it can be
far better but if you get the idea
that's pretty much good i think okay
so that's it so
yes we are done now let's go back and we
have any official url of course we can
give our if you have
any official url you can specify or else
you can just leave it as
none and home page we don't want support
url uh no needed
analytics if you if you are interested
to check how many installations are
happening per day or something like that
you can use the google analytic
analytics
uh we don't want so let's go back and
let's save
as draft and then go to privacy
and uh so here we are using this like uh
single purpose what we are going to
do is basically create it and url that's
it so that's the single purpose of this
url so created and you are
that's it now we are using the storage
permissions in our
manufacture so whatever the manifest we
are going to use we have to specify like
why we are using this so
uh are you using any remote code of
course we are not using so no and here
uh permissions you don't want to select
the distance
so we are using the storage permissions
and why we are using basically to
store uh data that's it nothing much
here
than that and that's it let's click the
save draft
and go to the price and this
distribution so let's save it again
and go to this price and distribution
and it should be public
all the region of course we wanted in
all the region let's save this draft
and then we have to submit but we are
not able to submit because
we might missing something let's go back
to this package okay we have this one
uh store listing and is there anything
i'm missing
maybe i am seeing something and
okay let's click on this way i can
publish because the detailed
description is too short or missing
minimum 25 character
that's nice so let's add some data i
don't know what to add so let's add like
i created any url okay that's fine i
think so let's
save this draft and uh
okay so we got the submit for review so
just click on this guys and it will say
like
it will say like um some review process
has to be performed okay we'll just
submit for review and it should be
immediate i think
and they are saying 30 days but it don't
take that much time
maybe for this extension it will take
around two to three hours
and uh after that it's going to publish
i believe so let's go back to this
dashboard
and so
here you can see that let's your
shortener is pending review now
so once this is going to be published
you will see something like this
published like that okay so we'll just
see there
we'll just wait so until i read the
video if i got this like
uh uploaded successful or something like
that probably i'll just
show you or else i will leave a link in
the description you can check it out and
you can use the extension if you want or
else it for your learning of course
data source code will be in the
description you can grab it
from my github repository so that's it
from my side i hope you have enjoyed the
video i think it's pretty long
as or i have made any of the chrome
extension tutorial but
you will get like end to end scenario
how to play the extension and
how to upload a code to the web store
the same process is applicable for
microsoft
chrome image browser and opera and
firefox
the api is very same for all the
browsers except the
firefox firefox is also very same but we
have to do some
little modifications maybe we will talk
about that in later on videos
so that's it for my site thanks for
watching see in the next one very soon
it really takes time to do the edit and
make videos so
if you like to support the channel
kindly do the subscribe and hit the bell
notification so that whenever i upload a
video you will get it
and also please share it with your
friends colleagues so whoever you think
they have to watch it okay so that's it
thanks again thanks for

We are social