Chrome Extension and gmail.js blocking access to google api

Question

I'm just playing around with a chrome extension based on this tutorial https://cloud.google.com/blog/products/gcp/deepbreath-preventing-angry-emails-with-machine-learning .

When i use the extension for some reason I am unable to get the draft email's body using gmail.js https://github.com/josteink/gmailjs-node-boilerplate .

Using the gmail.js boilerplate,

    "use strict";

console.log("Extension loading...");
const jQuery = require("jquery");
const $ = jQuery;
const GmailFactory = require("gmail-js");
const gmail = new GmailFactory.Gmail($);
window.gmail = gmail;




/*
This code uses the Gmail library to observe emails being sent, turn them into XML,
then return a json data, body, which is put into the request and parsed with ML.
*/

gmail.observe.on("load", () => {
  const userEmail = gmail.get.user_email();
  console.log("Hello, " + userEmail + ". This is your Rhea talking with a new version better loading!!");

  gmail.observe.on("view_email", (domEmail) => {
    console.log("Looking at email:", domEmail);
    const emailData = gmail.new.get.email_data(domEmail);
    console.log("Email data:", emailData);
  });


//var main = function () {

  gmail.observe.on('save_draft', function (id, url, body, xhr) {

    var draftId = url['permmsgid'];

    console.log("draft saved" + draftId)

  });

});
    //

The first two console logs are working correctly, so unsure as to the best way to handle this issue.

Thanks in advance :)

Answer 1

Unfortunately, it appears the save_draft observer is not firing anymore after "New Gmail" was introduced in 2018. I loaded your extension myself and confirmed that, while the view_email event is still firing as expected, save_draft is not. Gmail.js's developer confirmed in a recent issue report that another event, send_email, has the same issue with the current version of Gmail. So it seems the script is not working as well as it used to.

If you still want to get this working, a few options are:

• Find an alternate Gmail.js event to use instead of save_draft that is still working
• Get the contents of div.editable using some other event handler, such as JavaScript's standard onkeypress
• Roll up your sleeves, debug the issue with the Gmail.js plugin, and send a pull request to its developer if you can find a fix

---

Edit: Here is a working solution using standard JS events keydown and click as well as a mutation observer to wait for the field to appear:

"use strict";

console.log("Extension loading...");
const jQuery = require("jquery");
const $ = jQuery;
const GmailFactory = require("gmail-js");
const gmail = new GmailFactory.Gmail($);
window.gmail = gmail;

function logInnerText(e) {
  console.log("New Email Body Text is: " + e.currentTarget.innerText);
}

gmail.observe.on("load", () => {
  const userEmail = gmail.get.user_email();
  console.log("Hello, " + userEmail + ". This is your extension talking!");

  gmail.observe.on("view_email", domEmail => {
    console.log("Looking at email:", domEmail);
    const emailData = gmail.new.get.email_data(domEmail);
    console.log("Email data:", emailData);
  });

  var observer = new MutationObserver(function(mutations) {
    let messageBodyField = document.querySelector("div.editable");
    if (
      messageBodyField &&
      !messageBodyField.getAttribute("data-found-by-my-extension")
    ) {
      messageBodyField.setAttribute("data-found-by-my-extension", true);
      messageBodyField.addEventListener("keydown", logInnerText);
      messageBodyField.addEventListener("click", logInnerText);
    }
  });

  observer.observe(document.body, { childList: true, subtree: true });
});

If you run into any performance issues, you can try searching within a lower-level tag than document.body when checking if the box exists. Let me know if you'd like any of it explained further.