如何开发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用户界面和功能？

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元素，这样我的功能就可以本地显示了)

overview

有Sidebar小工具和上下文小工具，但它们不提供我想要实现的目标。

Gmail实验室是一个实验特性的试验场，还没有为黄金时段做好充分的准备。它们随时可能改变、破裂或消失。

https://groups.google.com/forum/#!forum/gmail-labs-suggest-a-labs-feature看来，开发Gmail实验室的能力被谷歌员工锁定了。

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

需要帮助吗？在gmail标签下的堆栈溢出上找到我们。

所以，是的，我真的很想知道是否有任何教程/参考资料在外面？

(我回顾了许多类似的问题，恐怕我在这里的选择是有限的，但如果我能把你的启示神化在我身上，我会非常高兴的)

Answer 1

看起来，您还没有偶然发现gmail.js项目。它提供了一个丰富的API，允许使用Gmail。但是，请注意，这个项目不是由谷歌维护的。这意味着Gmail中的任何更改都可能破坏您的扩展，也不能保证任何人都会关心更新gmail.js以解决这些更改。

Answer 2

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

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

刚刚遇到了来自广场工程团队http://corner.squareup.com/2014/09/a-different-kind-of-scaling-problem.html的博客

它是一个铬的扩展，当用户通过电子邮件联系时，在Gmail的侧边栏中显示联系人信息。(就像Rapportive一样)

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

1. 检查当前页面是否是使用document.location.href != currentUrl打开的电子邮件(您也可以使用gmail.js gmail.observe.on("open_email",function())来实现这一点)。
2. 获取包含电子邮件入口的DOM元素。我发现这个选择器适用于发送方：$(".acZ").find(".gD")
3. 使用injectProfileWidget()在侧栏中插入元素

如果您有兴趣的话，我正在开发一个类似的扩展，显示从混合面板here中提取的联系信息。