JavaScript – Thin Light

Writing Greasemonkey User Scripts for Firefox and Chrome

Greasemonkey was initially only a Firefox extention but due to its popularity it’s quickly adopted by major browsers. Since Opera takes a very small market share, here on the topic of cross browser user scripts, I’m only going to talk about Chrome and Firefox. As for Internet Explorer, I just don’t like it.

Now Chrome doesn’t need an extension to enable user scripts. It had the functionality built in. But the way it handles the scripts is quite different from Firefox’s. At first when I wanted to test if my Greasemonkey script worked in Chrome, I tried to figure out where it stored the script. That’s the way I always do in Firefox – just right click on a user script and edit, save and refresh to see it in effect right away.

Continue reading Writing Greasemonkey User Scripts for Firefox and Chrome

Updated “Google Reader Unread Count in Gmail” Script

Nearly 3 years ago I wrote a Greasemonkey script to show Google Reader’s unread count in Gmail’s top navigation bar. I was quite satisfied at first and shared it on userscripts.org, but later I found that it was too time-consuming for me since I always wanted to monitor the number and click through when it turned “1”. So I disabled it and forgot about it.

But today after cleaning up the spam comments, I found a comment about this script. In fact someone also posted in the userscripts.org forum and even named it as one of the favourates. Thanks dear users! I knew I had to make an update and it turned out to be quite simple.

So go to the script page and install it. Should you have any problem with it, just leave a comment below.

Google Reader API changed a little

Recently I noticed that one of my Greasemonkey script called “Google Reader Unread Count in Gmail” was displaying the wrong count. I was too busy but at least two users urged me to solve the problem so I took a look into the issue, which turned out to be very simple and easy to fix.

In fact Google changed the xml schema of the output so my script was displaying a timestamp. That’s why the count look so strange :)

Now the source code on userscripts.org is updated(here’s the diff). Please update your local version if you’re facing the same problem.

DOMContentLoaded and Greasemonkey

A very common purpose of Greasemonkey scripts is modifying the DOM structure of the document, mostly adding something new.

I’ve written several scripts before and have been doing such modifications in the “load” event handler, as in this script. The problem is that “load” event is fired after all images on the page have been downloaded completely, so users may suffer a great delay to see the changes occur if there’re many images.

jQuery users know that jQuery has a function “ready”. It won’t wait for the images to load. We are writing Greasemonkey scripts, so we only care about Firefox. Firefox has a “DOMContentLoaded” event explained in detail here.

Fired on a Window object when a document’s DOM content is finished loaded, but unlike “load”, does not wait till all images are loaded. Used for example by GreaseMonkey to sneak in to alter pages before they are displayed.

So when writing my last script I tried to rely on this event:

window.addEventListener('DOMContentLoaded', function(e) {
	...
}, false);

But the codes in the handler were not executed.

I was confused and did some searching. Finally I got this page saying that “the code in a Greasemonkey user script gets invoked when the DOMContentLoaded event fires”. That explains all. The “DOMContentLoaded” event was already fired so the codes never had a chance to get executed.

The solution, of course, is pulling the handler codes out of the wrapper. If your script doesn’t really rely on the “load” event, don’t put them into its handler because there may be a obvious delay.

Toggling the Google Reader Shared Items Panel

I’m a fan of Google Reader. Although FeedDemon went free recently and it offers synchronization with NewsGator which is great attraction for many people, I still couldn’t drop Google Reader.

However the panel above the subscription list takes up too much space for my humble screen resolution of 1024×768. As Google rolled out the much complained “Friends’ shared items” feature, it became an urgent task for me to hide the annoying but never used panel. It took up 1/3 of the vertical space on the left sidebar!

No, not just hiding. Sometimes I need to clear the number of unread friends’ shared items. So it should be a “toggler” like the sidebar (or nav-bar as called by Google) toggler natively built in Google Reader. Like this:

Before hiding, with mouse hovering on the toggler:

When the panel is hidden:

You can still open it at any time. Basically, it works in the same way as the native sidebar toggler.

This is done by writing a user script for Greasemonkey, so you must have Greasemonkey installed to use it.

Get it now.

Starbox With Prototip

Today I did some modifications to Starbox to let it utilize the power of Prototip. They are both cool JavaScript libraries written by Nick Stakenburg.

Starbox prototip

How does it work? When you hover your mouse on a star, a tip shows you a brief word like “lame” or “great” which helps you with your choice. If the rating box is locked, a single tip is shown wherever you hover on the box. Check out the demo. View its source to see how to get it working.

You can globally set the tips, or specify a group of tips for each specific rating box instance.

Get it

View Diff | Download the modified version

CSS for the tip (included in the zip archive):

.prototip .startip {
 color: infotext;
 background-color: infobackground;
 border: 1px solid infotext;
 padding: 1px;
}