What are Bookmarklets ? How to create & use them ?

OLD (UTC)

  1. page.date => Sat Apr 02 2022 20:34:05 GMT+0530 (India Standard Time)
  2. dateToISO => 2022-04-02T15:04:05.212
  3. dateToFormat('yyyy-LL-dd') => 2022-04-02

NEW (IST)

  1. page.date => Tue Dec 02 2025 17:50:40 GMT+0000 (Coordinated Universal Time)
  2. dateToISO => 2025-12-02T23:20:40.787
  3. dateToFormat('yyyy-LL-dd') => 2025-12-02

Bookmarklets are browser bookmarks that execute JavaScript code instead of navigating to a new page. They are also known as "applets", "favlets", and "javascript bookmarklets". They often used to add additional functionality to browsers.

What a bookmarklet can do?

Since bookmarklets are JavaScript code, their possibilities are endless, they can do pretty much anything that you can imagine within the browser context.

For a normal user

They can do various things like:

  • Find & show all links of available video, audio, image, and other files.
  • Download video or convert them to audio from YouTube, Dailymotion, Vimeo and other sites.
  • Search current product on Flipkart, Amazon, eBay, and other sites.
  • Convert currency to your preffered currency.
  • Search current query on other serches engines.
  • Search previous version of page on Internet Archive.
  • Share the page on any social network.
  • Generate QR code from the page.
  • Remove all ads from a page or simplify the page layout for better reading.
  • Makes tables on any page sortable.
  • Automate form filling & submiting, button clicking or any repetitive tasks.
  • Add button to show hide password fields.
  • Hack forms and lift up the limitation of form submission.
  • Toggle All checkboxes.
  • Modify anything on the page or add ability edit the page yourself.
  • Enable text selection.
  • Download all images in their higest possible quality.
  • Reverse search any image on sites like tineye.com and google.com/searchbyimage.
  • Count words in whole page, selected text or only article.
  • Change favicon, title, text color, background color, fonts, size, etc.
  • Add your own custom elements & custom CSS styles to the page.

For a developer

They can do much more a developer can think of, including:

  • Show console logs on your mobile device.
  • Execute JavaScript code on your mobile device.
  • Reload CSS.
  • Clear page cache.
  • Scroll to the bottom on infinite loading pages.
  • Check what a website is built with.
  • Analyze the page on online tools like Lighthouse, Pingdom, GTmetrix, etc.
  • See meta information of the page.
  • Identify fonts used on pages or tweak them live.
  • Validate HTML.
  • Check which images don't hav a alt attribute.
  • Get you IP Address.

How to create a bookmarklet

Bookmarklets are fairly easy to create if you know how JavaScript code works. But if you are just a normal user, you can also create a bookmarklet by following these steps:

First lets see how a bookmarklet looks like

A bookmarklet can be as simple as javascript:alert(document.url) or as complex as below.

/* Unminified */
javascript:
	!(function(){
		alert(document.url);
	})();

/* Minified */
javascript:!(function(){alert(document.url);})();


/* Minified with ES6 arrow function */
javascript:!(()=>{alert(document.url);})();

  1. javascript: it is a protocol similar to http: or https:, which tell the browser to treat words after it as JavaScript code not a page hyperlink.

  2. !(function(){...})() is a function declaration inside a IFEE and a ! exclamation mark at the beginning, it has many characteristics:

    1. function(){...} a function declaration just declare a function, it will not execute it until it is called (more below). A function without a name is called anonymous function. It can only be executed/called within an IFEE expression, when stored as a variable or a property of an object.
    2. (...)() IFEE which stand for Immediately-Invoked Function Expression, used to execute the code inside it as soon as it is defined/declared.
    3. ! since the above IFEE expression return undefined when ran standalone, we use ! exclamation mark at the beginning to invert it as true.

  3. The function(){...} can be further minified using ES6 arrow function to be like () => {...}, there are some limitations with arrow funciton, so we use a legacy function declaration instead.

  4. At last ; semi colon is used to tell the browser that one statement is finished (so that it don't mess up with next statement). You will have to use it after every statement inside the function.

Writing functions & expression

A expression/statement can be understood by the examples below.

First open your Browser DevTools's Console by:

  • Right clicking anywhere on the page and select "Inspect Element" then click "Console" at top
  • Keyboard shortcut:
    Cmd/Ctrl + Shift + i for "Inspect Element" OR
    Cmd/Ctrl + Shift + j for directly opening "Console"
  • Click three dots at the top right corner of the browser window -> "More Tools" -> "Developer Tools"

Expression example (run one by one but not // comment):

1+2
// 3

4*5
// 20

22/7
// 3.142857142857143

location.href
// "https://kalc.tools/blog/bookmarklets/"

document.title
// "What are Bookmarklets ? How to create & use them ?"

A function is a block of code that can execute any number of expressions/statement and other functions.

Example of a expression/statement: