Bookmarklet maker: zet JavaScript om in een bookmarklet

Zo gebruik je deze bookmarklet maker

1. Geef de bladwijzer een naam en plak je JavaScript in het codevak, of klik op Voorbeeld met paginatitel laden om een afgewerkt voorbeeld te zien. Een beginnende javascript: is optioneel; de generator haalt die weg en voegt zijn eigen toe.
2. Klik op Bookmarklet maken. De gegenereerde URL verschijnt hieronder, samen met de lengte in tekens.
3. Sleep de donkere knop naar je bladwijzerbalk. Is de balk verborgen, zet hem dan eerst aan via het menu Weergave of de instellingen van je browser.
4. Open een willekeurige pagina en klik op de bladwijzer. Het script draait één keer, op die pagina.

Klikken op de knop op deze pagina doet bewust niets: een bookmarklet is bedoeld om te draaien op de pagina die je leest, niet op de generator.

Wat een bookmarklet eigenlijk is

Een bookmarklet is een gewone bladwijzer in je browser waarvan het adres begint metjavascript: in plaats van https:. Open een pagina, klik op de bladwijzer en de browser voert je script uit op die pagina, in plaats van ergens naartoe te navigeren. Bookmarklets zijn handig voor paginaspecifieke acties: een nette bronvermelding kopiëren, een leesweergave aan- of uitzetten, geselecteerde tekst ophalen of de huidige URL in een andere dienst openen. Er hoeft geen extensie geïnstalleerd te worden, ze vragen geen rechten en staan in de bladwijzerbalk zoals elke andere link.

Zo zet je JavaScript om in een bookmarklet

Een script met de hand omzetten kost drie stappen en de generator doet ze allemaal voor je. Hier is een script van twee regels en de bookmarklet die eruit voortkomt:

const n = document.links.length;
alert(n + ' links op deze pagina');

javascript:(()%3D%3E%7B%0Aconst%20n%20%3D%20document.links.length%3B%0Aalert(n%20%2B%20'%20links%20op%20deze%20pagina')%3B%0A%7D)()

1. Verpak de code in een functie

De tool zet je code in een direct aangeroepen pijlfunctie,(() => { … })(). Zo botsen je variabelen niet met wat de pagina al definieert, en er is nog een reden: als de code in een javascript:-URL eindigt met een tekstwaarde, vervangt de browser de pagina door een nieuw document met die tekst. Een functie met een blok als body geeft niets terug, dus de pagina blijft staan. Handmatig is het klassieke alternatief om de code met void te laten beginnen.

2. Codeer de code met procentcodering

Browsers halen ruwe tab- en regeleindetekens uit elke URL voordat ze die gebruiken, dus een script van meerdere regels dat je rechtstreeks in een bladwijzer plakt, wordt op één regel geperst. Eén //-commentaar slokt dan alles erna op en opdrachten die op regeleinden rekenden lopen in elkaar over. Door te coderen wordt elk regeleinde een%0A, dat overleeft; de browser decodeert de code vlak voor het uitvoeren weer. Codering beschermt ook spaties, dubbele aanhalingstekens, % en #.

3. Voeg het voorvoegsel javascript: toe

Het schema javascript: vertelt de browser dat de rest van het adres als script moet draaien. De afgewerkte tekenreeks sleep je naar de balk of plak je in een bladwijzer.

Zo installeer je een bookmarklet

Op de desktop

Sleep de donkere knop naar de bladwijzerbalk in Chrome, Edge, Firefox, Safari of een andere desktopbrowser. Is slepen onhandig, klik dan op Bladwijzer-URL kopiëren, maak een nieuwe bladwijzer en plak de URL in het adresveld.

Op iPhone, iPad en Android

Mobiele browsers hebben geen bladwijzerbalk om naartoe te slepen, dus gebruik je de bewerkmethode:

1. Klik op Bladwijzer-URL kopiëren.
2. Maak een bladwijzer van een willekeurige pagina; deze pagina werkt prima.
3. Open je bladwijzers, bewerk de nieuwe bladwijzer en vervang het adres door de gekopieerde javascript:-URL. Geef hem meteen een andere naam.
4. Ga naar de pagina waarop je hem wilt uitvoeren. In Safari op iPhone of iPad open je de bladwijzer vanuit je bladwijzers. In Chrome op Android typ je de naam van de bookmarklet in de adresbalk en tik je op de voorgestelde bladwijzer; open je hem via het bladwijzerscherm, dan verlaat je de pagina en heeft hij niets om op te draaien.

Plak hem niet in de adresbalk

Het lijkt een sneltoets, maar Chrome haalt een beginnende javascript: bewust weg uit tekst die je in de adresbalk plakt, als verdediging tegen oplichting waarbij mensen worden verleid kwaadaardige code te plakken. Wat overblijft wordt als zoekopdracht behandeld. De code als bladwijzer opslaan is de betrouwbare route.

Bookmarklet-voorbeelden om te plakken

Elk voorbeeld gebruikt alleen standaard browser-API’s. Plak er een in het codevak hierboven, klik op Bookmarklet maken en installeer hem.

De pagina kopiëren als Markdown-link

Opent een prompt met de link geselecteerd, klaar om te kopiëren.

prompt('Markdown-link:', '[' + document.title + '](' + location.href + ')');

De woorden in je selectie tellen

Selecteer eerst tekst en klik dan op de bookmarklet.

const words = String(getSelection()).trim().split(/\s+/).filter(Boolean).length;
alert(words + ' woorden geselecteerd');

De pagina bewerkbaar maken

Klik nog eens om bewerken uit te zetten. Opnieuw laden herstelt het origineel.

document.designMode = document.designMode === 'on' ? 'off' : 'on';

De pagina openen in de Wayback Machine

