How to develop a Chrome extension for Gmail?

Question

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

For example:

• binding of the default GPG signature to each letter
• adding an extra button that does something (I already have)
• capturing email sending actions and prompting me to do something complete
• ...
• (only examples to help me find out what is possible)

There are many notable extensions that greatly enhance the functionality of gmail:

• http://www.boomeranggmail.com/
• http://toolbox.mxhero.com/
• http://www.wisestamp.com/
• ...
• (I am not associated with any of them, I just named a few)

One option is to look at their source, which is located here ~/Library/Application Support/Google/Chrome/Default

But maybe there is (wishful thinking) a good tutorial / lots of practice on how to mess with the gmail interface and functionality?

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

You will need to create and enter the program programmatically. This will include quite a bit of cleaning up the Gmail source code (spoiler: it's ugly).

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

The biggest long-term challenge that you will face is that the gmail layout will suddenly change and disrupt email detection or a changed interface. Both of these questions require some trick to resolve or require you to stay at night, wondering if Google will suddenly break your extension.

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

They all build complex APIs with similar functionality that can all break independently if Gmail decides to significantly change the structure of their application (which will inevitably happen).

Gmail runs its code through the closure compiler, thereby confusing everything. In addition, Gmail is probably one of the most complex javascript applications.

Parse founder's library - https://github.com/jamesyu/gmailr - but did not update after 1.5 years.

---

I can show you what I got so far and just know that I don’t particularly like selectors like .oh.JZI.J-J5-Ji.TI-ax7

Note: http://anurag-maher.blogspot.co.uk/2012/12/developing-google-chrome-extension-for.html (he also does this, he also uses such confusing 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.JZI.J-J5-Ji.TI-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 user interface elements, so my functions look initially)

---

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

There are sidebar gadgets and contextual gadgets, but they don’t offer what I want to achieve.

Gmail Labs is a testing ground for experimental features that aren't quite ready for prime time. They can change, break or disappear at any time.

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

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

Help is needed? Find us in qaru under the gmail tag.

---

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

(I looked at many “similar questions,” and I'm afraid my options here are limited, but I would be very happy if I strengthened my enlightenment on me)

Answer 1

It looks like you have not stumbled upon the gmail.js project. It provides a rich API that allows you to work with Gmail. However, please note that this project is not supported by Google. This means that any changes to Gmail may violate your extension, and there is no guarantee that anyone will want to update gmail.js to fix these changes.

Answer 2

Just stumbled upon this blog post from Square Engineering Team http://corner.squareup.com/2014/09/a-different-kind-of-scaling-problem.html

This is a chrome extension that displays contact information in the Gmail sidebar when a user directs a contact via email. (Same as Rapportive)

The following is the content of the application script. It works as follows:

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

• Get the DOM element containing the email address. I found out that this selector works for the sender: $(".acZ").find(".gD")

• Insert an element in the sidebar using injectProfileWidget()

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

Answer 3

There is a good API for interacting with the Gmail DOM:

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

The getting started example helps you add a button to the layout 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!') } }) }) })