Dictionary Bookmarklet: popup a definition of any word in your browser

I just tried a google search for “dictionary bookmarklet” hoping to find a simple bookmarklet that would let me highlight a word on a page and get a definition for that word in a popup. I was unhappy with every result I clicked on, so (continuing with my recent bookmarklet theme) I decided to write one myself. This is how it works:

Highlight a word on a page
Click on the bookmarklet
A popup window (of google ~~mobile~~ search) shows you the definition

To install it, just drag the Define Bookmarklet into your browser bookmarks bar (the space underneath the url) and you can click on it anytime—or test it out by clicking it on this page.

Notes:

If you don’t highlight a word ahead of time, it let’s you type in any term you want
Even if the word doesn’t show up in the dictionary, Google should hopefully return some relevant results
Edit: the google search URL www.google.com/m no longer exists, so I reverted to the non-mobile URL :(

Also, here’s the code:

javascript:(function(t,u,w){
  t = ''+(window.getSelection ? window.getSelection()
   : document.getSelection ? document.getSelection()
   : document.selection ? document.selection.createRange().text
   : '');
  u = t ? 'http://www.google.com/search?q='+encodeURIComponent('define:"'+t+'"') : '';
  w = window.open(u, '_blank', 'height=450,width=400,scrollbars=1');
  w.focus && w.focus();
  if (!t) {
    w.document.write('<html><head><title>Define...</title></head><body style="padding:1em;font-family:Helvetica,Arial"><br><form action="http://www.google.com/search"><input id="q" name="q" value="define:">&nbsp;<input type="submit" value="Go"></form><p style="font-size:.75em;color:#999">Note: you can also choose a term beforehand by highlighting it on the page!<br><br>Created by <a target="_blank" href="http://mrcoles.com/blog/dictionary-bookmarklet-popup-definition-browser/">Peter Coles</a></p><script>var q = document.getElementById("q"), v = q.value; q.focus(); q.value=""; q.value=v;</script></body></html>');
    w.document.close();
  }
})()

Note: the astute reader will notice that the actual bookmarklet code is slightly different. I ran all the strings that had double quotes, <, and > characters in them through escape and put them in a string wrapped in the unescape function. This let’s me safely insert the code into the href of an a tag.

1. Harold wrote:

Nice, that's really useful!

One annoyance is that when I drag the bookmarklet to the bar, at least in Chrome, it has no name. (Same with the earthquakelet.) Other bookmarklets don't seem to have this issue... so figure it out! o/\o

Posted on 6 September 2011 at 11:09 AM | permalink

2. peter wrote:

Yeah, that's a bug in Chrome :'(

http://code.google.com/p/chromium/issues/detail?id=91624

Posted on 6 September 2011 at 2:09 PM | permalink

3. Benjamin Gleitzman wrote:

Good stuff! The bookmarklet doesn't work in mobile safari. When the bookmarks window is activated, the highlighted area is cleared. Boo apple.

4. peter wrote:

Ugh… but it at least gives you the option to enter your own term? Looks like there isn’t a great solution for this issue apart from designing it differently for mobile.

5. peter wrote:

Harold—the latest Chrome has fixed the problem with the bookmarklet name getting lost.

Posted on 25 September 2011 at 7:09 PM | permalink

6. ron wrote:

interesting stuff htnaxx

Posted on 20 December 2011 at 3:12 AM | permalink

Mr Coles Peter Coles’ blog