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

I'm thinking about developing Chrome extension for Gmail and I want to know what are the current best practices.

我正在考虑为Gmail开发Chrome扩展程序，我想了解当前的最佳做法。

For instance:

例如：

attaching a GPG signature by default to every email
默认情况下将GPG签名附加到每封电子邮件
adding an extra button that does something (I have it already)
添加一个执行某些操作的额外按钮（我已经拥有）
hijacking action of sending email and prompting me to do complete something
劫持发送电子邮件并提示我完成某事的行动
...
...
(just them examples helping me to discover what is possible)
（只是他们帮我发现可能的例子）

There are quite a few notable extensions that significantly augment gmail functionality:

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

http://www.boomeranggmail.com/
http://www.boomeranggmail.com/
http://toolbox.mxhero.com/
http://toolbox.mxhero.com/
http://www.wisestamp.com/
http://www.wisestamp.com/
...
...
(I'm not affiliated with any of them, I just named a few)
（我不隶属于他们中的任何人，我只是举了几个名字）

One option would be to peek into their source which is located here ~/Library/Application Support/Google/Chrome/Default

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

But maybe there is (wishful thinking) a good tutorial / set of practises on how to fiddle with gmail UI and functionality?

但也许（如意思考）一个很好的教程/一套关于如何摆弄gmail UI和功能的实践？

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

Gmail扩展程序/小工具API - 如何在撰写工具栏中添加按钮？

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).

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

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

如何构建chrome扩展以将面板添加到gmail窗口？

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.

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

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).

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

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.

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

Library by the founder of Parse - https://github.com/jamesyu/gmailr - but haven't updated in 1.5 years.

图书馆由Parse的创始人 - https://github.com/jamesyu/gmailr - 但未在1。5年内更新。

I can show you what I got so far, and just so know I don't particularly like selectors like .oh.J-Z-I.J-J5-Ji.T-I-ax7

我可以告诉你到目前为止我得到了什么，并且知道我并不特别喜欢像.oh.J-Z-I.J-J5-Ji.T-I-ax7这样的选择器

Note: http://anurag-maher.blogspot.co.uk/2012/12/developing-google-chrome-extension-for.html (he also does it, he also uses such an obfuscated selectors)

注意：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);

(reusing existing UI elements so my functionality looks natively)

（重用现有的UI元素，使我的功能本身看起来像）

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

There are Sidebar Gadgets and Contextual Gadgets but they don not offer what I want to achieve.

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

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.

Gmail实验室是实验性功能的试验场，尚未为黄金时段做好准备。它们可能随时改变，破坏或消失。

https://groups.google.com/forum/#!forum/gmail-labs-suggest-a-labs-feature It seems like the ability to develop Gmail Labs is locked to Google employees.

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

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

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

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

So yes, I would really like to know if there are any tutorials / reference materials out there?

(I reviewed many of the 'Similar Questions' and I'm afraid that my options here are limited, but I would be extremely happy if I shrine your enlightenment upon me)

（我回顾了许多“类似的问题”，我担心我的选择是有限的，但如果我把你的启示赐给我，我会非常高兴）

3 个解决方案

#1

It looks like you haven't stumbled upon the gmail.js project. It provides a rich API allowing to work with Gmail. However, please note that this project isn't maintained by Google. This means that any changes in the Gmail may break your extension and there is no guarantee that anyone will care to update gmail.js to address these changes.

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

#2

There is a nice API for interacting with the Gmail DOM here:

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

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

The getting started example helps you add a button to the compose toolbar.

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

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

#3

Just ran into this blogpost from Square Engineering Team http://corner.squareup.com/2014/09/a-different-kind-of-scaling-problem.html

刚刚从Square Engineering Team http://corner.squareup.com/2014/09/a-different-kind-of-scaling-problem.html上看到这篇博客文章

It is a chrome extension that displays contact information in the sidebar of Gmail when the user mouseover an email contact. (Just like Rapportive does)

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

The content script of the app is briefly described. It works as follow :

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

Check if the current page is an open email using document.location.href != currentUrl (you can also use gmail.js gmail.observe.on("open_email",function()) to achieve this).

使用document.location.href！= currentUrl检查当前页面是否是打开的电子邮件（您也可以使用gmail.js gmail.observe.on（“open_email”，function（））来实现此目的）。
Get the DOM element containing the email adress. I found out that this selector works for the sender : $(".acZ").find(".gD")

获取包含电子邮件地址的DOM元素。我发现这个选择器适用于发件人：$（“。acZ”）。find（“。gD”）
Insert the element in the sidebar with injectProfileWidget()

使用injectProfileWidget（）在侧栏中插入元素

I am working on a similar extension that displays contact information pulled from Mixpanel here if you are interested.

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

#1

#2