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.
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.
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.
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.
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.
Armed with this information, I then opened Tampermonkey to create a new user 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 Google.com page, but on other Google TLDs such as Google.co.uk. 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.
Next, I validated the script using Tampermonkey's Run syntax check toolbar button. With no errors found, I then saved the script.
Finally, I opened the Installed userscripts tab, and clicked the script's checkbox to enable.
And, voila! Opening Google.com in Chrome runs the Tampermonkey script, adding the "missing link."
This article is published as part of the IDG Contributor Network. Want to Join?