Bookmarklet

A Firefox browser with a dialog reading "There are about 2502 words on this page."

Demonstration of a bookmarklet that counts the number of words on the page. The browser shown is Firefox 65.0.2 running on Windows 10.

A bookmarklet is a bookmark stored in a web browser that contains JavaScript commands that add new features to the browser. They are stored as the URL of a bookmark in a web browser or as a hyperlink on a web page. Bookmarklets are usually small snippets of JavaScript 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).<ref>Template:Cite web</ref>

History

Steve Kangas of bookmarklets.com coined the word bookmarklet<ref name="bookmarklets.com">Template:Cite web registered 9 April 1998</ref> when he started to create short scripts based on a suggestion in Netscape's JavaScript guide.<ref>Template:Cite web</ref> Before that, Tantek Çelik called these scripts favelets and used that word as early as on 6 September 2001 (personal emailTemplate:Clarify). Brendan Eich, who developed JavaScript at Netscape, gave this account of the origin of bookmarklets:

The increased implementation of Content Security Policy (CSP) in websites has caused problems with bookmarklet execution and usage (2013-2015),<ref>Template:Cite web</ref> with some suggesting that this hails the end or death of bookmarklets.<ref>Template:Cite web</ref><ref>Template:Cite web</ref> 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 userscript (Firefox / Pale Moon browser add-on extension) and a simple bookmarklet-userscript communication protocol.<ref>Template:Cite web</ref> 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 URIs for the href attribute of the <syntaxhighlight lang="HTML" inline><a></syntaxhighlight> tag and for bookmarks. The URI scheme, such as http or ftp, and which generally specifies the protocol, determines the format of the rest of the string. Browsers also implement javascript: URIs that to a parser is just like any other URI. The browser recognizes the specified javascript scheme and treats the rest of the string as a JavaScript program which is then executed. The expression result, if any, is treated as the HTML source code for a new page displayed in place of the original.

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 immediately invoked function that returns no value or an expression preceded by the void operator will prevent the browser from attempting to parse the result of the evaluation as a snippet of HTML markup: <syntaxhighlight lang="javascript" line="1" start="1"> javascript:(function(){

 //Statements returning a non-undefined type, e.g. assignments

})(); </syntaxhighlight>

Usage

Template:Wikibooks 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<ref>Template:Cite web</ref>
• 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 validationTemplate:Broken anchor service or translation service
• Set commonly chosen configuration options when the page itself provides no way to do this
• Control HTML5 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.<ref>Template:Cite web</ref><ref>Template:Cite web</ref><ref>Template:Cite web</ref>

Installation

"Installing" a bookmarklet allows you to quickly access and run JavaScript programs with a single click from your browser's bookmarks bar. Follow these detailed steps to install a bookmarklet:

Method 1: Creating a New Bookmark

1. Open Your Browser: Launch the browser where you want to add the bookmarklet.
2. Add a New Bookmark:
   1. Navigate to the bookmarks manager. In most browsers, this can be accessed by pressing Ctrl+Shift+O or by selecting 'Bookmarks' from the browser menu and then choosing 'Bookmark manager'.
   2. Right-click in the bookmarks bar or the folder where you want to add the bookmarklet and select 'Add new bookmark' or 'Add page'.
3. Configure the Bookmark:
   1. In the 'Name' field, enter a descriptive name for your bookmarklet to help you identify its function.
   2. In the 'URL' field, paste the JavaScript code provided for the bookmarklet. Ensure that it starts with javascript: followed by the code snippet.
4. Save the Bookmark: Click 'Save' or 'Done' to add the bookmarklet to your bookmarks bar or folder.

Method 2: Dragging and Dropping

1. Locate the Bookmarklet Link: Find the bookmarklet link provided on a webpage. This link will typically appear as a clickable button or link labeled with the function of the bookmarklet.
2. Drag the Bookmarklet to Your Bookmarks Bar:
   1. Click and hold the bookmarklet link.
   2. Drag it directly onto your bookmarks bar. Some browsers might show a placeholder or highlight where the bookmarklet will be placed.
   3. Release the mouse button to drop the bookmarklet into place.
3. Confirmation: The bookmarklet should now appear on your bookmarks bar, ready for use.

Running the Bookmarklet

To use the bookmarklet, simply click on its icon or name in your bookmarks bar. The JavaScript code will execute immediately on the current webpage you are viewing. Make sure the webpage is fully loaded before using the bookmarklet for optimal performance.

Tips

• Security Warning: Be cautious about adding bookmarklets from untrusted sources as they run JavaScript code that could potentially affect your browsing security or privacy.
• Compatibility: While most modern browsers support bookmarklets, the functionality may vary. Check your browser’s documentation for any specific instructions or limitations.

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<ref>Tested on Mozilla Firefox, Opera, Safari, 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. <syntaxhighlight lang="javascript" line="1"> javascript:(function() { function se(d) {

   return d.selection ? d.selection.createRange().text : d.getSelection()

} var s = se(document); for (var i=0; i<frames.length && (s==null || s==); i++) s = se(frames[i].document); if (!s || s==) s = prompt('Enter%20search%20terms%20for%20Wikipedia',); open('https://en.wikipedia.org' + (s ? '/w/index.php?title=Special:Search&search=' + encodeURIComponent(s) : )).focus(); })(); </syntaxhighlight>

Bookmarklets can modify the location, e.g. to save a web page to the Wayback Machine, <syntaxhighlight lang="javascript"> javascript:location.href='https://web.archive.org/save/'+document.location.href; </syntaxhighlight>

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, <syntaxhighlight lang="javascript"> javascript:void(window.open('view-source:'+location)); </syntaxhighlight>

Show info related to the current URL, e.g., <syntaxhighlight lang="javascript"> javascript:alert('\tdocument.URL\n'+document.URL+'\n\tdocument.lastModified\n'+document.lastModified+'\n\tlocation\n'+location); </syntaxhighlight>

External links

• Template:Cite web