facebook-squared twitter-squared rss-squared gplus-squared

What Is Bookmarklet

Written by on 23 January 2016

Saturday

23

January 2016

0

COMMENTS

Bookmarklet explained with simple example

Bookmarklet is just a piece of code that sits in your browser’s bookmark bar, whose job is to add some kind of interactivity to the currently loaded webpage. They are one-click tools that differs them from extensions, because they work cross platform, cross browser. As they are treated as bookmarks, can easily be moved from browser to browser. They can be used to all the way from logging a simple console message to changing the appearance of website or in case of WhatFont ,which uses bookmarklet (along with it’s browser extenstions) it to display information of fonts used in the page. Today we are going to create a simple one.

Methods to create a Bookmarklet

 

  • Via Anchor Tags

Normally they are tend to appear in the form of anchor tag.

<a href="javascript:void;">Example 1</a>

Example 1

All the magic happen after the string literal “javascript:”, because it tells the browser that rest of the string is an executable JavaScript application. Above code snippet is most commonly used example which prevents default behavior of the link, i-e linking to other page. So clicking on “Example 1” will do nothing. (Normally empty links will jump you back to the top of the page. I have explained it further here in scroll to top article)

Now let’s write some Executable JavaScript Code in next example.

<a href="javascript:(function(){ console.log('Bookmarklet Launched!') })();">Bookmarklet</a>

Example 2

Here, all the code inside the curly braces {}, is the heart and soul. Dragging “Example 2” link in the empty space of bookmarks bar or saving as a bookmarks will make it a Bookmarklet. Clicking on Example 2 either from here or from bookmarks bar will log a message “Bookmarklet Launched” in browser console on any website.

Bookmarklet How to create a simple one

  • Via Bookmarks Manager

We can also create them via browser’s bookmark manager using following steps.

  1. Create a new bookmark using bookmark manager.
  2. Name the title (Base on the action it will perform).
  3. Fill the Url or Address field with the href value of the above code snippet (without the enclosing “” quotes).

 Conclusion

That’s pretty much it for creating a simplest of bookmarklet. We will expand on this example in the future and will you let you show how it can solve real problems. How are you going to use them to solve your problems?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: