How to Create a JavaScript Bookmarklet?

A JavaScript 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 were 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.

Read Also: How to create Timers Using JavaScript?

How to Create a JavaScript Bookmarklet?

To create bookmarklet on your browser, either you can create an 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 a new bookmark with add new bookmark option on the browser.

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

<a href="javascript:alert(new Date().toLocaleTimeString());"> 
check the cuttent time</a>

To check the bookmarklet for your browser, save on bookmark the link given below which is generated from the code given above. You can do it just dragging and dropping the link on your browser’s bookmarks bar.

check the current time

Another example of JavaScript: URL link in a <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>

Read Also: How to use Round, Random, Min, and Max in JavaSript

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 browser’s bookmarks and check it by lunching the bookmark.

Read Next: How to Click Button Using JavaScript?