Bookmarklets: de vergeten automatisering in browsers

“Vroeger”, begin 2000, waren bookmarklets heel populair. Je had nog niet echt browser extensies, en bookmarklets gaven je een goede manier om simpele automatiseringen in je browser uit te voeren.

In het kort is een bookmarklet een manier om wat JavaScript uit te voeren op de huidige pagina, door gewoon op een knopje te klikken.

Dit werkt door een nieuwe bladwijzer te maken in je bladwijzer-balk, zodat je daar op kunt klikken. En in plaats van een website te openen, voert het dus JavaScript uit.

Voor mijn boekhoudpakket (Moneybird) het mogelijk maakte om dingen als BTW-aangifte automatisch te doen vanuit het pakket, gebruikte ik dit bijvoorbeeld om in één keer de juiste gegevens in te vullen. Ik zeg het vaker: gegevens overtypen van de ene plaats naar de andere is verschrikkelijk, en moet je altijd zien te voorkomen.

En zo hadden we dus ook laatst de methode om snel te wisselen tussen test- en productieomgeving| met een bookmarklet gedaan.

Hoe maak je een bookmarklet?

Het maken van een bookmarklet bestaat meestal uit drie stappen:

  1. Maak het JavaScript wat je wilt uitvoeren
  2. Comprimeer dat zodat het op één regel past
  3. Plaats het in je bladwijzerbalk

Stap 1 is het lastigste, en is natuurlijk maatwerk. Kan ik je bij helpen, dat wel. Laat me gewoon weten wat je wilt dat er gebeurt, en dan kijken we vanaf daar.

Stap 2 is dan weer relatief simpel: ga naar een tool als minify-js, plak je JavaScript, en kopieer de output.

Stap 3 is tegenwoordig meestal een twee-staps proces.

De bookmarklet in je bladwijzerbalk plaatsen

Hoe je de bladwijzer precies plaatst verschilt wat per browser, maar meestal werken de volgende stappen redelijk:

  1. Open een willekeurige pagina. De pagina waar je nu naar kijkt is prima, maar je mag ook example.com gebruiken, of iets anders. Het is maar tijdelijk;
  2. Gebruik de toetsencombinatie cmd (⌘) + D (Mac) of ctrl (⌃) + D (Windows/Linux);
  3. Je maakt nu een bladwijzer aan voor de huidige pagina. Dat is prima, maar geef het vast een titel die klopt voor je bookmarklet. Plaats de bladwijzer op een plek waar je er snel bij kunt, meestal in een speciale favorieten-balk;
  4. Als je browser je de optie geeft om nu gelijk de URL aan te passen kun je door naar stap 6, anders sla je het op zoals het nu is;
  5. Klik met je rechtermuisknop op de bladwijzer (ja, je kunt ook een rechtermuisknop op de Mac doen), en kies voor iets als “Bladwijzer aanpassen”;
  6. Pas nu de link aan, de URL zou er zo uit moeten zien: javascript:hier-je-javascript-code, dus bijvoorbeeld: javascript:alert("hello world");. Let op dat er geen spatie tussen javascript: en je code zit.

Wanneer je nu deze favoriet “opent” voer je dus eigenlijk de JavaScript-code uit.

Het enige wat je nu nog moet doen is zorgen dat je daar relevante code hebt, die jou helpt in je werkzaamheden. 😉