Thursday, November 22, 2007

GMail upgrade breaks Greasemonkey Ad Remover scripts, adds API for Greasemonkey

On October 29 GMail did an upgrade that changed many of the internal HTML elements used to display email. i.e. many of then element id's and class names changed. Unfortunately this broke some of my favorite Greasemonkey scripts such as GMail Ad Remover (removes the Sponsored Links) and GMail Full Width (removes Sponsored Links and widens the conversation area by moving buttons around).

Some of the other fans of the ad remover scripts also noticed it had been broken. Very interestingly the GMail developers had this to say:

While we (like most web services) don't officially support third-party extensions like Greasemonkey scripts, we realize that some of our most active users want to write and run them. Because these scripts directly modify a web service's code rather than using a stable API, they tend to be fragile to even small changes in a web app's code (and can even create bugs in the web app itself).

To make this easier on our Greasemonkey users, we've recently added an experimental Gmail/Greasemonkey API that should make these types of scripts easier to write and more robust to code changes.

Wow! Of course Google are not under any obligation to support third-party extensions (after all you can't call HTML page layouts an "external API"). It is pretty impressive that a company as big as Google are attempting to provide a compatibility layer for a third-party extension they have no financial interest in.

So what does a Greasemonkey script that hides GMail ads and uses this new API look like? This does the trick:

gmailadremover.user.js

// ==UserScript==
// @name Gmail Ad Remover
// @namespace http://robertmaldon.blogspot.com/gmailadremover
// @description Remove the Sponsored Links from GMail
// @include http://mail.google.com/*
// @include https://mail.google.com/*
// ==/UserScript==

window.addEventListener('load', function() {
if (unsafeWindow.gmonkey) {
unsafeWindow.gmonkey.load('1.0', function(gmail) {
function removeAds() {
if (gmail.getActiveViewType() == 'cv') {
var sponsored = gmail.getConvRhsElement().lastChild;
sponsored.style.display = 'none';
}
}
gmail.registerViewChangeCallback(removeAds);
removeAds();
});
}
}, true);


While the ads are hidden, however, the table column that held the ads - and the "Print all", "Expand all", etc buttons - still take up a lot of space. So a quick and dirty GMail Full Width script that hides the whole column (including the buttons unfortunately) looks like:

gmailadcolumnremover.user.js

// ==UserScript==
// @name Gmail Ad Column Remover
// @namespace http://robertmaldon.blogspot.com/gmailadcolumnremover
// @description Remove the Sponsored Links table column from GMail
// @include http://mail.google.com/*
// @include https://mail.google.com/*
// ==/UserScript==

window.addEventListener('load', function() {
if (unsafeWindow.gmonkey) {
unsafeWindow.gmonkey.load('1.0', function(gmail) {
function removeAdColumn() {
if (gmail.getActiveViewType() == 'cv') {
var sponsored = gmail.getConvRhsElement().lastChild;
var sponsoredColumn = sponsored.parentNode.parentNode;
sponsoredColumn.style.display = 'none';
var convTable = gmail.getConvRhsElement().parentNode.parentNode.parentNode;
convTable.width = '100%';
}
}
gmail.registerViewChangeCallback(removeAdColumn);
removeAdColumn();
});
}
}, true);


When I get some more time I'll have to explore the power of this new API - and write a proper full width script that moves the buttons to a different location!

3 comments:

erik said...

Nice. I love the new format, but really missed the "full width". Any ideas on how to get the "other" buttons moved?

Joel said...

stumbled across your post and figured i'd pass on a link to a script i wrote that gets rid of the adds and shifts those links over to the left hand side, under the navigation menu.

http://userscripts.org/scripts/show/15739

Robert Maldon said...

Thanks Joel, that's a very creative place to put the thread buttons. I think I still prefer the old GMail Full Width way where the buttons are at the top of the post - in fact I would like them to be at the top and bottom. I'll play around with that when I get some time, but meanwhile I'll try your script to see if the placement grows on me :)