Bookmarklets gone Awry in Firefox

Bookmarklets are simple, right? You put a snippet of javascript into a bookmark prepended by ‘javascript:’, and then you can click your bookmark to do some javascript magic on your page. For example, if you create a bookmark with this URL (Basic Bookmarklet Demo):

1
javascript:alert('Hello World');

You will see a ‘Hello World’ alert when you click the bookmark (don’t forget to turn on your bookmark toolbar in your web browser so you have a place to put your bookmarklets).

There are all sorts of interesting bookmarklets out there. You can have bookmarklets that help you analyze your DOM, clean up a page to make it more readable, or even share on Facebook.

However, as with all things related to web development, things don’t always work the same on all web browsers. I was recently working with a bookmarklet that needed to wait until the page was finished loading before it did anything, so I used the setTimeout method, like this (Broken Bookmarklet Demo{alert( “Demo for Broken Bookmarklet - drag to bookmarks bar to test”)):

1
javascript:window.setTimeout(function(){alert('Hello World');},0);

This worked great! And then I tried it on Firefox, and it didn’t work. On Firefox, it would cause my entire page to disappear and be replaced with an integer that varied between 2 and several thousand. Hmm… that’s weird.

After digging around, I found the solution in a helpful post on StackOverflow. It turns out that in Firefox, if a bookmarklet returns a truthy value, the page is replaced with the value, which is the behavior I was seeing. The SetTimeout function returns an integer that can be used to later control the waiting timer. Firefox saw the integer, a truthy value, that was returned from the bookmarklet, and replaced the page with that integer.

Now that we know why Firefox is behaving strangely, we can fix the problem. All we have to do is get the bookmarklet to return a falsy value. So we’ll add void(0); to the end of our bookmarklet (Fixed Bookmarklet Demo{alert( “Demo for Fixed Bookmarklet Demo - drag to bookmarks bar to test”)).

1
javascript:window.setTimeout(function(){alert('Hello World');},0);void(0);

Our bookmarklet is now fixed, and works properly in Firefox.