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实验室是实验性功能的试验场，这些功能尚未准备好迎接黄金时段。它们可能随时改变，破坏或消失。

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

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

需要帮助？在gmail标签下找到Stack Overflow。

是的，我真的想知道是否有任何教程/参考资料？

（我回顾了许多类似问题＆＃39;我担心我的选择有限，但如果我将你的启示赐给我，我会非常高兴）< / em>的

Answer 1

看起来你没有偶然发现gmail.js项目。它提供了丰富的API，允许使用Gmail。但请注意，此项目不是由Google维护的。这意味着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

刚刚从Square Engineering Team http://corner.squareup.com/2014/09/a-different-kind-of-scaling-problem.html

进入了这个博文

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

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

使用document.location.href != currentUrl检查当前页面是否为打开的电子邮件（您也可以使用gmail.js gmail.observe.on("open_email",function())来实现此目的）。
获取包含电子邮件地址的DOM元素。我发现此选择器适用于发件人：$(".acZ").find(".gD")
使用injectProfileWidget()

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

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

的manifest.json

myscript.js

是的，我真的想知道是否有任何教程/参考资料？

3 个答案: