How to develop Chrome extension for Gmail?

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

For instance:

attaching a GPG signature by default to every email
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:

http://www.boomeranggmail.com/
http://toolbox.mxhero.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

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

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.

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

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

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)

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)

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.

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://developers.google.com/gmail/

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

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)

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

Solution 2:

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

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

Solution 3:

Just ran into this blogpost from 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)

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).
Get the DOM element containing the email adress. I found out that this selector works for the sender : $(".acZ").find(".gD")
Insert the element in the sidebar with injectProfileWidget()

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