66

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:

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)

2
  • 1
    I wish I could bounty a question :)
    – brasofilo
    Dec 26, 2015 at 16:05
  • @michal This is a great question. I'm very interested to know what you ended up building, and in particular I'm wondering if you have any suggestions about open-source Gmail Chrome extensions related to: softwarerecs.stackexchange.com/questions/35037/… Thanks!
    – Ryan
    Apr 10, 2017 at 23:16

3 Answers 3

44

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.

4
  • 1
    You are so right, I didn't know about this one. When using search engine for terms Chrome Gmail Extension there were so many results from top media sites... I should probably limit query to github :) Apr 20, 2014 at 8:49
  • 1
    Looks like its not being maintained anymore.. basic stuff like get.email_id() is not working for me. Jul 26, 2016 at 22:49
  • 1
    @UriAbramson looks healthy to me - github.com/KartikTalwar/gmail.js/pulse Jul 26, 2016 at 22:56
  • @KonradDzwinel maybe its related to #261 fix.. its not working in a regular message windo when its opened (issue #288). If its still maintained, its great news!! but this specific thing is still not working for me, unfortunately. I think that as a result a lot of dependant funcitons like body() content() etc are also not working... Jul 27, 2016 at 6:35
9

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!')
            }
        })
    })
})
1
  • Hi Danny, I am trying to use inboxSDK but I am completely new in this. I wanna track email, For that I need messageID of every new message .I tried GetMessageID() function but its now working.Need your small help.Please check this link . stackoverflow.com/questions/57933735/…
    – Arjun
    Sep 15, 2019 at 17:37
7

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 :

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

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

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.