Up next in 10
Javascript Gmail API Project to Send Email & View Inbox Messages in Browser Using HTML5
Dec 9, 2025
Buy the Full Source code of Application here:
https://procodestore.com/index.php/product/javascript-gmail-api-project-to-send-email-view-inbox-messages-in-browser-using-html5/
Show More Show Less View Video Transcript
0:00
Uh hello friends. Today in this tutorial
0:02
I'll be showing you that how to use the
0:04
Gmail API to send the email and view the
0:08
inbox messages straight inside your
0:11
browser using vanilla JavaScript and
0:13
HTML 5. So this is a step-by-step blog
0:16
post where I have written step-by-step
0:18
instruction. You will see first of all
0:20
you will have a authorize button. If you
0:22
click that button you will be granted
0:24
with the permissions. You need to select
0:26
your Google account. Grant the
0:28
appropriate permissions here and after
0:30
that a set of messages will be shown
0:33
here. Latest messages of your Gmail
0:35
account will be shown on the screen and
0:38
you will be able to compose a message
0:40
straight from the application itself.
0:42
You will see you will send a message
0:45
from two subject message and after that
0:48
the message will be sent to that email
0:50
address. So all this application we will
0:53
be building from scratch. So this is the
0:56
blog post I have written step by step in
0:58
the video description if you want the
0:59
full source code. Simply just copy paste
1:02
the source code. This is a single file
1:04
index.html.
1:06
Let me guide you how to build this. So
1:08
simply first of all copy this
1:12
[sighs]
1:12
and let me just copy this and here after
1:17
that you need to have a editor installed
1:19
here. So just create uh open visual
1:22
studio code textrator and simply index
1:25
html create this file and simply copy
1:28
paste this code. So paste it and now you
1:31
need to make some modification in this
1:33
code here. If you just open this this
1:35
will not work because you need to
1:37
replace your own API key and the client
1:40
ID. So here this is the option here. So
1:43
in order to get get these two details
1:45
which is client ID and API key you will
1:48
need a account inside Google cloud
1:51
console.
1:52
So just go to Google and type here
1:55
Google cloud console. So this is the
1:57
account here
1:59
and uh simply click this. You need to
2:02
create an account. I have already have
2:04
account. So the very first thing you
2:07
need to do is that
2:09
[snorts]
2:12
uh let me just select the account where
2:15
I have created this. So yes this is
2:18
account.
2:24
So [snorts] I have this account here. So
2:26
if I click this already I have created a
2:28
project here. So the very first thing
2:31
you will do is that just go to the API
2:33
preview section and you need to enable
2:35
the API which is Gmail API. So simply
2:38
here search for Gmail API
2:41
and uh the Gmail API will come. Simply
2:44
select this API and click on enable it.
2:47
I have already clicked on enable. So you
2:49
need to enable this API. After enabling
2:52
it, you need to create the client ID. Go
2:55
to the credentials tab here and simply
2:58
you need to create a new client ID.
3:00
Click on create credentials. Click on
3:02
oath client ID.
3:05
So here you need to create it and uh
3:08
here in the application type you will
3:10
select here various options are there
3:13
but we are building for the web. So we
3:15
will select web application and then
3:18
inside this if you are building on the
3:20
browser site you need to uh add
3:23
authorized JavaScript origin. Simply
3:25
click HTTP local host. In my case the
3:29
port number will be if I cross check
3:33
you will see 5500. So you need to check
3:36
your port number whichever port number
3:38
that you are running 5500. Simply click
3:41
add URI.
3:43
So if you if your port number is
3:46
different so replace here differently
3:48
and click on create and now it will
3:50
create your client ID it will give you
3:53
this unique client ID this will be
3:55
different for you so don't copy my and
3:58
here you simply replace it inside this
4:02
snippet of code here so paste it and now
4:06
you will need your API key this is also
4:08
very different so right here at the
4:11
above you will see API key you can also
4:13
create a brand new API key also. So it
4:15
will create a API key for you. Simply it
4:18
will give you this key. Copy this and
4:20
paste it
4:23
and paste it.
4:26
And now if you open this application we
4:28
have replaced the client ID API key and
4:32
uh once this application start I will
4:34
explain the code also. Let me now open
4:37
this and here I need to replace here
4:40
local host instead of 127 as you see
4:44
here local host you will see now we have
4:47
the this compose option here and now you
4:50
will see all the email addresses are
4:52
fetched from my email account here I can
4:55
also cross check as well if I go to
4:57
gmail.com you will see all these email
4:59
address are being fetched from my
5:01
account here you will see coding sea all
5:04
that stuff you will
5:07
These are all the code messages which
5:10
are fetched. If I click on individual
5:12
message here, you will see it will show
5:14
inside this model window here. So this
5:17
is a great application where it shows
5:19
your inbox messages inside a model
5:21
window. You can also reply to this
5:23
message. Simply uh create a message
5:26
here. Click on send and uh it will send
5:30
it. So if you refresh your inbox you
5:32
will also see
5:40
in the send box you will see now we have
5:43
successfully sent this message
5:47
to this email address. So you can see I
5:49
have typed this message. So if I now
5:52
open that uh email
5:55
you will see a message will be received
5:57
here. You will see this is a message we
5:59
have sent here like this you will see.
6:02
So in this easy way you can also send
6:04
messages also reply to them also. We can
6:06
also compose a new message. Simply give
6:09
a two email address and change the
6:12
subject. Hello this is a test message.
6:18
Hello this is a message sent by this
6:23
app. So now if I click send button here
6:26
it will send out this message
6:29
and once again if I refresh it you will
6:31
see hello this is a test message. So we
6:34
have successfully sent our message by
6:36
using this app. Here you will see hello
6:38
this is a message sent by this app. So
6:42
now we are uh in the background we are
6:44
using Gmail API to send these messages.
6:46
We are using the client library which is
6:48
doing all the heavy lift lifting for us.
6:51
So this is only this single file is
6:53
there index.h HTML this is all on
6:55
browser site and uh it is showing all
6:59
these messages you will see 1 2 3 four
7:01
messages
7:03
if I [snorts] delete this let's suppose
7:06
if I delete this browsing data
7:15
and if I relaunch the application you
7:18
will see once you load this application
7:20
for the very first time it will ask for
7:22
the permission You need to grant these
7:24
permissions. So you will see
7:27
now this this will change here.
7:38
You can see you can compose messages,
7:41
write messages and these are all the
7:43
messages which are shown to you. You can
7:46
also increase these messages by making
7:49
some slight modifications as well.
7:53
So this is all the code which is
7:56
necessary here.
7:58
You will see we are using this method
8:01
here send message. We are providing two
8:04
email address subject reply to all this
8:06
stuff
8:08
and uh
8:10
you can see that
8:13
if you face any sort of problem running
8:15
this code you can comment on this video
8:17
if your application doesn't work. I have
8:20
shown you step by step what you need to
8:21
do. You need to get your own client ID
8:24
and uh API key for this to work. Don't
8:28
copy my client ID and API key. So you
8:33
will see this is the value you can
8:35
change here display inbox. So it is now
8:37
displaying the messages of the inbox of
8:39
the user. So it is maximum results is 10
8:44
here. So I can change this to 50 as
8:46
well. So it will display 50 messages
8:48
from my inbox. So if I refresh it, you
8:50
will see what I'm talking about. If I
8:53
open with live server once again,
8:56
if I change this to local host
9:03
and now you will see now it will change
9:05
to 50 messages. So it will display 50
9:08
messages to us.
9:10
So as you can see it will display
9:14
50 messages here. So you can change this
9:16
to any value of your choice here. You
9:18
can play play with this application and
9:21
try to make this application according
9:23
to your needs. So this value you can
9:25
change it to 50, 100 all that stuff
9:29
and uh you can ask this from the user
9:32
simply ask the user how many messages
9:35
you want to display so that you can
9:36
change it. So simply we are displaying
9:38
for the inbox here and then it is just
9:41
displaying all these messages here. you
9:43
will see inside this row and then we are
9:46
appending this. This is the logic we are
9:48
doing. We are using the append method
9:50
and we are displaying inside a table. So
9:53
you will see
9:56
now we can also if you click this
9:58
message any of the individual messages
10:01
it will show to you in a proper model
10:04
window. Here you will see.
10:07
So this is a nice thing about this. So
10:09
any of the messages you will see it is
10:12
shown inside a proper model window. So
10:17
you will find no uh videos on Gmail API
10:21
on whole YouTube. So I decided to make
10:24
this application for you so that you can
10:26
use Gmail API straight inside your
10:28
browser
10:30
uh in order to use this. So definitely
10:32
download the video description link. Go
10:35
to the video description link to
10:37
download all the source code. This is a
10:39
very awesome application where you can
10:42
send messages, view the messages
10:45
straight inside your browser. This is
10:47
you can see Gmail API demo. Compose this
10:50
message. Write to
10:55
click on send. And uh
11:00
now you can see the message is there.
11:05
So I will try to make more videos like
11:07
this. Try to send multiple messages
11:10
using the same Gmail API. So if you like
11:14
this video then please hit the like
11:15
button, subscribe the channel and also
11:18
hit the notification bell icon and uh I
11:21
will be seeing you in the next you.