How to correct bad page design with Greasemonkey and Tampermonkey

Greasemonkey and Tampermonkey
Credit: Pixabay

Create Greasemonkey and Tampermonkey extension scripts to modify web content.


Recently, Google made a change to its homepage -- replacing the Google+ username link with a username label that does nothing. And, although a user can still navigate to Google+ via the Apps menu, the net effect of Google's latest change was to swap a convenient shortcut for the inconvenience of an extra step.

Hobbled username link now a label

I've mentioned Google's quirky UI changes in the past, once going so far as to create a special Stylebot CSS theme to correct a series of misguided design changes inflicted on Google+ (links on a page should be readily visible -- not hunted).

Most of the time, the CSS changing powers of Stylebot are sufficient enough to correct most design goofs. But changes to CSS can't fix every problem -- sometimes more powerful tools are called for: Enter Greasemonkey and Tampermonkey.    

Funky monkeys

Firefox's Greasemonkey add-on -- along with its Chrome cousin named Tampermonkey -- permit users to modify web pages with JavaScript. In short, these tools allow modification of a page's Document Model Object (DOM) elements. However -- as a general rule -- I use Greasemonkey and Tampermonkey only if modifications cannot be accomplished with CSS tweaks using Stylebot.

But in order to modify a specific page element, you first need to know its properties. Using the example mentioned earlier, I right-clicked the name label and chose the Inspect element option from the dropdown menu.

Inspect element

Chrome (or Firefox) will display an Elements section at the bottom of the window as well as highlight the selected page element with a tooltip. So, based on the information provided by Inspect element, we know the name label is actually a <span> tag, and that "gb_la gb_r" is the CSS class of the <span> object. 

Element information

I then returned to the top section of the browser window, right-clicked the page again and selected View page source. In the page source window, I searched the source (Ctrl-F) for other instances of the "gb_la gb_r" class name. Search found no other elements on the page matching that particular class. 

View source

Armed with this information, I then opened Tampermonkey to create a new user script.

Add a new script

Tampermonkey opened an editor window, adding a default UserScript template. The variables in the UserScript section are used by the Tampermonkey to assign names, description along with other properties that define how a script executes.

Try to fill-in as many of the @ variables as you can. For the @include variables, I used the Magic TLD trick so the script will run not only for the page, but on other Google TLDs such as Also worth mentioning, Tampermonkey will gripe if the @grant variable is missing from this section -- set this value to none if you are unsure what to use.

Editing userscript section

After editing the UserScript section, I wrote JavaScript to add a link to Google+, modifying the innerHTML property for the username <span> label.  

Writing JavaScript

Next, I validated the script using Tampermonkey's Run syntax check toolbar button. With no errors found, I then saved the script.

Run syntax check

Finally, I opened the Installed userscripts tab, and clicked the script's checkbox to enable.

Enable the installed userscript

And, voila! Opening in Chrome runs the Tampermonkey script, adding the "missing link."

Link restored
Paste the text inside this file into a new Tampermonkey userscript.

This article is published as part of the IDG Contributor Network. Want to Join?

ITWorld DealPost: The best in tech deals and discounts.