Demonstration of a bookmarklet that counts the number of words on the page. The browser shown is Firefox 3.0 with generic "abrowser" branding on
Ubuntu.
A bookmarklet is a bookmark stored in a web browser that contains JavaScript commands to extend the browser's functionality. For instance, a bookmarklet might allow the user to select text on a page, click the bookmarklet, and be presented with a search engine results page for the search term selected.
Bookmarklets are unobtrusive scripts stored as the URL of a bookmark in a web browser or as a hyperlink on a web page. The term is a portmanteau of the terms bookmark and applet[citation needed], however, an applet is not to be confused with a bookmarklet, just as script written in JavaScript is not to be confused with a script written in Java. Whether bookmarklet utilities are stored as bookmarks or hyperlinks, they are designed to add one-click functionality to a browser or web page. When clicked, a bookmarklet performs some function, one of a wide variety such as a search query or data extraction. Usually the bookmarklet is a JavaScript program.
Concept
Web browsers use URIs for the href attribute of the <a> tag and for bookmarks. The URI scheme, such as http:, file:, or ftp:, specifies the protocol and required form 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 protocol is javascript, treats the rest of the string as JavaScript code 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, say, 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 in-place font size and color changes, for example, 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:(function(){ //Statements returning a non-undefined type, e.g. assignments}());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 {arbitrary script} should be suffixed with ;void(...);.
javascript:{arbitrary script};void(0); 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., hyperlinks, images, text, etc.)
- Remove redirects from (e.g. Google) search results, to show the actual target URL[1]
- Submit the current page to a blogging service such as Posterous, link-shortening service such as bit.ly, or bookmarking service such as Delicious
- Query a search engine or online encyclopedia with highlighted text or by a dialog box
- Submit the current page to a link validation service or translation service
- Set commonly chosen configuration options when the page itself provides no way to do this
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.
History
Steve Kangas of bookmarklets.com coined the term "bookmarklet",[2] which he started to create based on an idea suggested in the Netscape JavaScript Guide. The term favelet was used early on by Tantek Çelik on 6 September 2001 (personal email). Brendan Eich, who developed JavaScript at Netscape, gave this account of the origin of bookmarklets:
They were a deliberate feature in this sense: I invented the javascript: URL along with JavaScript in 1995, and intended that javascript: URLs could be used as any other kind of URL, including being bookmark-able. In particular, I made it possible to generate a new document by loading, e.g. javascript:'hello, world', but also (key for bookmarklets) to run arbitrary script against the DOM of the current document, e.g. javascript:alert(document.links[0].href). The difference is that the latter kind of URL uses an expression that evaluates to the undefined type in JS. I added the void operator to JS before Netscape 2 shipped to make it easy to discard any non-undefined value in a javascript: URL.
—Brendan Eich,
email to Simon Willison[3]
Example
This example bookmarklet performs a Wikipedia search on any highlighted text in the web browser window. In normal use, the following Javascript would be installed to a bookmark in a browser[4] bookmarks toolbar. From then on, after selecting any text, clicking the bookmarklet performs the search.
javascript:function se(d) {return d.selection ? d.selection.createRange().text : d.getSelection()} s = se(document); for (i=0; i<frames.length && !s; i++) s = se(frames[i].document); if (!s || s=='') s = prompt('Enter%20search%20terms%20for%20Wikipedia',''); open('http://en.wikipedia.org' + (s ? '/w/index.php?title=Special:Search&search=' + encodeURIComponent(s) : '')).focus();
See also
References
External links
