Editing Bookmarklet

{{Short description|Web browser bookmark containing JavaScript code}}
{{Use dmy dates|date=May 2025}}
[[File:Word Counter Bookmarklet Demo.png|alt=A Firefox browser with a dialog reading "There are about 2502 words on this page."|thumb|350x350px|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 (digital)|bookmark]] stored in a [[web browser]] that contains JavaScript commands that add new features to the browser. They are stored as the [[Uniform Resource Locator|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>{{cite web |url=https://www.levelaccess.com/how-to-create-a-favlet-for-accessibility-testing/ |title=How to create a favlet for accessibility testing |author=Jonathan Avila <!-- random example, 2nd search hit for me after [[:en:Favlet]] --> |date=2014-03-02 |access-date=2023-05-23 |archive-date=2018-01-22 |archive-url=https://web.archive.org/web/20180122133139/https://www.levelaccess.com/how-to-create-a-favlet-for-accessibility-testing/ |url-status=dead}}</ref>

== History ==

Steve Kangas of bookmarklets.com coined the word ''bookmarklet''<ref name="bookmarklets.com">{{cite web |url=http://www.bookmarklets.com |title=Bookmarklets |archive-url=https://web.archive.org/web/20090707090113/http://www.bookmarklets.com/ |archive-date=2009-07-07 |url-status=live}} registered 9 April 1998</ref> when he started to create short scripts based on a suggestion in [[Netscape Communications Corporation|Netscape]]'s JavaScript guide.<ref>{{cite web|title=Activating JavaScript Commands From the Personal Toolbar|url=http://developer.netscape.com/docs/manuals/communicator/jsguide/misc.htm#1005712|work=What's New in JavaScript 1.2|publisher=Netscape Communications Corporation|archive-url=https://web.archive.org/web/20020611183734/http://developer.netscape.com/docs/manuals/communicator/jsguide/misc.htm#1005712|archive-date=2002-06-11 <!-- 183734 --> |year=1997}}</ref> Before that, [[Tantek Çelik]] called these scripts ''favelets'' and used that word as early as on 6 September 2001 (personal email{{clarify|date=April 2020}}). [[Brendan Eich]], who developed JavaScript at Netscape, gave this account of the origin of bookmarklets:

{{quote|They were a deliberate feature in this sense: I invented the <code>javascript:</code> URL along with JavaScript in 1995, and intended that <code>javascript:</code> 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. <code>javascript:'hello, world'</code>, but also (key for bookmarklets) to run arbitrary script against the [[Document Object Model|DOM]] of the current document, e.g. <code>javascript:alert(document.links[0].href)</code>. 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 <code>javascript:</code> URL.|Brendan Eich|3=in an email to [[Simon Willison]]<ref>{{cite web
|url=http://www.sitepoint.com/bookmarklets/#comment-1146713851
|title=Email from Brendan Eich
|publisher=[[SitePoint]]
|last=Willison
|first=Simon
|date=April 10, 2004
|access-date=September 26, 2014}}</ref>}}

The increased implementation of [[Content Security Policy]] (CSP) in websites has caused problems with bookmarklet execution and usage (2013–2015),<ref>{{cite web|title=Bug 866522 - Bookmarklets affected by CSP|url=https://bugzilla.mozilla.org/show_bug.cgi?id=866522}}</ref> with some suggesting that this hails the end or death of bookmarklets.<ref>{{cite web|title=Bookmarklets are Dead|date=23 October 2014|url=https://medium.com/making-instapaper/bookmarklets-are-dead-d470d4bbb626}}</ref><ref>{{cite web|title=The Slow Death of Bookmarklets|date=16 November 2012|url=http://www.codeproject.com/Articles/494559/The-Slow-Death-of-Bookmarklets}}</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 (web browser)|Pale Moon]] browser add-on extension) and a simple bookmarklet-userscript [[communication protocol]].<ref>{{cite web|title=The Resurrection of Bookmarklets|url=http://www.donnelly-house.net/programming/js/bookmarklets/bookmarklets.php}}</ref> It allows (library-based) bookmarklets to be executed on any and all websites, including those using CSP and having an https:// URI scheme. However, 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 [[Uniform Resource Identifier|URI]]s for the <code>href</code> attribute of the <syntaxhighlight lang="HTML" inline><a></syntaxhighlight> tag and for bookmarks.  The URI scheme, such as <code>http</code> or <code>ftp</code>, and which generally specifies the [[Protocol (computing)|protocol]], determines the format of the rest of the string.  Browsers also implement <code>javascript:</code> URIs that to a parser is just like any other URI. The browser recognizes the specified <code>''javascript''</code> 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 expression|immediately invoked function]] that returns no value or an expression preceded by the <code>void</code> 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 ==
{{Wikibooks|JavaScript/Bookmarklets}}
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]]s, [[image]]s, [[String (computer science)|text]], etc.)
* Remove redirects from (e.g. Google) search results, to show the actual target URL<ref>{{cite web|last=Ruderman|first=Jesse|title=Bookmarklets for Zapping Annoyances|url=https://www.squarefree.com/bookmarklets/zap.html#remove_redirects|work=Jesse's Bookmarklets Site|access-date=29 March 2013}}</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 (website)|Delicious]]
* Query a [[Web search engine|search engine]] or online encyclopedia with highlighted text or by a [[dialog box]]
* Submit the current page to a [[Link_rot#Discovering|link validation]]{{Broken anchor|date=2024-12-12|bot=User:Cewbot/log/20201008/configuration|target_link=Link_rot#Discovering|reason= The anchor (Discovering) [[Special:Diff/924808059|has been deleted]].}} service or [[translation]] service
* Set commonly chosen configuration options when the page itself provides no way to do this
* Control [[HTML5]] audio and video [[media control symbols#Symbols|playback]] parameters such as speed, position, toggling [[Loop (music)|looping]], and showing/hiding playback controls, the first of which can be adjusted beyond HTML5 players' typical range setting.<ref>{{cite web |title=YouTube Video Speed Bookmarklets |url=http://sgeos.github.io/youtube/javascript/bookmarklet/2017/10/29/youtube_video_speed_bookmarklets.html |website=sgeos.github.io |date=2017-10-29}}</ref><ref>{{cite web |last1=Kant |first1=Kushal |title=How to Use Parameters in HTML5 Video Tags/Attributes |url=http://findnerd.com/list/view/How-to-Use-Parameters-in-HTML5-Video-TagsAttributes/34506/ |website=findnerd |date=23 August 2017}}</ref><ref>{{cite web |title=HTML video Tag |url=https://www.w3schools.com/tags/tag_video.asp |website=www.w3schools.com}}</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====
# Open Your Browser: Launch the browser where you want to add the bookmarklet.
# Add a New Bookmark: 
## Navigate to the bookmarks manager. In most browsers, this can be accessed by pressing <code>Ctrl+Shift+O</code> or by selecting 'Bookmarks' from the browser menu and then choosing 'Bookmark manager'.
## Right-click in the bookmarks bar or the folder where you want to add the bookmarklet and select 'Add new bookmark' or 'Add page'.
# Configure the Bookmark:
## In the 'Name' field, enter a descriptive name for your bookmarklet to help you identify its function.
## In the 'URL' field, paste the JavaScript code provided for the bookmarklet. Ensure that it starts with <code>javascript:</code> followed by the code snippet.
# Save the Bookmark: Click 'Save' or 'Done' to add the bookmarklet to your bookmarks bar or folder.

====Method 2: Dragging and Dropping====
# 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.
# Drag the Bookmarklet to Your Bookmarks Bar:
## Click and hold the bookmarklet link.
## Drag it directly onto your bookmarks bar. Some browsers might show a placeholder or highlight where the bookmarklet will be placed.
## Release the mouse button to drop the bookmarklet into place.
# 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 (web browser)|Opera]], [[Safari (web browser)|Safari]], and [[Google Chrome|Chrome]]. Does not work in IE7 or IE8.  Original source: [http://math-www.uni-paderborn.de/~axel/bookmarklet.html 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 [[URL|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>

== References ==
{{Reflist}}

== External links ==
<!-- NOTE to editors: Due to the extremely large number of bookmarklets available, it is not reasonable to create a list of specific bookmarklets here, nor to include links to small collections. -->
* {{cite web |url= https://www.pcmag.com/archive/bookmarklets-boost-web-surfing-116252 |title= Bookmarklets Boost Web Surfing |publisher= PC Magazine |first= Tara |last= Calishain |date= Feb 3, 2004 |access-date= Aug 31, 2007 }}

{{Web browsers|fsp}}

[[Category:JavaScript]]
[[Category:Web development]]