Hi everyone! In this video we are going to see how
to automate Chrome extension I'm going
to do that using selenium and as well as
Protractor. so let's see how to do that
using selenium I am going to automate
this Chrome extension which is Google
dictionary by Google that's an awkward
name but that's okay we are going to
automate this thing right so I am going
to add to Chrome and it'll ask the
permission it says that it can't read
and change all your data that's okay and
then it will say like it has been added
okay the usage of this extension is you
can click here and here you can search
for anything so let's find the meaning
of define itself so define and here I'm
going to click on the define now this is
going to give us some result based on
some google dictionary okay now we can
change this to Hindi as well so if I go
to this option page here I can change
the language to Hindi and once I click
on this then if I go and search for
define again so define and if I click on
define again so now we are getting the
meaning in Hindi right so this is what
the scenario to do so we are going to
automate this now let us understand the
basic concept of extensions first so
here if I go to this chrome colon slash
slash extensions here we have so many
extensions so I am using so many
extension here and here we have this
extension part and if you go down here
you can see that Chrome apps right so
these are apps okay and these are
extension now the major difference we
will see in our Chrome extension
development series as of now to automate
understand that there are majorly two
types one is extension type and another
one is Apps type so in extension we have
to understand few keywords as well so
let me go to some blank page maybe letcode.in
okay so once I click on this we are
getting some HTML page right this HTML
page is coming from this extension now
this is known as pop-up page technically
in terms of extension development and
once I do the right click and if I click
on options this is known as options page
okay now if you see here here we are
getting this ID right so this URL is
saying that option dot HTML most of the
time this is how they have specified but
in your case it might be differs
based on the developers but mostly
like either pop-up page or the
options page so we have to load this
extension in our browser first right
because if I give this URL directly I
will not get anything because obviously
when we launched our Chrome browser
using automation or using selenium it is
not going to add any extension by
default right so we have to add the
extension so for that what we can do is
we can go to this windows R and app data
and within the app data we have to
navigate to local then go to Google so
Google and then go to Chrome and within
user data here you will find a folder
called extension but I am using two
three profiles I'm going to go inside
the default and here I can see for
extension now these are the extension I
have in my browser and this 25 which is
today date right so this is the chrome ext..
I mean Google dictionary I think okay so
we are going to use this so here I can
see background not this one I think let
me open this option dot page yeah so we
are going to use this one right so we
have to load this within our script so
how do you do that okay so Chrome
extension are this files are actually
converted into a zip code file which is
actually not a Zip it is known as CRX
file okay so we are going to do that
now so what's the pop up page let's find
that so maybe browser action!  yeah so here
instead of proper place they have named
it as browser action right
okay that's fine we will anyway take
this so here I am going to copy the
entire file path and here within my
Chrome extension so chrome colon slash
slash extensions Here I am going to pack
the extension now by default you might
not see this option you have to toggle
this okay so turn on on developer mode
and then click on pack extension and
here you have to specify your for file
path basically the path we copied right
and then this is option so leave
as it is and here you can pack extension
now this will say that it has been
created within the same folder so if I
go back to that folder so here I can
find a CRX file basically so if I go
back and here yes so we are getting this
CRX file right so let me copy this and
if I go to my VSCode here I can paste
that so it will be very easy to access
sometimes when you try to load from this
C:// folder you might get permission
denied error so just copy the CRX file
and paste in your working directory now
within this I am going to create a main
method and here I am going to call my
chrome driver so chrome driver driver
equal to basic stuff right now here I am
going to say driver.get() here
we will load that URL but before that
let us try to add the extension to our
browser right so here I am going to use
the chrome options
so here we have a method called add
extension right so we are going to use
this so add extension is asking for file
path right so if I mouse over on this
you can see that it's needs a file right
so here we are going to get the file so
new file and import it from Java dot IO
and here we have to specify the file
path which is four point one point five
let's rename this as app so it would be
easier to access so here I am going to
say app dot CRX so by default it is
going to take from our project folder
right that's fine now we have to pass
this option to our chromedriver
constructor now let's try to launch this
maybe we will see that the extension has
loaded successfully or not so I'm going
to run this and this is going to bring
my browser and yes we got it right so
here you can see this google extension
we got this right google dictionary fine
so we are able to achieve this
successfully now there are two things
you might get as an exception one is
permission error because you are trying
to access it directly from C folder so
just copy the extension file and put it
in your workspace
second thing you might get an
exception saying that CRX three or CRX
two is not compatible something like
that so what do you have to do is you
have to pack it again so ask your
developer they will do for you or else
as I did here pack extension you can do
that that will convert your file into
CRX three format now let's understand
how we can open this pop-up page right
so here we can see that it has some ID
now each and every chrome extension
has a unique ID so based on this ID
we can automate things so I'm going to
copy this and I am going to new open new
tab and here I'm going to say Chrome -
extension and then colon double slash
and paste the ID and then we know that
this
browser_underscore.html is our actual file right
so I'm going to just copy and paste it
here now if I hit enter I'm able to see
this right so let's try to do something
let's say that hey and define so here we
are obviously getting our answer I mean
our meaning side so this this we have to
pass within our driver.get() so what
I'm going to do is here within the drive
dot get here I'm going to pass this
stuff oh that's ok now let's first run
this and then we'll move on so let's run
this first yeah so we got this browser
right so we are able to get this on here
we can type something and we can click
on the defend everything so these are
basic hope you is to write your selenium
script or protractor script or web driver IO
script so this is going to be
very similar so let me quickly inspect
and check what we have here I believe
there should be id because that is
how everything was design yeah so we
have ID so I can take this so here I am
going to say
drive dot find element by ID on this
one so find element by ID and here I'm
have to pass the value and then I'm
going to type something so dot sendkeys
and within this I have to pass my
research data so let's do with the
define itself and then what I have to do
I have to click on the define button
right so let me inspect this so here we
have ID which is define button
so it's driver dot find element by ID
very quickly and here I'm going to dot
click right so obviously I have to write
some web driver wait logic to wait for the
text to appear but I'm just going to use
the thread.sleepas of now I know
this is not a good practice but I'm not
here to teach you the exception I mean
explicit wait and all so I am just
going to use the thread of sleep as of
now so here maybe
five seconds yes now after that here we
are getting this thing so let's print
this whatever we are getting in the head
there so here we have this class called
headword right so let me copy this and
here driver dot maybe I can use the
class name so find element by class name
and Here I am going to pass this and
here believes they get text and we will
print this okay so let me store that
into a local variable and here I'm going
to just text is fine and here I am going
to log this so sys out and text okay
now we are getting some method here
because of course we have to handle the
what we call that exception right so
thread dot sleep and why I'm not getting
any suggestion oh sorry for that I have
to pass within() the integers not this
thing okay my bad
so now I am getting compile time error so
I have to add the throws declaration or
try catch anything is fine that's okay
right now let's first try to run this
and we will print something so that we
can make sure it's working till now
okay so of course it's different is
going to search for the different word
and it's getting some meanings and I
hope that we are getting as define dot
something like that which we got here
right so define yeah so he got this word
so here you can see we are getting the
exact output as we wanted right now what
we are going to do is we are going to
change this to option page right so we
will go to this option page and from
there we can change the language right
so let me copy this URL and let me click
here so here I am going to do again so
driver dot get and Here I am going to
pass this URL and after that I'm going
to select this one right so let me
inspect this and it has a language
selector as in select so I can use that
so driver dot find element by ID and by
ID and here within this I have to pass
this now let us store this in
a new local
variable and this is going to be your
language selector and selector that's
fine and here I'm going to pass that you
need in the select constructor so new
select not this select so new select
and here I am going to pass my web
element which is this selLan and
here I'm going to say dot select by
visible text maybe so select by a visible
text and here I am going to pass this as
Hindi right so let me quickly copy this
so what this guy yeah so copy and paste
it here that's fine
now also we have to click on the Save
button right so quickly find that so
within this we have this Save button
which has ID so I'm going to take that
and here document sorry not
document so driver dot find element by
maybe by dot ID this time so by dot
and here we can pass the value then I
can click on this site so click on this
right now it's going to save this so
that's going to work fine I think so
after that what we can do this again we
can load this website now so we can same
we can repeat the same stuff here so
what I'm going to do is I'm going to
just convert this to a method so maybe
get data ok and here we can see for a
private static get data ok so here we
are going to bring this value right so
it's going to print for two times yeah
so let's call this method again so get
data here also after once we save the
data I mean save the language selection
once we change the language selection
then again I'm going to call the same
method here ok so let me close my all my
terminals and let me run this then I
will explain you again ok so let it be
run so the first time it's going to
search for the define and it is going to
give us in English meaning then it is
going to search for oh it was very quick
guys so you can see the differences
right so we got this know Hindi Hindi
meaning so it was very quick I think so
here in the console you can see right so
we are getting this thing again so let
me explain you the code again so it is
very easy it is like basically like how
be automate our regular pages the same
thing it's going to be happen here also
only difference is how you are going to
load the Chrome extension ok so first
thing remember that you have to pack
your extension and make that as an CRX
file now now there are plenty of
websites available which can do that but
I will not recommend you to do that
because that might bring some code error
or maybe it can break your package so
instead of that you can use the inbuilt
function or in built option in the
Chrome browser itself so you can do that
and then here we are writing converted
this code into a method so that I no
need to write the code again in again so
here the only thing you have to
is how we are going to load the Chrome
extension right so first time we have
loaded this browser dot I mean browser
underscore action dot HTML which is our
pop-up page and let me write a comment
here so here it is going to be our
pop-up page and here this is going to be
our option page so option page is
basically the settings of that
particular extension okay so I hope this
is very clear to you there are some
limitation as well so you cannot do all
the stuff for example if you check
extensions like grammerly they are very
complicated to automate because they are
using the shadow Dom concept and we know
that selenium is very not much shaft for
the shadow Dom so that kind of automatic
extension are going to be really
challenged for that maybe if time
permits we will do that and this type of
simple applications are going to be very
easy if you have this pop-up page and
the option page and some of the
applications have right click context
click to do that I don't think that
possible I will try to figure it out if
I find any solution I will update update
in our channel and that's pretty much
enough we are going to do that same
stuff using protractor in the next video so
if you liked the video hit the thumbs up
and if you are new here please
to subscribe that's it from my side I
hope you have learned something new and
you have enjoyed the video see you in
the next one
