Friday, June 14, 2013

What's a bookmarklet?

Since you are reading this blog article in a web browser, you are probably familiar with some functionalities of web browsers like bookmarks. In case you have been sleeping under a rock, bookmarks are shortcuts to favorite web pages, which are stored under the "bookmarks" menu of your browser. If your browser has more icons than menus, you should look for a 5-pointed-star-shaped icon. Like this:


Bookmarklets are almost like bookmarks and they are also kept in your bookmarks menu (up to you to tidy all of that with folders), but instead of containing the address of web page, they contain some code which will add more functionality to the current page. You might know that the elements of a web page are most often defined in HTML. But the programming language that allows interactions with these objects is Javascript. So, it makes sense that bookmarklets will often be Javascript instructions which either trigger actions on the page, or even define more elements in the page.

Here's a simple example. In the address bar of your browser (where the address of this page is written), replace the address of this page by the following text (mind the colon and the two double-quotes) and then type Enter:
javascript:alert("Hello")

The result is a javascript "alert" popup message like this:



It always starts with "javascript:" which informs the browser that javascript code is coming its way. Then you can add any amount of javascript code you like, separating each instruction with a semicolon. Of course, if you're not a programmer yourself, you can find bookmarklets on the Internet as you would find anything else.


One bookmarklet in particular, which inspired this article and which I want to prop is a virtual keyboard. After you've loaded a web page, ANY web page, you can click the bookmarklet in your bookmarks menu and it will summon a virtual keyboard which can interact with the text fields and forms in that page. In most cases, you don't need such a virtual keyboard because you already have a very real keyboard in front of you. But if you're buying something online and don't already have a virtual keyboard like the one provided with Kaspersky Anti-Virus, you cannot be sure whether a keylogger will intercept your key strokes and communicate your credit card number to mafias. Also, you might want to communicate with people who use a different alphabet from the English one. Maybe Arabic? Thai? Armenian? Chinese?

Here's the original webpage:


Here's after I have clicked my bookmarklet:


Here's after I have selected an input field (google search field) and activated the keyboard:


You can create the same bookmarklet by using the following code in place of a bookmark URL:
javascript:s=document.createElement('script');s.id='r6109_vkbsgp';s.type='text/javascript';s.src='http://lehollandaisvolant.net/tout/dl/virtual-kb/keyboard.js?french';document.head.appendChild(s);void(null);

You can replace "french" by whichever language should be your default language among those proposed.

I have also noted that it works better when the browser takes all the size of your screen. It might be an early bug... to be clarified with the author.

The virtual keyboard can be moved around by clicking the empty space at the top of it.

The webpage where this keyboard was posted by its author is there (French language):
http://lehollandaisvolant.net/?mode=links&id=20130613012236

Note: if you use Google's translation service to translate that page to your language of choice, the bookmarklet's script disappears, as Google doesn't know how to translate it.

Conclusion:

 - Now you know what a bookmarklet is and how it works
 - I did not cover the "security" aspect of bookmarklets and like any tool (think of knives!) they can be used for good or for bad. Lehollandaisvolant (author of the keyboard bookmarklet) is a source I trust but in case you have doubts (and Javascript understanding), he provides the source code which you're free to download, review, modify, and host on your own server.

No comments:

Post a Comment

Creative Commons License
Erik Lallemand's blog by Erik Lallemand is licensed under
a Creative Commons Attribution 3.0 Unported License.