Changing Gmail's web interface

Question

As a part of a Firefox add-on that I'm working on, I have to change Gmail's web interface so that there are additional buttons and other features.

Any ideas on how that can be done?

Answer 1

There's no API for this (Gmail used to have a GreaseMonkey API, but they have mothballed it), so you have to do everything Ad-Hoc. Making things even tougher, most of the page is dynamically built using JavaScript, so very little of the page is constant.

What you're going to need to do is start with a GreaseMonkey script that does what you want, then use the GreaseMonkey compiler to turn it into an Extension. Or, if you only care about Firefox4+, you can use JetPack.

Use Firebug to inspect the elements you want to modify, find out the class name (used in CSS, relatively stable because Gmail themes rely on the class names), then start injecting DOM objects from there. Use Gmail's existing class names for your own objects to make them fit within the UI.

We used JQuery to make all of this easier, but it's tough to use JQuery within GreaseMonkey because there are some bugs with the latest versions. You'll need to pull a minified version (I think 1.3.2 was the last version that worked, but you can find out searching here) and inline it into your code.

It's a tough road to build these things, but people like them! Good luck!