For a project I need to get the body of the currently open message and pass that message to a webservice for processing and storing some data of it.

I thaught the best way to do it is to use an extension to grab the message body (and some additional information) and then send that as a webrequest to a service for insertion into the database.

But I have no idea how I should handle this. I followed some tutorials to get me started on chrome plugins but I can't find how to get the body of the message.

I have found that you need content scripts for it, but even then I have no clue.

Can anyone give me a headstart on this?

For a project I need to get the body of the currently open message and pass that message to a webservice for processing and storing some data of it.

I thaught the best way to do it is to use an extension to grab the message body (and some additional information) and then send that as a webrequest to a service for insertion into the database.

But I have no idea how I should handle this. I followed some tutorials to get me started on chrome plugins but I can't find how to get the body of the message.

I have found that you need content scripts for it, but even then I have no clue.

Can anyone give me a headstart on this?

• javascript
• google-chrome
• google-chrome-extension
• gmail

9 Answers 9

This is an Old question, but I have found an answer after few days of attempts. To get the Email Title, Iterate over the HTMLCollection which contains the email title which can be found with class name hP:

var list= document.getElementsByClassName("hP");
for (var i = 0; i < list.length; i++) {
    console.log(list[i].innerText);
}

to get the Email Body, iterate over the HTMLCollection which contains the email body (class ii):

var list= document.getElementsByClassName("ii");
for (var i = 0; i < list.length; i++) {
    console.log(list[i].innerText);
}

Each email has its own message Id which is unique.

Use content.js to fetch the "messageId" from the elements and then pass it to Gmail API to fetch the email data.

Sample:

<div class="adn ads" style="display:" data-message-id="189******56e***3" data-legacy-message-id="189******56e***3">

The API returns the data of the email in various format. One of those is the "raw" format which returns the full email body as a base64url encoded string. Send this data as it is to your server and then decrypt the email and save it to your database.

This is what your process should be:

1. When a message is open, you should see a button in the email body or somewhere in the gmail.

2. Clicking on the button should copy the body of the email and push it to the web server.

3. You can make this button click by default if you want to automatically copy paste the message.

For this process-

1. Create a content_script.js file and place the button in the gmail DOM.

2. Upon clicking the button, send a message to eventpage.js and the message will contain the body of the email currently open. Notice I haven't used background.js but instead eventpage.js since google asks you to avoid using background.js and both are anyway same with little difference of persistence.

3. Your web server can take the message and store it.

If you want to avoid the button process then content_script.js should automatically look for email message open event and repeat the above process. But I would suggest you to keep the button since sometimes you might click on messages that you don't want to copy.

If I had to do this, I would try and find out the ID of the DIV that contains the body on the GMAIL client... Using jQuery to grab the HTML or text contents of a DIV is real simple... take a look: http://api.jquery./html/

A simple jQuery selector would look something like this:

$("#gmailsBodyDivID").html()

If jQuery is not an option, you can get the DIV using JavaScript's getElementByID (http://www.w3schools./jsref/met_doc_getelementbyid.asp)

Finally, as mentioned by DudeOnRock, you should use an Ajax request to your webservice.

The hard part is to know how Gmail names the DIV you're looking for... I just took a quick look and on mine, there was some weird naming...

<div id=":w1" class="ii gt adP adO"><div id=":w2">

I'm not sure what the ":w1" or ":w2" stand for, nor how to use them with a jQuery selector... maybe someone more knowledgeable might shed some light there.

...so I guess you should focus on that first...

If IDs prove hard, you might want to use a jQuery selector by class names...

good luck with that!

I'm not sure what the exact requirements are for your project, but would it be possible to just set up an email address that you forward those emails to?

From there, you'd just need to setup a server in your preferred language to check for new emails and process them (filter content, insert into database, etc).

Benefits:

• You're not locked into using Chrome + the extension
• You can use any browser, device, email app to forward the emails
• You don't need to decipher the messy Gmail HTML
• Changes to the HTML/JS/CSS in Gmail will not break your internal processes
• No need to maintain/update the Chrome extension things change (and they will)

It is difficult. As @frenetix pointed out, you can grab the ID's of the elements you want and follow his (or her) method. The hard thing is that Google actually changes the element ID's nearly every time Gmail is loaded, making it nearly impossible.

