Add custom button to gmail inbox with chrome extension

Question

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.

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
– 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
– woxxom, Commented Aug 8, 2015 at 11:02

Divyesh Kanzariya · Accepted Answer · 2018-11-19 04:23:05Z

4

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.

answered Nov 19, 2018 at 4:23

Divyesh Kanzariya

3,8093 gold badges48 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Vinci Over a year ago

I tried to add this method, using a boilderplate also linked in this repo: github.com/josteink/gmailjs-node-boilerplate but I am not able (and to be honest I have no idea where should I add it) to run the given method. From what I understand it should be in src/extension.js method, but it's not being called.

Divyesh Kanzariya Over a year ago

you need to add this into Content scripts

Vinci Over a year ago

Yeah, thank you, it already works for me, but right now I have no idea what function should I use to make a click of a button to sort the emails by the most frequent sender. Not sure if there is an option like that available and if it's not already deprecated. Do you have any knowledge about that?

Divyesh Kanzariya Over a year ago

I think sort is not possible through gmail.js as I know

MilanNz · Accepted Answer · 2023-01-25 16:59:18Z

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(composeView){ console.log("compose 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.

Collectives™ on Stack Overflow

Add custom button to gmail inbox with chrome extension

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related