Up next in 10
Javascript Gmail API Example to Move Messages into Trash Using Fetch API & OAuth2 in Browser
Dec 9, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/javascript-gmail-api-example-to-move-messages-into-trash-using-fetch-api-oauth2-in-browser-2/
Show More Show Less View Video Transcript
0:00
Uh hello guys, today in this tutorial I
0:02
will be showing you that how basically
0:04
you can add a trash button inside your
0:06
Google Gmail. Uh this is application
0:09
Gmail inbox. So in the last tutorial we
0:12
have seen how basically we can display
0:14
all the messages that you receive inside
0:16
your Gmail inbox. So inside this nice
0:19
little table we developed this
0:21
functionality in the last tutorial. So
0:23
this is I think is the third tutorial in
0:25
the playlist of tutorials mastering the
0:27
Gmail API. So if you haven't watched the
0:29
previous two tutorials, I will highly
0:31
recommend that you watch those and uh we
0:34
have built these functionality in the
0:35
previous two tutorials. So in this
0:37
specific tutorial, we will be looking at
0:39
how basically we can add the button here
0:41
simply this trash button. So if you
0:43
click this button, your message will be
0:46
moved to the trash. And if you see
0:49
inside your Gmail, there is a special
0:51
section out there of trash messages. So
0:54
all the messages which are not of use
0:57
they are shifted to the trash folder and
0:59
uh the messages which are which is
1:01
present more than 30 days it will
1:03
automatically permanently be deleted. So
1:05
you can see we have this trash button
1:07
out there. So as I click this message as
1:10
I click this button you will see this
1:12
message will be removed from the DOM
1:14
here and it will be shifted here in the
1:16
trash. So if I refresh it you will see
1:18
this message will be there. You can see
1:20
in the trash folder automatically.
1:23
So as I am clicking this button, it is
1:25
making a fetch post request in the
1:27
background to the Gmail API. You can see
1:30
all these messages are deleted. You will
1:32
see that it is moved to the trash
1:34
folder. They are not deleted but they
1:36
are just moved to the trash folder. So
1:38
automatically after 30 days uh Google
1:41
will automatically delete all these
1:43
messages. So this will also help you to
1:45
gain some space as well. So you can see
1:49
you can display more messages here and
1:51
every message will now have a trash
1:53
button out there. So we will try to add
1:56
this functionality in this tutorial
1:57
guys. So I have uh given all the source
2:00
code for this tutorial specific
2:02
tutorial. So this is the blog post. You
2:04
can just uh read the step-by-step blog
2:06
post here. So you can [laughter]
2:10
you just need to basically first of all
2:12
read this blog post before you come to
2:14
this blog post. I have embedded the link
2:16
here. Step-by-step instruction is given.
2:19
So you can just read this blog post
2:21
alongside with watching this video. So
2:24
let's get started here. So let me just
2:26
delete and start from scratch.
2:30
So
2:31
let me just delete here.
2:36
So up till now you can see if I refresh
2:38
the page here we have built all this
2:41
functionality in the last two tutorials
2:43
in inside this playlist. So if I just
2:46
refresh here.
2:49
So in the last tutorial we are
2:51
displaying this according to the slider
2:53
if you change this value the messages
2:55
are increasing. You can see that
3:00
we also have a log out button. If you
3:01
click it you will be log out from here.
3:03
So once again you need to grant the
3:05
permission. [snorts] So this we have
3:07
built in the previous two tutorials. So
3:09
definitely watch these tutorials in the
3:11
playlist so that you get all the source
3:14
code and all the knowledge as well. So
3:16
now in order to add a button guys first
3:18
of all we will manipulate the profile
3:20
HTML. And here we will add a simple
3:22
table heading here which is uh move
3:25
[snorts] to trash. You will simply add
3:27
this heading here. And after this go to
3:29
profile dojs. So right here whenever we
3:32
are manipulating this uh inner HTML we
3:34
will add one more table data tag here.
3:38
So this table data will be a simple
3:41
button guys. So inside this table data
3:43
we will have a simple button. So this
3:45
button label will be simply trash.
3:50
And here we just need to assign a on
3:52
click event handler to this uh button.
3:55
So whenever the user click on this
3:56
button we need to hide this message
3:59
remove this message from the DOM and
4:01
also uh make a fetch API request. So
4:03
inside double quotes here we will simply
4:05
make a simple fetch request. So let me
4:08
show you the method guys inside the
4:10
single quotes let me show you the
4:12
endpoint where what we are using here.
4:14
So if you go to the Gmail API
4:16
documentation you will find out this
4:18
method here which is called as trash
4:19
method. And basically this is the
4:21
endpoint that we are hitting right here.
4:23
httpsgmail.googleapis.com/gmail
4:25
googleapis.com/gmail.
4:27
Here you need to provide your user ID.
4:29
In this case, this will be me. And
4:31
messages you need to provide the message
4:34
ID here and / trash. So this is a simple
4:38
post request
4:40
and this these are the parameters out
4:42
there recommended parameters user ID and
4:44
the actual ID of the message. That's it.
4:47
So this will be a simple uh post request
4:50
and I can simply copy paste the URL.
4:53
This is the URL we will be hitting.
4:58
So [snorts] simply I will paste it. And
5:00
uh for the user ID guys I already told
5:02
you this will value will be me because
5:04
we are doing it for our own accounts
5:06
that's why. And the id you can see in
5:09
the previous tutorial we have stored all
5:11
this information as you can see here we
5:13
are storing the ID of the inside this
5:16
object message data. The id stored right
5:19
here data do ID. So we can access this
5:21
using this message data dot id object.
5:26
We will pass the id of the message like
5:28
this. [gasps] So now guys you just put a
5:31
comma and inside curly brackets we will
5:33
write write the method to be post method
5:36
inside single quotes. And here we just
5:39
need to provide the headers as well. So
5:41
we need to require the access token. So
5:44
headers new headers
5:48
and inside parentheses we will pass the
5:51
access token like this inside curly
5:53
brackets which is authorization
5:57
colon and inside single quotes you will
6:00
just write b e a r e rer and then
6:03
followed by the access token. That's it.
6:07
So we are storing the access token
6:09
inside the local storage at the very
6:10
top. You can see that we are getting
6:12
this access token whenever you reload
6:13
the page. So you just need to provide
6:16
the access token. That's it. So this is
6:18
all that you need to do guys. So this
6:19
returns a promise. So we can handle the
6:21
promise using the dot then statement. So
6:23
basically this returns our info. We can
6:26
simply display this inside
6:30
console log info. And here we can simply
6:33
remove this uh message also guys.
6:35
Whenever you click the trash button you
6:37
also don't need this message on the
6:39
screen. So we also need to remove it. So
6:41
for doing this it's very easy. We need
6:44
to
6:46
uh give it a id to this table row tag.
6:49
So wherever you are creating this. So
6:51
basically we are in a loop out there. So
6:53
if you see we are in for each loop. So
6:55
for each message this operation will be
6:59
uh printed out. So we need to give it a
7:01
unique ID to it. So this unique ID will
7:03
be the actual id of the message. So
7:07
inside single quotes we will be
7:09
attaching the id of the message. So this
7:11
is stored inside message data dot id.
7:16
So every time this id will be unique
7:18
guys because the id of the message is
7:20
unique. It is stored inside this message
7:22
data id variable. So we are just
7:24
attaching it so that we can target
7:26
inside the javascript. So here we can
7:28
simply remove it. We can simply call a
7:30
method document.getelement get element
7:32
by id and we can target it using single
7:36
quotes.
7:39
Uh this will be message data
7:43
dot id and this contains a remove method
7:46
guys which automatically deletes the
7:48
element from the DOM. So this is just a
7:51
JavaScript method which automatically
7:53
removes the element from the web page.
7:56
That's it. So now if you click this
7:58
trash button guys, your message will be
8:01
removed and it will be shifted into the
8:03
trash section of Gmail API. Let me
8:05
refresh this and uh let me open this in
8:10
a different account. Let's suppose we
8:12
have this account here. Let me open
8:16
Gmail first of all. And you can see a
8:19
very few messages are there right here
8:21
guys. You can see that. So now if I open
8:24
this
8:27
So we need to first of all sign in with
8:30
Google and first of all grant the
8:32
permission. So you can see at post we
8:35
are showing five messages and uh let's
8:37
suppose I click this trash button and if
8:40
I show you no messages present inside
8:42
trash. If I show you
8:47
[snorts] so no messages are stored here.
8:50
If I now click it, click trash, you will
8:54
see this message will be removed. Second
8:57
as well, third as well, fourth as well.
9:00
So all the messages are removed. And now
9:02
if I check inside the trash folder, you
9:05
will also see and uh all these messages
9:08
are being shifted here. You will see
9:11
that.
9:16
So basically now what we can do is that
9:18
we can uh empty the trash if you want to
9:21
save space. Click on okay. You can see
9:24
that.
9:27
So in this way guys you can
9:29
automatically transfer messages and you
9:31
can request some more messages. Here you
9:34
can see that. Click on trash.
9:42
So you can see that your messages are
9:45
successfully moving to the trash folder.
9:48
So you can see that. So [snorts] in this
9:51
way guys you can do this process. This
9:53
is the tutorial. So please hit that like
9:55
button, subscribe the channel and I will
9:57
be uploading some more tutorials inside
9:59
this specific playlist of Gmail API. I
10:02
will be adding some more features to
10:04
this app so that we can search messages
10:06
also in the next tutorial. So keep
10:08
watching this tutorial series and I will
10:11
be seeing you in the next