如何为 Gmail 开发 Chrome 扩展程序？

Question

我正在考虑为 Gmail 开发 Chrome 扩展程序，我想知道当前的最佳做法是什么。

例如：

• 默认为每封电子邮件附加 GPG 签名
• 添加一个额外的按钮来做某事（我已经有了）
• 劫持发送电子邮件并提示我完成某事的操作
• ...
• （只是这些例子帮助我发现什么是可能的）

有很多值得注意的扩展可以显着增强 gmail 的功能：

• http://www.boomeranggmail.com/
• http://toolbox.mxhero.com/
• http://www.wisestamp.com/
• ...
• （我不隶属于他们中的任何一个，我只是列举了几个）

一种选择是查看位于此处的来源 ~/Library/Application Support/Google/Chrome/Default

但也许有（一厢情愿）关于如何摆弄 gmail UI 和功能的良好教程/一组实践？

Gmail extension/gadget API - how to add a button to the compose toolbar?

您必须以编程方式创建和注入按钮。这将涉及对 Gmail 源代码的大量搜索（剧透：它很难看）。

How to build a chrome extension to add panel to gmail windows?

您将面临的最大的长期挑战是 gmail 的布局会意外更改并破坏电子邮件发现或修改后的 UI。这两个问题要么需要一些聪明才智来解决，要么需要你熬夜想知道谷歌是否会突然破坏你的扩展。

http://www.jamesyu.org/2011/02/05/introducing-gmailr-an-unofficial-javscript-api-for-gmail/

他们都在构建具有相似功能的复杂 API，如果 Gmail 决定显着改变他们的应用程序结构（他们不可避免地会这样做），这些 API 都会独立中断。

Gmail 通过闭包编译器运行其代码，从而混淆了所有内容。最重要的是，Gmail 可能是目前最复杂的 JavaScript 应用程序之一。

Parse 创始人的库 - https://github.com/jamesyu/gmailr - 但 1.5 年未更新。

---

我可以向你展示我到目前为止所获得的结果，并且知道我不是特别喜欢像 .oh.J-Z-I.J-J5-Ji.T-I-ax7

这样的选择器

注意：http://anurag-maher.blogspot.co.uk/2012/12/developing-google-chrome-extension-for.html（他也这样做，他也使用了这样的混淆选择器）

manifest.json

"content_scripts": [
  {
    "matches": ["https://mail.google.com/*"],
    "css": ["mystyles.css"],
    "js": ["jquery-2.1.0.js", "myscript.js"]
  }
]

myscript.js

var icon = jQuery(".oh.J-Z-I.J-J5-Ji.T-I-ax7")
var clone = icon.clone();
clone.attr("data-tooltip", "my tooltip");
clone.on("click", function() {
    jQuery(".aDg").append("<p class='popup'>... sample content ...</p>");
});
icon.before(clone);

（重用现有的 UI 元素，让我的功能看起来很原生）

---

https://developers.google.com/gmail/gadgets_overview

有侧边栏小工具和上下文小工具，但它们没有提供我想要实现的目标。

Gmail Labs 是尚未完全准备好迎接黄金时段的实验性功能的试验场。它们可能随时改变、破裂或消失。

https://groups.google.com/forum/#!forum/gmail-labs-suggest-a-labs-feature 似乎开发 Gmail 实验室的能力仅限于 Google 员工。

https://developers.google.com/gmail/

需要帮助吗？在 gmail 标签下的 Stack Overflow 上找到我们。

---

是的，我真的很想知道那里有没有教程/参考资料？

（我复习了许多“类似问题”，恐怕我在这里的选择有限，但如果我将您的启迪献给我，我会非常高兴）

Answer 1

您似乎还没有偶然发现gmail.js 项目。它提供了丰富的 API 允许使用 Gmail。但请注意，此项目并非由 Google 维护。这意味着 Gmail 中的任何更改都可能会破坏您的扩展程序，并且无法保证任何人都会关心更新 gmail.js 以解决这些更改。

Answer 2

这里有一个很好的 API 用于与 Gmail DOM 交互：

https://www.inboxsdk.com/docs/

入门示例可帮助您将按钮添加到撰写工具栏。

// Compose Button
InboxSDK.load('1.0', 'Your App Id Here').then((sdk) => {
    sdk.Compose.registerComposeViewHandler((composeView) => {
        composeView.addButton({
            title: 'Your Title Here',
            iconUrl: 'Your Icon URL Here',
            onClick: (event) => {
                event.composeView.insertTextIntoBodyAtCursor('This was added to the message body!')
            }
        })
    })
})

Answer 3

刚刚看到 Square 工程团队 http://corner.squareup.com/2014/09/a-different-kind-of-scaling-problem.html 的这篇博文

这是一个 chrome 扩展程序，当用户将鼠标悬停在电子邮件联系人上时，它会在 Gmail 的侧边栏中显示联系人信息。 （就像 Rapportive 一样）

简要描述了应用程序的内容脚本。它的工作原理如下：

1. 使用document.location.href != currentUrl检查当前页面是否为打开的电子邮件（您也可以使用gmail.js gmail.observe.on("open_email",function())来实现此目的）。

2. 获取包含电子邮件地址的 DOM 元素。我发现这个选择器适用于发件人：$(".acZ").find(".gD")

3. 用injectProfileWidget()在边栏中插入元素

我正在开发一个类似的扩展程序，如果您有兴趣，它会显示从 Mixpanel here 提取的联系信息。