Bookmarklet

Last updated
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. Word Counter Bookmarklet Demo.png
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.

Contents

Another name for bookmarklet is favelet or favlet, derived from favorites (synonym of bookmark). [1]

History

Steve Kangas of bookmarklets.com coined the word bookmarklet [2] when he started to create short scripts based on a suggestion in Netscape's JavaScript guide. [3] Before that, Tantek Çelik called these scripts favelets and used that word as early as on 6 September 2001 (personal email[ clarification needed ]). 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, in an email to Simon Willison [4]

The increased implementation of Content Security Policy (CSP) in websites has caused problems with bookmarklet execution and usage (2013-2015), [5] with some suggesting that this hails the end or death of bookmarklets. [6] [7] 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. [8] 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 <a> 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:

javascript:(function(){//Statements returning a non-undefined type, e.g. assignments})();

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

"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 [13] bookmarks toolbar. From then on, after selecting any text, clicking the bookmarklet performs the search.

javascript:(function(){functionse(d){returnd.selection?d.selection.createRange().text:d.getSelection()}vars=se(document);for(vari=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();})();

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(window.open('view-source:'+location));

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

javascript:alert('\tdocument.URL\n'+document.URL+'\n\tdocument.lastModified\n'+document.lastModified+'\n\tlocation\n'+location);

Related Research Articles

<span class="mw-page-title-main">Document Object Model</span> Convention for representing and interacting with objects in HTML, XHTML, and XML documents

The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an HTML or XML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them one can change the structure, style or content of a document. Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed.

Dynamic HTML, or DHTML, is a term which was used by some browser vendors to describe the combination of HTML, style sheets and client-side scripts that enabled the creation of interactive and animated documents. The application of DHTML was introduced by Microsoft with the release of Internet Explorer 4 in 1997.

<span class="mw-page-title-main">JavaScript</span> High-level programming language

JavaScript, often abbreviated as JS, is a programming language and core technology of the Web, alongside HTML and CSS. 99% of websites use JavaScript on the client side for webpage behavior.

<span class="mw-page-title-main">Hyperlink</span> Method of referencing visual computer data

In computing, a hyperlink, or simply a link, is a digital reference to data that the user can follow or be guided to by clicking or tapping. A hyperlink points to a whole document or to a specific element within a document. Hypertext is text with hyperlinks. The text that is linked from is known as anchor text. A software system that is used for viewing and creating hypertext is a hypertext system, and to create a hyperlink is to hyperlink. A user following hyperlinks is said to navigate or browse the hypertext.

An HTML element is a type of HTML document component, one of several types of HTML nodes. The first used version of HTML was written by Tim Berners-Lee in 1993 and there have since been many versions of HTML. The current de facto standard is governed by the industry group WHATWG and is known as the HTML Living Standard.

<span class="mw-page-title-main">Favicon</span> Icon associated with a particular web site

A favicon, also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons associated with a particular website or web page. A web designer can create such an icon and upload it to a website by several means, and graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page's favicon in the browser's address bar and next to the page's name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab, and site-specific browsers use the favicon as a desktop icon.

URL redirection, also called URL forwarding, is a World Wide Web technique for making a web page available under more than one URL address. When a web browser attempts to open a URL that has been redirected, a page with a different URL is opened. Similarly, domain redirection or domain forwarding is when all pages in a URL domain are redirected to a different domain, as when wikipedia.com and wikipedia.net are automatically redirected to wikipedia.org.

A query string is a part of a uniform resource locator (URL) that assigns values to specified parameters. A query string commonly includes fields added to a base URL by a Web browser or other client application, for example as part of an HTML document, choosing the appearance of a page, or jumping to positions in multimedia content.

This is a comparison of both historical and current web browsers based on developer, engine, platform(s), releases, license, and cost.

about is an internal URI scheme implemented in various web browsers to reveal internal state and built-in functions. It is an IANA officially registered scheme, and is standardized.

In the context of a web browser, a frame is a part of a web page or browser window which displays content independent of its container, with the ability to load content independently. The HTML or media elements in a frame may come from a web site distinct from the site providing the enclosing content. This practice, known as framing, is today often regarded as a violation of same-origin policy.

In computer hypertext, a URI fragment is a string of characters that refers to a resource that is subordinate to another, primary resource. The primary resource is identified by a Uniform Resource Identifier (URI), and the fragment identifier points to the subordinate resource.

Meta refresh is a method of instructing a web browser to automatically refresh the current web page or frame after a given time interval, using an HTML meta element with the http-equiv parameter set to "refresh" and a content parameter giving the time interval in seconds. It is also possible to instruct the browser to fetch a different URL when the page is refreshed, by including the alternative URL in the content parameter. By setting the refresh time interval to zero, meta refresh can be used as a method of URL redirection.

In computing, the same-origin policy (SOP) is a concept in the web-app application security model. Under the policy, a web browser permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same origin. An origin is defined as a combination of URI scheme, host name, and port number. This policy prevents a malicious script on one page from obtaining access to sensitive data on another web page through that page's (DOM).

Smart bookmarks are an extended kind of Internet bookmark used in web browsers. By accepting an argument, they directly give access to functions of web sites, as opposed to filling web forms at the respective web site for accessing these functions. Smart bookmarks can be used for web searches, or access to data on web sites with uniformly structured web addresses.

A navigation bar is a section of a graphical user interface intended to aid visitors in accessing information. Navigation bars are implemented in operating systems, file browsers, web browsers, apps, web sites and other similar user interfaces.

In the context of the World Wide Web, a bookmark is a Uniform Resource Identifier (URI) that is stored for later retrieval in any of various storage formats. All modern web browsers include bookmark features. Bookmarks are called favorites or Internet shortcuts in Internet Explorer and Microsoft Edge, and by virtue of that browser's large market share, these terms have been synonymous with bookmark since the First Browser War. Bookmarks are normally accessed through a menu in the user's web browser, and folders are commonly used for organization. In addition to bookmarking methods within most browsers, many external applications offer bookmarks management.

Modernizr is a JavaScript library that detects the features available in a user's browser. This lets web pages avoid unsupported features by informing the user their browser is not supported or loading a polyfill. Modernizr aims to provide feature detection in a consistent and easy to use manner that discourages the use of failure-prone browser sniffing.

<span class="mw-page-title-main">Sencha Touch</span> JavaScript framework

Sencha Touch is a user interface (UI) JavaScript library, or web framework, specifically built for the Mobile Web. It can be used by Web developers to develop user interfaces for mobile web applications that look and feel like native applications on supported mobile devices. It is based on web standards such as HTML5, CSS3 and JavaScript. The goal of Sencha Touch is to facilitate quick and easy development of HTML5 based mobile apps which run on Android, iOS, Windows, Tizen and BlackBerry devices, simultaneously allowing a native look and feel to the apps.

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 Candidate Recommendation of the W3C working group on Web Application Security, widely supported by modern web browsers. CSP provides a standard method for website owners to declare approved origins of content that browsers should be allowed to load on that website—covered types are JavaScript, CSS, HTML frames, web workers, fonts, images, embeddable objects such as Java applets, ActiveX, audio and video files, and other HTML5 features.

References

  1. ↑ Jonathan Avila (2014-03-02). "How to create a favlet for accessibility testing". Archived from the original on 2018-01-22. Retrieved 2023-05-23.{{cite web}}: CS1 maint: bot: original URL status unknown (link)
  2. ↑ Domain bookmarklets.com Archived 2009-07-07 at the Wayback Machine registered 9 April 1998
  3. ↑ "Activating JavaScript Commands From the Personal Toolbar". What's New in JavaScript 1.2. Netscape Communications Corporation. 1997. Archived from the original on 2002-06-11.
  4. ↑ Willison, Simon (April 10, 2004). "Email from Brendan Eich". SitePoint . Retrieved September 26, 2014.
  5. ↑ "Bug 866522 - Bookmarklets affected by CSP".
  6. ↑ "Bookmarklets are Dead". 23 October 2014.
  7. ↑ "The Slow Death of Bookmarklets". 16 November 2012.
  8. ↑ "The Resurrection of Bookmarklets".
  9. ↑ Ruderman, Jesse. "Bookmarklets for Zapping Annoyances". Jesse's Bookmarklets Site. Retrieved 29 March 2013.
  10. ↑ "YouTube Video Speed Bookmarklets". sgeos.github.io. 2017-10-29.
  11. ↑ Kant, Kushal (23 August 2017). "How to Use Parameters in HTML5 Video Tags/Attributes". findnerd.
  12. ↑ "HTML video Tag". www.w3schools.com.
  13. ↑ Tested on Mozilla Firefox, Opera, Safari, and Chrome. Does not work in IE7 or IE8. Original source: Alex Boldt
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.