I'm trying to develop a chrome extension to interact with an email inside gmail inbox. Currently I'm using page action to show the icon of the extension and when user clicks on the icon, the plugin assumes the opened page is an email inside gmail inbox and it interacts with the email.

But it seems to be better if I can add a button to gmail web interface instead of the page action icon like below (notice the add button added by a plugin called todoist).

One way to do this is to observe html in other buttons provided by gmail, and injecting a new button with the content script. But the classes used in elements in gmail seems to be have no verbal meaning and not sure the classes change dynamically. For example to define an icon, the html is like below.

<div class="ase T-I-J3 J-J5-Ji"></div>

Injecting may not work if the classes are changing dynamically. Also the button structure may change if the user changes different themes. (Or may be they are always the same and I can continue injecting)

Is there a standard way to do this? Or else, a stable way to inject the button?

Note: Contextual gadgets is not a solution as I want to get the attachment.

I'm trying to develop a chrome extension to interact with an email inside gmail inbox. Currently I'm using page action to show the icon of the extension and when user clicks on the icon, the plugin assumes the opened page is an email inside gmail inbox and it interacts with the email.

But it seems to be better if I can add a button to gmail web interface instead of the page action icon like below (notice the add button added by a plugin called todoist).

One way to do this is to observe html in other buttons provided by gmail, and injecting a new button with the content script. But the classes used in elements in gmail seems to be have no verbal meaning and not sure the classes change dynamically. For example to define an icon, the html is like below.

<div class="ase T-I-J3 J-J5-Ji"></div>

Injecting may not work if the classes are changing dynamically. Also the button structure may change if the user changes different themes. (Or may be they are always the same and I can continue injecting)

Is there a standard way to do this? Or else, a stable way to inject the button?

Note: Contextual gadgets is not a solution as I want to get the attachment.

• javascript
• html
• google-chrome
• google-chrome-extension
• gmail

• 1 indeed the classes and ids m change very regularly and you wil have to spend time constantly patching it. the gmail page changes often. – Zig Mandel Commented Aug 8, 2015 at 4:12
• The button divs have an act attribute which might contain a relatively permanent action ID. – woxxom Commented Aug 8, 2015 at 11:02

2 Answers 2

You should use gmail.js add_toolbar_button method using this you can add a custom button in Gmail inbox.

gmail.tools.add_toolbar_button('content_html', function() {
  // Code here
}, 'Custom Style Classes'); 

There are various helper methods through this you can easily build an extension top on Gmail Inbox.

You can also use InboxSDK to inject buttons in Gmail. Code snippet:

InboxSDK.load(1, 'YOUR_APP_ID_HERE').then(function(sdk){
  sdk.Compose.registerComposeViewHandler(function(poseView){
    console.log("pose view exists!");
  });
});

I know this question is 4 years old but this tool could be useful for someone who is looking for a solution to inject buttons in gmail.