Toont gearchiveerde kopieën van de pagina waarop je zit.

location.href = 'https://web.archive.org/web/*/' + location.href;

Veelvoorkomend gebruik van bookmarklets

Waarom een bookmarklet niet werkt

Het beveiligingsbeleid van de site blokkeert hem

Werkt een bookmarklet op de meeste sites maar doet hij op één site niets, kijk dan naar het Content-Security-Policy van die site. De CSP-specificatie zegt dat het beleid van een pagina bookmarklets niet zou moeten hinderen, maar browsers kunnen javascript:-URL’s toch blokkeren op pagina’s met strikte script-src-regels. Een bookmarklet die een script van een ander domein injecteert, wordt dubbel geraakt: ook als hij draait, bepaalt het beleid van de pagina of dat externe script mag laden. Niets in de bookmarklet kan dit overrulen. Heb je het script op zo’n site nodig, dan is een browserextensie of userscript de omweg.

De pagina werd een lege pagina met tekst

Je code eindigde met een tekstwaarde, dus de browser toonde die als nieuwe pagina. Haal elkereturn weg die tekst teruggeeft. Heb je de bookmarklet met de hand geschreven, genereer hem dan hier opnieuw: hij wordt in een functie verpakt, waardoor een tekstexpressie aan het eind de pagina niet meer vervangt.

Er gebeurt niets en er is geen foutmelding

Open de ontwikkelaarsconsole van je browser en klik de bookmarklet nog eens aan. Syntaxfouten, ontbrekende elementen en geblokkeerde scripts worden daar gemeld. Een veelvoorkomende oorzaak bij zelfgemaakte bookmarklets is een //-commentaar dat op dezelfde regel als de rest van de code is beland. Opnieuw genereren vanuit de originele bron lost dat op.

Zo bewerk je een bestaande bookmarklet

Kopieer het adres van de bladwijzer, haal de beginnende javascript: weg en decodeer de rest met de URL-encoder en -decoder (in het Engels) om weer leesbare code te krijgen. Pas je wijziging toe, plak de code in deze bookmarklet maker en vervang het adres van de oude bladwijzer door de nieuwe URL. Het origineel bewaren in een tekstbestand bespaart je deze omweg.

Veiligheid telt

Een bookmarklet draait met dezelfde toegang als de eigen scripts van de pagina: hij kan alles lezen en wijzigen wat de pagina blootgeeft. Bekijk code voordat je haar installeert, vermijd fragmenten die externe scripts laden (een URL die iemand anders beheert kan veranderen nadat je hem hebt geïnstalleerd) en draai nooit een onbekende bookmarklet op een pagina met gevoelige gegevens. Vraagt een website, bericht of video je code in een bladwijzer of in je adresbalk te plakken, zie het dan als oplichting.

Bookmarklet, userscript of extensie

De drie lijken op elkaar maar beantwoorden verschillende behoeften. Eenbookmarklet is één script dat één keer draait, op één pagina, als je erop klikt: niets te installeren en hij reist mee met je bladwijzers. Eenuserscript (beheerd door een userscript-manager) hecht zich aan passende sites en kan bij elk bezoek automatisch draaien, met eigen instellingen tussen pagina’s door. Een browserextensie kan beide en meer: werk op de achtergrond, netwerkverkeer onderscheppen, werkbalkpictogrammen. Daar staat een installatiestap tegenover en brede rechten die de browser je vooraf laat zien. Extensies worden ook anders behandeld door paginabeveiligingsbeleid: de CSP-specificatie vermeldt dat Chrome ervoor zorgt dat injecties door extensies blijven werken, ongeacht het beleid van een pagina. Begin met de bookmarklet en stap pas over als je tegen zijn grenzen aanloopt.

Grenzen: wanneer je geen bookmarklet moet gebruiken

Een bookmarklet draait alleen als je erop klikt, op één pagina tegelijk. Hij kan geen status bewaren tussen bezoeken, niet op de achtergrond werken en niet automatisch elke pagina aanpassen. De lengte is zelden het probleem, want Chrome documenteert een maximale URL-lengte van 2 MB, maar een lang script wordt een onleesbare bladwijzer-URL en op dat formaat is een userscript-manager of extensie makkelijker te onderhouden. Wijzigingen van een bookmarklet verdwijnen ook bij opnieuw laden: wil je markeringen die er de volgende keer nog zijn, lees danhow to highlight text on any website and keep it (in het Engels). En is de opdracht “bewaar deze pagina met één klik” in plaats van “draai een fragment”, dan doet een speciaal gebouwde browserextensie dat zonder dat je code hoeft te onderhouden.

Privacy: waar je code naartoe gaat

Nergens heen. De naam, het fragment en de gegenereerde URL verlaten de pagina nooit: er is geen netwerkverzoek nodig om een bookmarklet te maken. Eén eerlijke kanttekening: de afgewerkte bookmarklet wordt als gewone bladwijzer opgeslagen. Synchroniseer je bladwijzers tussen apparaten, dan reist het script met je andere bladwijzers mee en is het zichtbaar voor alles wat dat gesynchroniseerde profiel kan lezen.

Gerelateerde tools en gidsen

De Markdown-link-bookmarklet hierboven kopieert één link per keer; wil je de HTML van een hele pagina naar Markdown omzetten, gebruik dan de HTML-naar-Markdown-converter (in het Engels). Zitten de links die je kopieert vol trackingparameters, dan haalt deURL-opschoner ze weg. Wil je pagina’s bewaren en gebruiken zonder script te schrijven, bekijk dan Marqly’sweb highlighter, de bladwijzerbeheerder voor Chrome en de second-brain-werkwijze (alle drie in het Engels), of lees de gids how to organize bookmarks (in het Engels).