![Word Counter Bookmarklet Demo](https://upload.wikimedia.org/wikipedia/commons/7/78/Word_Counter_Bookmarklet_Demo.png)
A bookmarklet is a
bookmark
A bookmark is a thin marking tool, commonly made of card, leather, or fabric, used to keep track of a reader's progress in a book and allow the reader to easily return to where the previous reading session ended. Alternate materials for book ...
stored in a
web browser
A web browser is application software for accessing websites. When a user requests a web page from a particular website, the browser retrieves its files from a web server and then displays the page on the user's screen. Browsers are used on ...
that contains JavaScript commands that add new features to the browser. They are stored as the
URL of a bookmark in a
web browser
A web browser is application software for accessing websites. When a user requests a web page from a particular website, the browser retrieves its files from a web server and then displays the page on the user's screen. Browsers are used on ...
or as a
hyperlink
In computing, a hyperlink, or simply a link, is a digital reference to data that the user can follow or be guided by clicking or tapping. A hyperlink points to a whole document or to a specific element within a document. Hypertext is text wit ...
on a
web page. Bookmarklets are usually small snippets of
JavaScript
JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of Website, websites use JavaScript on the Client (computing), client side ...
executed when user clicks on them. When clicked, bookmarklets can perform a wide variety of operations, such as running a search query from selected text or extracting data from a table.
Another name for ''bookmarklet'' is favelet or favlet, derived from ''favorites'' (synonym of bookmark).
History
Steve Kangas of bookmarklets.com coined the word ''bookmarklet''
[Domai]
bookmarklets.com
registered 9 April 1998 when he started to create short scripts based on a suggestion in
Netscape's JavaScript guide. Before that,
Tantek Çelik
Tantek Çelik is a Turkish-American computer scientist, currently the Web standards lead at Mozilla Corporation. Çelik was previously the chief technologist at Technorati. He worked on microformats and is one of the principal editors of sever ...
called these scripts ''favelets'' and used that word as early as on 6 September 2001 (personal email).
Brendan Eich
Brendan Eich (; born July 4, 1961) is an American computer programmer and technology executive. He created the JavaScript programming language and co-founded the Mozilla project, the Mozilla Foundation, and the Mozilla Corporation. He served as ...
, who developed JavaScript at Netscape, gave this account of the origin of bookmarklets:
The increased implementation of
Content Security Policy
Content Security Policy (CSP) is a computer security standard introduced to prevent cross-site scripting (XSS), clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context. It is a C ...
(CSP) in websites has caused problems with bookmarklet execution and usage (2013-2015), with some suggesting that this hails the end or death of bookmarklets. William Donnelly created a work-around solution for this problem (in the specific instance of loading, referencing and using JavaScript library code) in early 2015 using a
Greasemonkey
Greasemonkey is a userscript manager made available as a Mozilla Firefox extension. It enables users to install scripts that make on-the-fly changes to web page content after or before the page is loaded in the browser (also known as augmen ...
userscript (
Firefox
Mozilla Firefox, or simply Firefox, is a free and open-source web browser developed by the Mozilla Foundation and its subsidiary, the Mozilla Corporation. It uses the Gecko rendering engine to display web pages, which implements current and ...
/
Pale Moon
Pale Moon is an open-source web browser with an emphasis on customization; its motto is "Your browser, Your way". There are official releases for Microsoft Windows and Linux, as well as contributed builds for various platforms.
Pale Moon origi ...
browser add-on extension) and a simple bookmarklet-userscript
communication protocol
A communication protocol is a system of rules that allows two or more entities of a communications system to transmit information via any kind of variation of a physical quantity. The protocol defines the rules, syntax, semantics (computer scien ...
. It allows (library-based) 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
URI Uri may refer to:
Places
* Canton of Uri, a canton in Switzerland
* Úri, a village and commune in Hungary
* Uri, Iran, a village in East Azerbaijan Province
* Uri, Jammu and Kashmir, a town in India
* Uri (island), an island off Malakula Islan ...
s for the
href
attribute of the
tag and for bookmarks. The URI scheme, such as
http:
,
file:
, or
ftp:
, specifies the
protocol
Protocol may refer to:
Sociology and politics
* Protocol (politics), a formal agreement between nation states
* Protocol (diplomacy), the etiquette of diplomacy and affairs of state
* Etiquette, a code of personal behavior
Science and technolog ...
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 (rather than, for example, a string), 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
In computer programming, an anonymous function (function literal, lambda abstraction, lambda function, lambda expression or block) is a function definition that is not bound to an identifier. Anonymous functions are often arguments being passed to ...
that does not return a value, define a function, etc., can be used to force the script to return an undefined type:
javascript:(function(s))();
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:
* Modify the appearance of a web page within the browser (''e.g.'', change font size, background color, etc.)
* Extract data from a web page (''e.g.'',
hyperlink
In computing, a hyperlink, or simply a link, is a digital reference to data that the user can follow or be guided by clicking or tapping. A hyperlink points to a whole document or to a specific element within a document. Hypertext is text wit ...
s,
image
An image is a visual representation of something. It can be two-dimensional, three-dimensional, or somehow otherwise feed into the visual system to convey information. An image can be an artifact, such as a photograph or other two-dimensiona ...
s,
text
Text may refer to:
Written word
* Text (literary theory), any object that can be read, including:
**Religious text, a writing that a religious tradition considers to be sacred
**Text, a verse or passage from scripture used in expository preachin ...
, etc.)
* Remove redirects from (e.g. Google) search results, to show the actual target URL
* Submit the current page to a blogging service such as
Posterous
Posterous was a simple blogging platform started in May 2008. It supported integrated and automatic posting to other social media tools such as Flickr, Twitter, and Facebook, a built-in Google Analytics package, and custom themes. It was based in ...
, link-shortening service such as
bit.ly
Bitly is a URL shortening service and a link management platform. The company Bitly, Inc. was established in 2008. It is privately held and based in New York City. Bitly shortens 600 million links per month, for use in social networking, SMS, ...
, or bookmarking service such as
Delicious
* Query a
search engine
A search engine is a software system designed to carry out web searches. They search the World Wide Web in a systematic way for particular information specified in a textual web search query. The search results are generally presented in a ...
or online encyclopedia with highlighted text or by a
dialog box
The dialog box (also called dialogue box (non-U.S. English), message box or simply dialog) is a graphical control element in the form of a small window that communicates information to the user and prompts them for a response.
Dialog boxes are ...
* Submit the current page to a
link validation service or
translation
Translation is the communication of the Meaning (linguistic), meaning of a #Source and target languages, source-language text by means of an Dynamic and formal equivalence, equivalent #Source and target languages, target-language text. The ...
service
* Set commonly chosen configuration options when the page itself provides no way to do this
* Control
HTML5
HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and final major HTML version that is a World Wide Web Consortium (W3C) recommendation. The current specification is known as the HTML ...
audio and video
playback parameters such as speed, position, toggling
looping, and showing/hiding playback controls, the first of which can be adjusted beyond HTML5 players' typical range setting.
Installation
"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.
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
[Tested on ]Mozilla Firefox
Mozilla Firefox, or simply Firefox, is a free and open-source web browser developed by the Mozilla Foundation and its subsidiary, the Mozilla Corporation. It uses the Gecko rendering engine to display web pages, which implements current and a ...
, Opera
Opera is a form of theatre in which music is a fundamental component and dramatic roles are taken by singers. Such a "work" (the literal translation of the Italian word "opera") is typically a collaboration between a composer and a librett ...
, Safari
A safari (; ) is an overland journey to observe wild animals, especially in eastern or southern Africa. The so-called "Big Five" game animals of Africa – lion, leopard, rhinoceros, elephant, and Cape buffalo – particularly form an importa ...
, and Chrome. Does not work in IE7 or IE8. Original source
Alex Boldt
/ref> bookmarks toolbar. From then on, after selecting any text, clicking the bookmarklet performs the search.
javascript:(function(document) )(document);
References
External links
*
{{Web browsers, fsp
JavaScript
Web development