Chrome 扩展程序和 gmail.js 阻止访问 google api

Question

我只是在玩基于本教程 https://cloud.google.com/blog/products/gcp/deepbreath-preventing-angry-emails-with-machine-learning 的 chrome 扩展。

当我出于某种原因使用扩展程序时，我无法使用 gmail.js https://github.com/josteink/gmailjs-node-boilerplate 获取草稿电子邮件的正文。

使用 gmail.js 样板文件，

    "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)

  });

});
    //

前两个控制台日志工作正常，因此不确定处理此问题的最佳方法。

提前致谢:)

Answer 1

不幸的是，save_draft 观察者似乎在"New Gmail" was introduced in 2018 之后不再触发。我自己加载了您的扩展程序并确认，虽然view_email 事件仍在按预期触发，但save_draft 不是。 Gmail.js 的开发人员confirmed in a recent issue report 表示另一个事件send_email 与当前版本的Gmail 存在相同的问题。所以看起来这个脚本不像以前那么好用了。

如果您仍想使其正常工作，有以下几种选择：

• 找到一个备用的 Gmail.js 事件来代替仍在工作的 save_draft
• 使用其他一些事件处理程序获取div.editable 的内容，例如JavaScript 的标准onkeypress
• 卷起袖子，使用 Gmail.js 插件调试问题，如果可以找到修复程序，请向其开发人员发送拉取请求

---

编辑：这是一个使用标准 JS 事件 keydown 和 click 以及等待该字段出现的突变观察者的工作解决方案：

"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 });
});

如果您遇到任何性能问题，您可以在检查该框是否存在时尝试在比document.body 更低级别的标签中搜索。如果您想进一步解释其中的任何内容，请告诉我。