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 login and logout using google OAuth2 in javascript. Read it first before beginning this one. Link is given as follows
Javascript OAuth2 Google Login & Logout Example Using Access Token in Browser
And after reading the above blog post you will have the below directory structure of the oauth2 google signIn as shown below.
Now we need to modify the profile.html file by adding the slider for getting the amount of messages from the gmail api and also we will be adding the table where we will be displaying the inbox messages of the user as shown below
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Gmail Inbox</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> </head> <body> <div class="container"> <h1>Welcome to Gmail Inbox</h1> <div id="total">Total Messages:</div> <input type="range" id="number" value="3" max="500" min="0"> <table class="table table-striped"> <thead> <tr> <th>Date</th> <th>From</th> <th>To</th> <th>Message</th> </tr> </thead> <tbody id="result"></tbody> </table> <button id="logout">Logout</button> </div> </body> <script type="module" src="profile.js"></script> </html> |
Now we need to edit the script.js file of the oauth2 app. Inside it we need to add the gmail api scopes as shown below
Now we need to edit the profile.js file we will be declaring the variables and will be getting the references of the DOM Elements as shown below
|
1 2 3 4 |
let messageData = {}; let total = document.getElementById("total"); let divResult = document.getElementById("result"); let number = 5; |
As you can see we are declaring the constant number of messages we will be fetching when we load the page. And also we are getting the reference of the DOM element of the table body. Where we will be rendering dynamic table rows. And we are also getting the reference of the total div element where we will be showing the input slider value.
Now we will be attaching the value to the total div dom element which is 5 and also we will be calling the method which is getMessages() and inside it we are passing the amount of messages that we want to display as shown below
|
1 2 |
total.innerHTML = number; getMessages(number); |
And also we will call the same function when the input slider value changes as shown below
|
1 2 3 4 5 |
document.getElementById("number").onchange = () => { number = document.getElementById("number").value; total.innerHTML = number; getMessages(number); }; |
As you can see in the above code we are getting the input slider value and then we are attaching the total number of messages to the div element. And then we are calling the getMessages() method and we will be passing the number as an argument.
And now we will be making the simple fetch api get calls to the gmail api to get the inbox messages and after that will be getting the date, from and to fields. We will also be displaying the message as well in the table.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
function getMessages(number) { console.log(number); fetch( "https://gmail.googleapis.com/gmail/v1/users/me/messages?maxResults=" + number, { method: "GET", headers: { Authorization: `Bearer ${ACCESS_TOKEN}`, }, } ) .then((data) => data.json()) .then((info) => { console.log(info); Array.from(info.messages).forEach((message) => { fetch( `https://gmail.googleapis.com/gmail/v1/users/me/messages/${message.id}`, { headers: { Authorization: `Bearer ${ACCESS_TOKEN}`, }, } ) .then((info) => { return info.json(); }) .then((data) => { console.log(data); messageData = { id: data.id, msg: data.snippet, }; let result = []; Array.from(data.payload.headers).forEach((message) => { if ( message.name == "Date" || message.name == "From" || message.name == "To" ) { result.push(message.value); } }); console.log(result); divResult.innerHTML += ` <tr> <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> <tr> `; }); }); }); } |
So now if you open the application automatically all the messages will be fetched from the gmail inbox feed and displayed inside the browser in the table.
