«
»

How to do a bookmarklet with javascript

April 19, 2007, 10:15 am

The day I discovered it, I was really happy. Not happy as a fish in water but maybe happy as a cat having its meal (though it enormously depends of which cat we are talking about). Talking about bookmarklet to some of my friends, I saw that there were a lot of incomprehension about it. So I’ll begin at the beginning.

What is a bookmarklet?

A bookmarklet is a chunk of javascript code that can be added as a bookmark in your browser. When you click the bookmark, the javascript is executed. This can do a lot of things.

To add a bookmarklet, simply drag the link into your bookmark toolbar.

Why does it work?

It works because when a page is loaded in the browser (the client), it has complete power over it. Using javascript, you can do whatever you want without being stopped by some kind of security. Isn’t it wonderful?

How to do a bookmarklet

1. Write some javascript that does something useful
2. Put it in a link with the command javascript: before it and void(0); (just to be safe) after it
3. Tell the people to drag the link in their bookmark toolbar

I have to say that the javascript code has to be less than 2083 characters, the limit of characters that enters in the address bar in Internet Explorer.

How to import another JS in a bookmarklet

You want to have a complex “application” executed on a page but you can’t do it in less than 2083 characters? As I said earlier, the client has the complete power over the currently displayed page so you can import javascript files in the current page.


var script = document.createElement("script");
script.src="http://www.example.com/javascript.js";
document.body.appendChild(script);

Now, put that on one line add javascript: at the beginning and void(0); at the end and you’re set.

Now, let your creativity flow and make a great application.

Category: black belt  |  Comment (RSS)  |  Trackback
  • http://www.rubyfleebie.com Frank

    Hey, this is great. I love the fact that you can include a js source file in the bookmarklet.

  • http://www.gnucitizen.org pdp

    or you can use a tool like Technika to ease the bookmarklet development

    http://www.gnucitizen.org/projects/technika/

  • http://billy-girlardo.com/delicious/2007/04/20/links-for-2007-04-21/ All in a days work…

    [...] How to do a bookmarklet with JavaScript How do you execute a ‘complex’ app on a page utilizing less than 2083 characters (IE’s address bar limit)? Remember, the browser has complete control over a page so you can import JavaScript files into it (without being stopped by security)! (tags: Bookmarklets JavaScript Security) [...]

  • http://www.jsquickmark.com/ Lucas

    Or you can use this site:

    http://www.jsquickmark.com/

  • Corey Hollaway

    Beautiful post!! Thank you for sharing!

    For the folks that put crazy background images on their myspace/youtube pages, you can make the background white:
    javascript:document.getElementsByTagName(‘body’)[0].style.background=’#fff none’;void(0);
    :) )

  • Corey Hollaway

    Mistake on last comment! For Windows Firefox you
    need double quotes for the strings! Put all of
    the code below on _one_ line in the address
    bar or a bookmark URL:

    javascript:
    document.getElementsByTagName(“body”)[0]
    .style.background
    = “#fff none”; void(0);

  • http://www.javascriptkata.com/2007/05/01/execute-javascript-code-directly-in-your-browser/ How to execute javascript code directly in your browser | Javascript Kata

    [...] if you want to write a bookmarklet, you’ll probably use this [...]

  • http://twitter.com/mockuptiger Mockup Tiger

    can a bookmarklet read the dom structure of the current page?