Blagging Bookmarklets

OK, having not had so much time recently to play with bookmarklets, I finally came to the conclusion that I wasn’t going to be able to finish this post as I first intended. As a precursor to developing some Firefox extensions, bookmarklets was never going to cut it anyway. I just wanted to brush up on some JavaScript – I’ve been spending more time working on developing my skills in accessible design than with my geeky programming roots. Anyway, I’m yet to do anything even remotely complicated with bookmarklets, but I thought I’d share what I’ve been up to recently.

WDG Validator

Rich Pedley (a.k.a. Elfin) got in touch with me to solve a little problem he was having using the WDG validator to validate documents that have a custom XML DTD. You need to add “xml=yes” into the URL for the validator as it doesn’t give you the option on the website. Rich wanted a bookmarklet that would do this for him, so this is what I knocked up:

Older browsers may not understand the encodeURIComponent() function, so you might need to use escape() instead.

Personally, I’ve preferred to add these validation tasks as tools on the Web Developer extension toolbar, as I tend to use that for much of my day-to-day meddling on the Web.

Check highlighted word

OK, here’s a handy one: a spell checker for individually selected/highlighted words. I wanted to be able to check the spelling of words in a post before I sent them. I was originally inspired to write a Firefox extension for this, but I wanted to try a bookmarklet first. The thing is, you can’t actually do what I was trying to do with a bookmarklet. You cannot identify which textarea element on a page has focus. The JavaScript in a bookmarklet is run after a page has been rendered and after any events occur on the page, so there’s no way to add a listener for focus events. Feel free to prove me wrong.

Anyway, I did come up with something. The following bookmarklet checks the spelling of highlighted words in every textarea element on a page. If you select more than one word in any textarea element, it will only check the first word in the selection. It won’t do anything unless you have selected some text.

The problem with this is that if more than one textarea element has some highlighted text, they all get checked. This is why I wanted to detect which textarea element had focus. I did try offering the option to choose which word to check when more than one textarea element has a selection. The code for this got rather long, breaking the 255-character limit allowed for bookmarklet code. It’s possible to use a bookmarklet to send information to an external JavaScript file hosted on a server, but that just seems a little over the top for something so simple.

So, at this point I was back to my original plan: write a Firefox extension. You can easily add this sort of thing to a context menu. However, a good Google goes a long way. I found that someone had already done what I wanted to do. In fact, several people had. In the end, I decided that I would try my hand at writing my own extension anyway, but I’ll save that for a future post.

Creating your own bookmarklets

Here are a couple of pointers that I’ve found useful while playing with bookmarklets.

If you’re making your own bookmarklets, you can use whatever JavaScripts works for you, but you should really try to use JavaScript that works in most browsers. For example, you should avoid using proprietary methods and statements such as document.all. Also, some older browsers don’t like some of the newer methods. For example, as I mentioned earlier, instead of using encodeURIComponent() to encode a URI, you may need to use the older encode() method instead.

Another thing to watch out for, when using XHTML sent as application/xhtml+xml, you should be using createElementNS() and not createElement() as you would for any document sent as text/html.

A common thing for a bookmark to do is open some information about the current page in a new window (for example, using open()). It should be noted that the name you give to the window should not have any spaces or other special characters in it. Firefox et al won’t care about it, but IE will throw an error and your bookmarklet won’t work. It might seem a simple thing to point out, but it can be a difficult error to debug… this will save you some head-banging.

For example, the following two lines won’t work in IE:

open('http://dotjay.co.uk/blog/','Dotjay blog','resizable=yes,width=700,height=500')
open('http://dotjay.co.uk/blog/','Dotjay-blog','resizable=yes,width=700,height=500')

You must use something like this:

open('http://dotjay.co.uk/blog/','DotjayBlog','resizable=yes,width=700,height=500')

Also, check out the “Crunchinator” – an online tool that will take your normal JavaScript formatting and remove all the crap you don’t need to give you a single line of JavaScript suitable for your bookmarklet.

Getting a good blogging

After writing most of these posts on bookmarklets, I got up-to-date with some blog reading and found that Gez has been discussing the creation of bookmarklets recently too! He goes more in-depth into creating a bookmarklet that will allow you to load a custom style sheet into the head of a document.

I also notice that Andy Budd has a list of useful bookmarklets he uses.