Bookmarklet


A bookmarklet is a bookmark stored in a web browser that contains JavaScript commands that add new features to the browser. Bookmarklets are unobtrusive JavaScripts stored as the URL of a bookmark in a web browser or as a hyperlink on a web page. Bookmarklets are usually JavaScript programs. Regardless of whether bookmarklet utilities are stored as bookmarks or hyperlinks, they add one-click functions to a browser or web page. When clicked, a bookmarklet performs one of a wide variety of operations, such as running a search query or extracting data from a table. For example, clicking on a bookmarklet after selecting text on a webpage could run an Internet search on the selected text and display a search engine results page.
Another name for bookmarklet is favelet or favlet, derived from favorite.

History

Steve Kangas of bookmarklets.com coined the word bookmarklet when he started to create short scripts based on a suggestion in Netscape's JavaScript guide. Before that, Tantek Çelik called these scripts favelets and used that word as early as on 6 September 2001. Brendan Eich, who developed JavaScript at Netscape, gave this account of the origin of bookmarklets:
The increased implementation of Content Security Policy in websites has caused problems with bookmarklet execution and usage, with some suggesting that this hails the end or death of bookmarklets. William Donnelly created a work-around solution for this problem in early 2015 using a Greasemonkey userscript and a simple bookmarklet-userscript communication protocol. It allows bookmarklets to be executed on any and all websites, including those using CSP and having an https:// URI scheme. Note, however, that if/when browsers support disabling/disallowing inline script execution using CSP, and if/when websites begin to implement that feature, it will "break" this "fix".

Concept

Web browsers use URIs for the href attribute of the tag and for bookmarks. The URI scheme, such as http:, file:, or ftp:, specifies the protocol and the format for the rest of the string. Browsers also implement a prefix javascript: that to a parser is just like any other URI. Internally, the browser sees that the specified protocol is javascript, treats the rest of the string as a JavaScript application which is then executed, and uses the resulting string as the new page.
The executing script has access to the current page, which it may inspect and change. If the script returns an undefined type, the browser will not load a new page, with the result that the script simply runs against the current page content. This permits changes such as in-place font size and color changes without a page reload.
An anonymous function that does not return a value, define a function, etc., can be used to force the script to return an undefined type:

javascript:);

However, if a script includes a function definition/redefinition, such as function Use_this_globally, the environment will not be populated with it. For this reason an should be wrapped in void;.

javascript:void;

Usage

Bookmarklets are saved and used as normal bookmarks. As such, they are simple "one-click" tools which add functionality to the browser. For example, they can:
"Installation" of a bookmarklet is performed by creating a new bookmark, and pasting the code into the URL destination field. Alternatively, if the bookmarklet is presented as a link, under some browsers it can be dragged and dropped onto the bookmark bar. The bookmarklet can then be run by loading the bookmark normally.
In Microsoft Edge, it is not possible to add a bookmarklet to your favourites, instead right-click on the link and choose 'Add to reading list'. The bookmarklet can then be run by clicking on it in the reading list. In Microsoft Edge the reading list is in favourites and is opened using the icon that is a pile of lines.

Example

This example bookmarklet performs a Wikipedia search on any highlighted text in the web browser window. In normal use, the following JavaScript code would be installed to a bookmark in a browser bookmarks toolbar. From then on, after selecting any text, clicking the bookmarklet performs the search.

javascript:;

Bookmarklets can modify the location, e.g. to save a web page to the Wayback Machine,

javascript:location.href='https://web.archive.org/save/'+document.location.href;

Open a new web browser window or tab, e.g. to show the source of a web resource if the web browser supports the view-source URI scheme,

javascript:void;

Show info related to the current URL, e.g.,

javascript:alert;

among other things.