Bookmarklet
A bookmarklet (also known as a favelet ) is a small computer program written in JavaScript that is saved as a bookmark and thus expands the functions of a web browser . It allows, for example, the appearance or functionality of websites to be changed on the client side. Technically, a bookmarklet is a bookmark on the URI scheme that allows JavaScript code to be executed by the browser.
javascript:
Normally, a JavaScript program embedded in a website is executed when the website is called up or when certain actions are taken, such as sending a form or the like. The creator of the website determines the type and time of execution. In contrast, in the case of bookmarklets, the JavaScript code contained is applied to the currently displayed website by selecting the bookmarklet after the page has been loaded.
Possible applications are e.g. B. reading out the marking and transferring the marked text to other websites, calculations, word transformations, URL manipulations, manipulation of the Document Object Model , Whois queries and so on.
The support in the various browsers depends on the respective support of JavaScript URLs in the bookmarks. The support of the respective parts of the JavaScript code also plays a role.
Example: Explanation of terms with Wikipedia
For example, the following JavaScript program searches the German version of Wikipedia for the text previously marked in the browser :
var sel = document.getSelection();
if (sel === null || sel === undefined) {
sel = prompt('Suchbegriff:', '');
}
if (sel !== null && sel !== undefined && sel !== '') {
location.href = 'https://de.wikipedia.org/w/index.php?search=' + encodeURIComponent(sel);
}
To use this program in a bookmarklet, some special characters have to be replaced so that they are not misinterpreted . From the example above, the following bookmarklet is created, which basically contains the same code as above, only more difficult to read, but technically clear:
javascript:void%20function(){var%20sel=document.getSelection();if%20(sel===null||sel===undefined)sel=prompt(%22Suchbegriff:%22,%22%22);if(sel!==null%26%26sel!==undefined%26%26sel!==%22%22)location.href=%22https://de.wikipedia.org/w/index.php%3Fsearch=%22+encodeURIComponent(sel)}();
The bookmarklet from the example above opens the Wikipedia article in the same window (or tab) as the website with the term in need of explanation. If you don't want that, but prefer the Wikipedia explanation in a new tab / window, the JavaScript code must be adapted accordingly. Instead of the location.href = ... instruction, the following code is required:
var w = 'https://de.wikipedia.org/w/index.php?search=' + encodeURIComponent(sel);
w.focus();
Browser compatibility
The procedure for accessing the currently selected text, as in the example above, differs between the browsers:
- In some browsers (Google Chrome, Safari) window.getSelection () works
- Document.getSelection () works in other browsers
- In Microsoft Internet Explorer, document.selection.createRange (). Text works
In order to create a bookmarklet that works equally in all browsers, these differences need to be taken into account.
| To install: |
|
| To use: |
|
Further examples
Minimal example
The following bookmarklet consists of just one JavaScript statement and simply opens a dialog:
javascript:alert('Hallo!');
So this bookmarklet does not do anything useful, it is simply intended to illustrate the basic principle.
List of websites displayed
The following bookmarklet creates a new page on which all links of the displayed website are listed:
javascript:w=open('','Z6','width=400,height=200,scrollbars,resizable,menubar');l=document.links;with(w.document){write('<base%20target=_blank>');for(i=0;i<l.length;i++){write(l[i].toString().link(l[i])+'<br/>')};void(close())}
Provision and integration of bookmarklets
There are several ways to provide and integrate bookmarklets. A simple option is to include the JavaScript code as a link in an HTML page. In the following example, the link "Terminology with Wikipedia" is created with the JavaScript code that is already explained above:
<a href="javascript:sel=document.getSelection();
if(!sel){void(sel=prompt('Suchbegriff:',''))};
if(sel)location.href='https://de.wikipedia.org/w/index.php?search='+encodeURIComponent(sel);">
Begriffserklärung mit Wikipedia
</a>
If the page is called up with a browser, the link text “Explanation of terms with Wikipedia” appears in the text of the page. In the simplest case, the user should now move this link with the mouse into his toolbar (do not click it). If no toolbar is visible, it must first be made visible via the browser settings (in Firefox, for example, by ticking the box under View -> Toolbars -> Bookmarks Toolbar ). The user can then mark a term with the mouse on any website and click on the entry “Term Explanation with Wikipedia” in the toolbar - he will then be directed to the corresponding Wikipedia page. In practice, it is advisable to use the abbreviation “Definition of terms with Wikipedia” to save space in the toolbar.
safety
When a bookmarklet is clicked on a website, the program code contained therein is executed within the framework of this website. The browser ensures that this code can only access data that belongs to the surrounding page. This prevents data from a third-party website being accessed by simply clicking on a link.
By creating a bookmarklet, the program code contained in the bookmarklet is executed within the framework of the currently active website. Malicious code can take advantage of this and transfer data from the active website to other websites, as demonstrated in the (benign) example above with the search function. Therefore, bookmarklets should only be installed and used from trustworthy sources. In the case of bookmarklets from other sources, the code should be checked for content before use, which is difficult due to the many percent signs and also requires programming knowledge in JavaScript.