Creating Javascript Bookmarklets

Javascript "Bookmarkets" are mini applications that are run form your browsers bookmark menu. When you click them, they don't actually take you to a url, but they run code instead. Bookmarklets can be used for a number of purposes. They can:

  • Pass data from the current site to another url
  • Modify the current page by addding/removing/changeing elements
  • Work behind the scenes, like clearing your cookies or setting preference

We recently saw Kathack.com, which introduces a Katamari ball to the website you're on, which uses a bookmarklet to initiate the script. Bookmarklets can be used as games, tools, or services. Here's some examples:

Bookmarking:

Tools:
  • Sprite Me computes all images on the page into css sprites
  • Readability makes websites more readable (extension)
  • Darken darkens the website you're on.

Games: (cool!)
  • Asteroids destroy the current webpage with a spaceship
  • Katamari Hack mess up the page with a Katamari Ball (previously posted)
  • Url-Hunter an entire game played in the address bar (not really a bookmarklet, but it is javascript)
  • Marklets Game simple game where you knock-out bookmarks.


How to start


The first thing you need to know is that when you make a bookmarklet, you prepend javascript: to the beginning of the href of the link, like so:
<a href="javascript: alert('Hi There!');">Marklet</a>

run this code

Use an Anonymous Function as Code Wrapper


Because there is probably javascript running on the page you're on, it's necesarry to create your own scope so you don't have any colissions with variables you define in your code. Wrapping your code in an anonymous function allows you to define any variables you need and runs your code in its own CONTEXT. A context implies that the code only knows about itself, or any variables you explicitely send to it.

javascript:(function(){ alert('My Code'); })();

run this code

As you can see, it can get pretty tricky to write javascript in one line, but it's not necesarry. You can split up your code into multiple lines, and then run it through a minifyer. Putting your code into this JS Minifyer will condense it to a single line.

Remote Source Code


Sometimes it's easier to store your javascript on your own server. In our case, we'll use our own foloders on the BAVC servers. Then, our bookmarklet loads our javascript from our server and inserts it into the page. Therefor, your bookmarklet might look like this:

javascript:
    var i, s,
    sc = [ 'http://instructors.bavc.org/gdunne/marklet.js'];
    for ( i in sc ) {
        s = document.createElement('script');
        s.src = sc[i];
        document.body.appendChild(s);
    }
    void(0);

And, after it's been minified:
javascript:var i,s,ss=['http://instructors.bavc.org/gdunne/marklet.js'];for(i in ss){s=document.createElement('script');s.src=ss[i];document.body.appendChild(s);}void(0);

Let's go over what this code is doing. The most important is the ss variable, which is an array of scripts that you want to add to the page. Then, we loop through this array and create <script> elements document.createElement('script');, and append them document.body.appendChild(s) to the current document. If there's any initialization functions in those scripts, they will be run as soon as they are added to the page. We could also include a number of scripts by adding to the sc[] array. Say, if we needed jQuery, we could just add a link to it like so:

javascript:
    var i, s,
    sc = [
    'http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
    'http://instructors.bavc.org/gdunne/marklet.js'
    ];
    for ( i in sc ) {
        s = document.createElement('script');
        s.src = sc[i];
        document.body.appendChild(s);
    }
    void(0);

Note, that we add it before our script so we're sure it's available when our code runs.


So, let's make one!


Some bookmarklet examples. You can just copy and paste these into a URL to test them.

Change the current background color:

javascript:void(document.bgColor = prompt(' Type a hex color, like #4545f5, or just type one.', 'red' ));

run this code

This may not work on this current blog as bgColor is depricated, so try copying that code and running it on another, simpler website as an example.

In this code we prompt the user to fill in the background color, and when they reply, we set the documents background color to their response. bgColor is actually a depricated function, but it's used for the sake of example. A cleaner way would be to include another library, like JQuery.

However, if we include jquery remotely, we might as well store our script remotely instead of coding it into the bookmarklet itself. This makes development easier because then if anyone else has installed your bookmarklet, they are retrieving your code from your server, keeping the program up to date.

Include Jquery and run a script from a remote server that uses jquery to modify the page.

javascript:
    var i, s,
    sc = [
        'http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'
    ,   'http://media.quilime.com/files/src/js/marklet.js'
    ];
    for ( i in sc ) {
        s = document.createElement('script');
        s.src = sc[i];
        document.body.appendChild(s);
    }
    void(0);

run this code

The above script includes Jquery and then includes my javascript from my own server. The source of marklet.js is:
// test bookmarklet
(function(){

    $('*').css({
        'font-size' : '11px'
    ,   'font-family' : 'monospace'
    ,   'background-color' : '#232323'
    ,   'color' : '#00ff00'
    });

})();

...which turns the current page into hacker l33t style.

Next Steps

Spend some time getting familiar with creating bookmarklets, and then create a few that modify the current page. Then when you're getting comfortable with the inline coding inside a bookmarklet, try including a remote script from your BAVC folder. What will your bookmarklet do?

Resources: http://fmarcia.info/jsmin/test.html
Labels: , , , ,