如何开发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 UI和功能的实践？

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

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

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

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

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

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

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.

---

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

(我回顾了许多"类似的问题",我担心我的选择是有限的,但如果我把你的启示赐给我,我会非常高兴)

Answer 1

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

Answer 2

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

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一样)

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

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

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

3. 将元素插入侧栏中 injectProfileWidget()

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