How to Create JavaScript Bookmarklet?

Bookmarklet is a small JavaScript code which is saved on a browser's bookmark while bookmarking JavaScript: URL. It is a mini program that can be easily launched from the browser's menus or toolbar.

The code in a bookmarklet runs as if it ware a script on a page and can query and set document content presentation, and behavior. As long as a bookmarklet does not return a value, it can operate on whatever document is currently displayed without replacing that document with new content.

How to Create JavaScript Bookmarklet?

To create bookmarklet on your browser, either you can create HTML file containing JavaScript: URL and can bookmark it right clicking on the link and selecting something like bookmark link or dragging the link to your bookmarks toolbar or you can directly add new bookmark with add new bookmark option on the browser.

Here is a simple HTML code to create JavaScript URL link with a simple JavaScript code to display current time which I have previously mentioned on my previous post "How to Write JavaScript Function as URL in Hyperlink".

<a href="javascript:alert(new Date().toLocaleTimeString());"> 
check the document without writing the docment</a>

To check bookmarklet for your browser, save on bookmark the link given below which is generated from the code given above.

Check the document without writing the document

Another example of JavaScript:URL link in an <a> tag is given below, which opens a simple JavaScript expression evaluator that allows you to evaluate expressions and execute statements in the context of the page.

<a href='javascript:
var e="", r=""; /*expression evaluate the result*/
do{
/*display expression and result and ask for a new expression*/
e=prompt("Expression:"+e+"\n"+r+"\n", e);
try{r="Result:"+eval(e);} /*try to evaluate the expression*/
catch(ex){r=ex;} 
} while(e); /*continue until no expression entered or cancel clicked*/
void 0;'> 
Javascript Evaluator </a>

Even the above JavaScript:URL is written in multiple lines, the HTML parser treats it a single line, and in a single line code comments using // will not work so comments are created using /* and */. The preview of the code above is given below.

JavaScript Evaluator

You can save this link on your browsers bookmarks and check it by lunching the bookmark.

How to Create JavaScript Bookmarklet?