how to create a bookmarklet (aka smart bookmark)

1. What is a bookmarklet?
A bookmarklet is basically a script which is executed by open a  special link. It can appear as bookmark or as an address in a link (href=”bookmarklet”) but not not as an address in the URLbar (prohibited by default). The script programming language is in most cases javascript (don’t know if there are other ones).

2. How to use a bookmarklet?
The only problem to use a smart bookmark is the raw access to the address bar of a link. Many browsers have lots of fancy interfaces but just one hidden interface for entering the address directly.
In firefox it is the right click on the bookmark bar or an Odyssey through the bookmark menu

3. How can I program a bookmarklet?
Before I come to an example in javascript some important points for programming a bookmarklet:

  1. you have access to the current page (or if somebody drops a page on the bookmarklet to this page)
  2. javascript knows lambda functions (function (){………})
  3. but sadly not sleep (use setTimeout instead)
  4. you can define functions (with names) in other functions (including lambda functions)
  5. you can use just one single line delimited by ;
    But programming isn’t easy this way. Write normal javascript code and use a converter (or convert by hand).
    For example my converter (; aren’t set on line breaks;this means you need to set them manually):
    https://github.com/devkral/librarything_link/blob/master/convert_to_bookmarklet.sh
  6. ‘javascript:’ can have a strange construct:  javascript:(function(){……})()
  7. You can test your scripts before converting or squashing on one line in mozilla scratchpad (firefox->scratchpad (DE: Notizblock)

ok, now a little example:

javascript:alert("Hello World")

now a bit more complicate script which doesn’t change the address bar

javascript:(function(){alert("Hello%20World")})()

and in the end a timeout driven function

javascript:(function(){
function d(){
alert("Hello%20World")};
window.setTimeout("d()",1000);
}
)()

squashed to one line:

javascript:(function(){function d(){alert("Hello%20World")};window.setTimeout("d()",1000);})()
Advertisements

Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s