How to develop Chrome extension for Gmail?

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.

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

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.