Editing Bookmarklet (section)

== 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>