One thing you can do is assume you (or the user) is clicking on the pose window. Then you can do "document.activeElement" to get the proper DOM element. This will at least get you a little bit further to be able to do what you want to do although it's not quite there yet.

Good luck. I am working in this area right now and it is pretty tough.

Here is the code I came up with be sure to add the buttons in the append sections and give them a id with count. This waits for the div to arrive on click or onload when it has loaded it inserts the appended material in the specified area. There is not need to worry about the random classes as these are static. And the code has been working for Two Years.

    window.addEventListener("DOMNodeInserted", function(event) {
       //TEST TO SEE WHERE CSS IS AT
        // $(event.target).append($(event.target).parent()[0].className);
        if($(event.target).parent()[0].className == 'oc gU')
        {

            //ADD SEND BUTTON FOR MESSAGES
            //SUBJECT OF ENTIRE EMAIL GLOBAL
            var subject = $(event.target).parents().eq(28).children(1).find(".hP").text();

            //GET DATA EMAIL AND NAME 
            //Can assign via id or data-name and jid for email
            var imageid = $(event.target).parents().eq(18).find("img[jid]").attr("id");

           //THIS IS THE SEND BUTTON IN REPLAY ADD A BUTTON NEXT TO IT WITH THIS                     
           $(event.target).parents().eq(1).find(".gU.Up").children(0).append("addbuttonid here");
           //set click event for button
            $('#'+addbuttonid).click(function(){       
                //TO DO HERE
                //BODY FROM the REPLY MESSAGE
                var body = $(event.target).parents().eq(11).find('.Am').text();
                //PREVIOUS THREAD MESSAGES OPTIONAL
                var body = body + $(event.target).parents().eq(11).find('.gmail_extra').text();

            });


        }
        else if($(event.target).parent()[0].className == "aCi")
        {
           //THREAD MESSAGE
           //GET EMAIL SUBJECT
           var subject = $(event.target).parents().eq(17).children(1).find(".hP").text();
           //GET TO INFO
           var to = $(event.target).parents().eq(7).find('.g2');
           //GET NAME AND EMAIL
           var imageid = $(event.target).parents().eq(7).find("img[jid]").attr("id");
           var value = $("#\\"+imageid).attr("jid");
           var vname = $("#\\"+imageid).attr("data-name");
           //GET DOCUMENT BODY
           var tmp = $(event.target).parents().eq(6).find(".gs");
           var body = tmp.text();

           //GET DOCUMENT DATE
           var date = $(event.target).parents().eq(7).find('.g3').attr('title');
           date = date.replace(" at ", " ");
           //ADD THE BUTTONS HERE WITH INITIAL VALUES
            $(event.target).parents().eq(6).append('addbutton2');

            $("#"+addbutton2).click(function(event){
                var email = $("#\\"+$(this).attr("data-imageid")).attr("jid");
                var name = $("#\\"+$(this).attr("data-imageid")).attr("data-name");
                var body = $(this).attr("data-body");
                //TOD FOR BUTTON NEXT TO REPLY ICON ON THREAD AS OPENED

            });

        }
});

As you can see with this code you can now add buttons i gmail UI either in the reply section or in any message in the thread, and your Wele :). THIS IS THE ONLY CODE OUT THERE UNLESS YOU DO IT YOURSELF THAT WORKS VIA CHROME EXTENSIONS. Gmail.js or using the API is simply none essential with this since you can pull the data from the page

I too was working on same project and found this way of reading mail data. Use classname "a3s", and at position 0.

popup.js

document.getElementById("click-me-button").addEventListener('click', async function() {
    chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
        var activeTab = tabs[0];
        var activeTabId = activeTab.id;

        chrome.scripting.executeScript({
            target: { tabId: activeTabId },
            function: DOMtoString,
        }).then((result) => {
            var user_mail = result[0].result;
            console.log(user_mail);
        });
    });
});

function DOMtoString(selector) {
    var temp_var = document.getElementsByClassName("a3s");
    return temp_var[0].textContent;
}

manifest.json

"permissions": [
        "webNavigation",
        "tabs",
        "scripting"
    ],
    "host_permissions": [
        "https://mail.google./*"
    ],

Chrome extensions are essentially written in JavaScript. What you are planning to do is going to be quite difficult without at least some understanding of JavaScript. Here are some pointers: To access web-site elements, I suggest you learn about DOM manipulation with JavaScript. To send the data to a website you are going to have to use HTTPRequests (AJAX).