How to develop Chrome extension for Gmail?

Mars Robertson

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)

Konrad Dzwinel

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

develop screenshot chrome extension

From Dev

How to save gmail as .eml file using gmail api and chrome extension?

From Dev

Chrome extension for Gmail

From Dev

Gmail Chrome Extension "chrome.extension" undefined

From Dev

Gmail Chrome Extension and document.readyState

From Dev

addeventlistener not catching event in chrome extension for gmail

From Dev

How to develop a Google chrome theme?

From Dev

Develop a Chrome extension that overrides SSL certificate exception for a self signed certificate

From Dev

Using Chrome auth to access gmail api inside of a Chrome Extension

From Dev

GMail API access from chrome extension? 403 Forbidden

From Dev

Multiple jQuery versions overwriting asynchronously in gmail chrome extension

From Dev

How is the Chrome Extension ID of an unpacked extension generated?

From Dev

How to develop custom filters for the Imagus hover zoom extension?

From Dev

How to reload a chrome extension automatically?

From Dev

How to insert HTML with a chrome extension?

From Dev

Chrome extension how to change language?

From Dev

How protect chrome extension of reupload

From Dev

How to uninstall this Google Chrome extension?

From Dev

How to reload a chrome extension automatically?

From Dev

How to create hidden chrome Extension

From Dev

How protect chrome extension of reupload

From Dev

How to launch a Chrome App from a Chrome Extension?

From Dev

how to change default email client to gmail in chrome

From Dev

How to develop (NPAPI) COM plugin for Chrome, Firefox, Safari

From Dev

How to develop an Android App that can run on Chrome OS?

From Dev

How to develop an Android App that can run on Chrome OS?

From Dev

chrome extension: getting user's email address who logs into the google account/gmail account

From Dev

Getting 401 status while sending email using Gmail API in Chrome extension

From Dev

Chrome extension: How does honey extension dropdown upon checkout?

Related Related

  1. 1

    develop screenshot chrome extension

  2. 2

    How to save gmail as .eml file using gmail api and chrome extension?

  3. 3

    Chrome extension for Gmail

  4. 4

    Gmail Chrome Extension "chrome.extension" undefined

  5. 5

    Gmail Chrome Extension and document.readyState

  6. 6

    addeventlistener not catching event in chrome extension for gmail

  7. 7

    How to develop a Google chrome theme?

  8. 8

    Develop a Chrome extension that overrides SSL certificate exception for a self signed certificate

  9. 9

    Using Chrome auth to access gmail api inside of a Chrome Extension

  10. 10

    GMail API access from chrome extension? 403 Forbidden

  11. 11

    Multiple jQuery versions overwriting asynchronously in gmail chrome extension

  12. 12

    How is the Chrome Extension ID of an unpacked extension generated?

  13. 13

    How to develop custom filters for the Imagus hover zoom extension?

  14. 14

    How to reload a chrome extension automatically?

  15. 15

    How to insert HTML with a chrome extension?

  16. 16

    Chrome extension how to change language?

  17. 17

    How protect chrome extension of reupload

  18. 18

    How to uninstall this Google Chrome extension?

  19. 19

    How to reload a chrome extension automatically?

  20. 20

    How to create hidden chrome Extension

  21. 21

    How protect chrome extension of reupload

  22. 22

    How to launch a Chrome App from a Chrome Extension?

  23. 23

    how to change default email client to gmail in chrome

  24. 24

    How to develop (NPAPI) COM plugin for Chrome, Firefox, Safari

  25. 25

    How to develop an Android App that can run on Chrome OS?

  26. 26

    How to develop an Android App that can run on Chrome OS?

  27. 27

    chrome extension: getting user's email address who logs into the google account/gmail account

  28. 28

    Getting 401 status while sending email using Gmail API in Chrome extension

  29. 29

    Chrome extension: How does honey extension dropdown upon checkout?

HotTag

Archive