Welcome folks today in this blog post we will be displaying all the inbox messages from the gmail user account using the gmail api in browser using javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to read the below blog posts to get on the same page as I will start in this blog post. Before that I have shown successfully how to successfully display the inbox messages from gmail account using gmail api v3 in javascript. Read it first before beginning this one. Link is given as follows

Javascript Gmail API Example to Display All Inbox Messages Using Fetch API & OAuth2 in Browser

And after that you will have the below directory structure of the project

Now we will be modifying the profile.html file of the project and inside it we need to add the <th> for the Move to trash button as shown below

And we need to modify the profile.js file of the project and we will be adding a dynamic table row <tr> tag for the trash button as shown below

divResult.innerHTML += `
          <tr id='${messageData.id}'>
          <td>${result[0]}<td>
          <td>${result[1]}</td>
          <td>${result[2]}</td>
          <td><a target="_blank" href="https://mail.google.com/mail/u/0/#inbox/${messageData.id}">${messageData.msg}</a></td>

          <td><button onclick="
          fetch('https://gmail.googleapis.com/gmail/v1/users/me/messages/${messageData.id}/trash',{
            method:'POST',
            headers:new Headers({Authorization:'Bearer ${ACCESS_TOKEN}'})
          })
          .then((info) => {
            document.getElementById('${messageData.id}').remove()
          })  
          ">Trash</button></td>

          </tr>
          `;

divResult.innerHTML += `

<td>${result[0]}<td>

<td>${result[1]}</td>

<td>${result[2]}</td>

<td><a target="_blank" href="https://mail.google.com/mail/u/0/#inbox/${messageData.id}">${messageData.msg}</a></td>

<td><button onclick="

fetch('https://gmail.googleapis.com/gmail/v1/users/me/messages/${messageData.id}/trash',{

method:'POST',

headers:new Headers({Authorization:'Bearer ${ACCESS_TOKEN}'})

})

.then((info) => {

document.getElementById('${messageData.id}').remove()

})

">Trash</button></td>

</tr>

As you can see in the code above guys we are making a simple fetch post request to the oauth2 gmail api route to move the message to the trash. And here we are using the actual unique id of the string and also we are providing the access_token header as well. And then it returns a promise we are handling using the then() statement. And lastly we are removing it from the DOM by calling the remove() method of javascript. As you can see we have attached the id to the current <tr> to be the id. And then we are targeting it by the same id that we have given earlier on to remove the element from the DOM.

Now guys if you open the app inside the browser you will see as you hit the trash button your message will be removed from the DOM and it will be moved to the trash area inside the gmail account.

Javascript Gmail API Example to Move Messages into Trash Using Fetch API & OAuth2 in Browser

Get Started

FULL SOURCE CODE