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

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

例如：

• 将GPG签名默认附加到每封电子邮件
• 添加一个额外的button，做一些事情（我已经）
• 劫持发送电子邮件的行为，并促使我做一些事情
• …
• （只是他们的例子帮助我发现什么是可能的）

有相当多的显着扩展，大大增强了Gmail的function：

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

其中一个select是查看位于这里的源文件~/Library/Application Support/Google/Chrome/Default

但也许有（如意算盘）一个很好的教程/一套实践如何捣鼓的Gmail的用户界面和function？

Gmail扩展/小工具API – 如何将button添加到撰写工具栏？

您将不得不以编程方式创build并注入button。 这将涉及到很多的Gmail源代码（扰stream：这是丑陋的）。

如何build立一个Chrome扩展添加面板到Gmail窗口？

您将面临的最大的长期挑战是gmail的布局将意外改变，并中断电子邮件发现或修改的用户界面。 这两个问题要么需要一些聪明才能解决，要么你会熬夜想知道Google是否会突然打破你的扩展。

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

他们都在构build具有类似function的复杂API，如果Gmail决定大幅改变其应用程序结构（这是他们不可避免的），那么这些API都可以独立破解。

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

由Parse的创始人图书馆 – https://github.com/jamesyu/gmailr – 但在1.5年没有更新。

---

我可以告诉你我到目前为止，只是知道我不是特别喜欢.oh.JZI.J-J5-Ji.TI-ax7select器

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

的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.JZI.J-J5-Ji.TI-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); 

（重用现有的用户界面元素，使我的function看起来很原生）

---

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

有侧边栏小工具和上下文小工具，但他们不提供我想要实现的。

Gmail实验室是一个实验性function的testing场，对于黄金时段还没有做好准备。 他们可能随时改变，破坏或消失。

https://groups.google.com/forum/#!forum/gmail-labs-suggest-a-labs-feature开发Gmail实验室的function似乎locking在Google员工身上。

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

需要帮忙？ 在gmail标签下的Stack Overflowfind我们。

---

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

（我回顾了许多“类似的问题”，恐怕我在这里的select是有限的，但是如果我把你的启示甩在我身上，我会非常高兴）

Answer 1

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

Answer 2

刚刚从Square工程团队http://corner.squareup.com/2014/09/a-different-kind-of-scaling-problem.html

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

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

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

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

3. 使用injectProfileWidget()将元素插入到边栏中

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

Answer 3

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

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

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

 // 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!') } }) }) })