Bookmarklet
A bookmarklet is a
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
They were a deliberate feature in this sense: I invented the
javascript:
URL along with JavaScript in 1995, and intended thatjavascript:
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 ajavascript:
URL.— Brendan Eich, in an email to Simon Willison[4]
The increased implementation of
Concept
Web browsers use
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 codeThe 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:
- 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[9]
- Submit the current page to a blogging 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
- 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.[10][11][12]
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[13] bookmarks toolbar. From then on, after selecting any text, clicking the bookmarklet performs the search.
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();
})();
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);
References
- ^ 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) - ^ Domain bookmarklets.com Archived 2009-07-07 at the Wayback Machine registered 9 April 1998
- ^ "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.
- ^ Willison, Simon (April 10, 2004). "Email from Brendan Eich". SitePoint. Retrieved September 26, 2014.
- ^ "Bug 866522 - Bookmarklets affected by CSP".
- ^ "Bookmarklets are Dead". 23 October 2014.
- ^ "The Slow Death of Bookmarklets". 16 November 2012.
- ^ "The Resurrection of Bookmarklets".
- ^ Ruderman, Jesse. "Bookmarklets for Zapping Annoyances". Jesse's Bookmarklets Site. Retrieved 29 March 2013.
- ^ "YouTube Video Speed Bookmarklets". sgeos.github.io. 2017-10-29.
- ^ Kant, Kushal (23 August 2017). "How to Use Parameters in HTML5 Video Tags/Attributes". findnerd.
- ^ "HTML video Tag". www.w3schools.com.
- Mozilla Firefox, Opera, Safari, and Chrome. Does not work in IE7 or IE8. Original source: Alex Boldt
External links
- Calishain, Tara (Feb 3, 2004). "Bookmarklets Boost Web Surfing". PC Magazine. Retrieved Aug 31, 2007.