[Music]
hello everyone welcome back to mr.
random generator before I start this
video I want to thank you all for
joining my channel and especially I
really thank this guy for starting
starting that up anyway in today's video
we will be making a Chrome extension so
I have created a basic extension which
is this you generate random user names
and this is actually inspired by the
previous project in the previous video I
showed you how you can generate a user
names in DINO and basically how you can
deploy it as a package so okay so how do
we do that first things first what you
need to do is actually it's a really
good starting point to go ahead and get
the hell extensions project from the
chrome developers website so in this
website up which I will provide link in
the description you go to the sample
page and in the sample page you just
click on that and it will download the
header extensions so what's in that page
so you actually download the zip file
and when you extract it you get a
project file and in that project file
you'll get an HTML file a PNG and a
manifesto JSON and let's look at them
one by one what HTML file is is that
once you clicked on an extension I would
little window pops up inside that window
what you want to show the user is
basically all go into that HTML file and
after that we just have a PNG file and
in that PNG file is the logo of your
extension and after that we have
manifested JSON in that file you specify
the properties of your extension like
name description and and you can also
insert some behavior into that like
which default pop-up will be used or
which icon should be used so in my case
I created a user dot PNG which is the
dude you can see here with a cog on his
head I know it's silly but it's also
cool so I put that for instance right
there and also change the name right
here and inside our HTML file we
also create a basic layout and as you
can see it is really simple in that case
but there is one important important
thing to mention that here is that you
cannot use inline scripts for
example CD my button is just fit a
simple button and I don't have like on
click behavior implemented in that and
it will not work for security reasons I
guess so what you need to do is let's
say if you want to abuse the inside
insert a script you can do that and you
just insert your script like this and in
your script you just add an event
listener and go on from there and spring
of speaking of script as you can see we
have really basic script writer and I
know it looks disgusting but we'll get
at that in a second
so this script is as I mentioned
previously inspired by the Dino video so
in that video I'll create a distinct
which is a random user name generator
and it's written in a type script so
what I did was I convert everything into
JavaScript which is a really simple test
and then I included my JSON files as an
array again disgusting but it works for
now this is this videos that basically
is a really simple
ministrations so i don't go into the
performance aspects of it anyway what is
done what I did is a year is that I just
created a random integer and in my
function I basically combine nouns and
adjectives according to the random int
that I received and change the element
right there which is again a header
element okay so that's all cool and
stuff like that but how do we actually
test that and well that's a great
question so what you will need to do is
go ahead and open up your extensions
window and to access that you need to do
is again I just in just from and
extensions well I'm using actually opera
and if I type opera here it will work
just fine but you're probably using
Chrome or any other browser and this
command will probably redirect it to the
extension of your preferred browser so
if I did that as you can see we just go
into the extensions so let me just
remove it so once you go into dev what
you want to do is enable the developer
node and after you have enabled the
developer mode you want to load your
extension by clicking the load unpacked
once you did that you what you want to
do is go ahead and locate the your
extension directory so I select that and
hit select folder as you can see you now
it's placed right under the extensions
and it is running right there and you
can test it that way
and that's basically it for the video
hope you liked that one and if that is
the case please make sure to hit the
like button and consider subscribing and
see you next time
thanks