javascript - 如何为 Gmail 开发 Chrome 扩展？

Question

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

例如:

• 默认为每封电子邮件附加 GPG 签名
• 添加一个额外的按钮(我已经有了)
• 劫持发送电子邮件并提示我完成某事的 Action
• ...
• (只是他们的例子帮助我发现什么是可能的)

有很多显着增强 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?

You will have to create and inject the button programmatically. This will involve quite a bit of scouring the Gmail source code (spoiler: it's ugly).

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

The greatest long-term challenge you will face is that gmail's layout will change unexpectedly and break email discovery or the modified UI. Both issues either require some cleverness to solve, or will require you to stay up at night wondering whether Google will suddenly break your extension.

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

They're all building out complex APIs with similar functionality, that can all break independently if Gmail decides to significantly change their app structure (which they inevitably will).

Gmail runs its code through the closure compiler, thereby obfuscating everything. On top of that, Gmail is probably one of the most sophisticated javascript apps out there.

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 (他也这样做，他还用了这么一个混淆选择器)

list .json

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

我的脚本.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 is a testing ground for experimental features that aren't quite ready for primetime. They may change, break or disappear at any time.

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

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

Need help? Find us on Stack Overflow under the gmail tag.

---

是的，我真的很想知道那里是否有任何教程/引用资料？

(我复习了很多“类似问题”，恐怕我在这里的选择有限，但如果能得到您的启发，我将非常高兴)

Answer 1

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