Welcome folks today in this blog post we will be searching the inbox messages from the gmail user account based on a certain keyword 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 move the inbox messages from gmail account into trash using gmail api v3 in javascript. Read it first before beginning this one. Link is given as follows
Javascript Gmail API Example to Move Messages into Trash Using Fetch API & OAuth2 in Browser
And after that you will have the below directory structure of the project
Now we need to modify the profile.html file of this project. Here we will be adding the search input field for searching the inbox messages based upon a certain keyword and also we have the button to search the messages as shown below
profile.html
|
1 2 3 |
<label for="search">Enter Keyword</label> <input type="text" id="search" placeholder="Search Messages"/> <button id="searchBtn">Search Messages</button> |
Now we need to edit the profile.js file and here we will be getting the reference of the input search element and the button also. As we have given both the DOM elements unique id.
profile.js
|
1 2 3 |
let search = document.getElementById("search"); let searchBtn = document.getElementById('searchBtn') let q="" |
And also we have declared the q variable where it will hold the search keyword that we write the inside the input field to search messages. Now we need to add the onclick event listener to the search messages button as shown below
|
1 2 3 |
searchBtn.onclick = () => { getMessages(number,q) } |
As you can see we are attaching the onclick event listener to the search messages button and here we are calling the getMessages() method and here we are passing the second value which is the actual querystring. Now we need to modify the getMessages() method 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 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 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
function getMessages(number, q = "") { divResult.innerHTML = "" console.log(number); let url = ""; if (q == "") { url = `https://gmail.googleapis.com/gmail/v1/users/me/messages?maxResults=${number}`; } else { url = `https://gmail.googleapis.com/gmail/v1/users/me/messages?maxResults=${number}&q=${q}`; } fetch(url, { 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 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) => { console.log(info) document.getElementById('${messageData.id}').remove() }) " >Trash</button> </td> </tr> `; }); }); }); } |
As you can see in the above code we are getting the second argument as the q variable and inside this function we are building the dynamic url based upon the query string value. If it’s equal to null then we are not passing the q parameter and if q value is there we are passing the q parameter in the api endpoint.
And also we need to call the same function getMessages() when we change the value of the search input field. For that we need to attach the onchange event listener as shown below
|
1 2 3 |
search.onchange = () => { q=search.value }; |
And now if you open the web app inside the browser you will see the below result as shown below
FULL SOURCE CODE
