**Tags:** #software_testing/tools Een bookmarklet is een klein stukje JavaScript-code dat je als bladwijzer (bookmark) opslaat in je browser. In plaats van naar een website te navigeren, voert de bookmarklet direct een script uit op de pagina waarop je je bevindt. Bookmarklets zijn handig als je snel acties wilt uitvoeren op een pagina zonder een browser-extensie te hoeven installeren. Bijvoorbeeld: - Elementen markeren of verbergen op een pagina - [[#Waarschuwing per omgeving|Een omgevingsbanner tonen]] (zoals in test- of acc-omgevingen) - Informatie uit de pagina halen of aanpassen - CSS tijdelijk toepassen of debuggen # Hoe werkt het? Een bookmarklet bestaat uit een JavaScript-functie die je vooraf inline in je bookmark plaatst, voorafgegaan door `javascript:`. Wanneer je op de bookmark klikt, wordt die code uitgevoerd alsof het vanuit de console komt. ```javascript javascript:(function(){alert('Hallo vanaf deze pagina!');})(); ``` ## Hoe voeg je een bookmarklet toe? 1. Maak een nieuwe bladwijzer aan in je browser (bijvoorbeeld via rechtsklik op de bladwijzerbalk → "Nieuwe bladwijzer"). 2. Geef het een naam, bijvoorbeeld "Alert". 3. Plak de bookmarklet-code in het URL-veld. 4. Klik op de bladwijzer terwijl je een website geopend hebt om het script uit te voeren. ## Beperkingen en veiligheid - Bookmarklets draaien alleen op pagina’s die al geladen zijn. - Ze kunnen geen netwerkverzoeken uitvoeren naar andere domeinen - Omdat je JavaScript uitvoert op bestaande pagina’s, moet je altijd voorzichtig zijn met de herkomst van de code. Gebruik alleen bookmarklets die je vertrouwt. ## Verschil met browser-extensies Bookmarklets zijn eenvoudiger en directer, maar **tijdelijk**. Ze blijven niet actief op een site zoals extensies dat wel doen. Ze zijn vooral geschikt voor snelle tijdelijke acties. # Bookmarklets ## Waarschuwing per omgeving Wanneer je werkt als [[_Software Testing|Software Tester]], werk je vaak in verschillende [[OTAP omgevingen]]. Als je meerdere omgevingen open hebt, kan dat verwarrend worden. Je wilt vooral voorkomen dat je per ongeluk iets op productie doet wat beslist niet had gemogen. Je kunt een developer vragen om per omgeving een visuele banner in te richten die duidelijk maakt op welke omgeving je werkt. Maar je kunt dat ook zelf doen met een Bookmarklet. ### Wat het doet Deze bookmarklet toont een gekleurde banner bovenaan een webpagina, zodat je direct kunt zien in welke omgeving je je bevindt: acceptatie, test of productie. Handig als je vaak tussen omgevingen wisselt die visueel vrijwel identiek zijn. - **Acceptatie** (`.acceptatie` of `-acc`): oranje banner met "ACCEPTATIE OMGEVING" - **Test** (`.test` of `-tst`): groene banner met "TEST OMGEVING" - **Productie** (`https://energie.engie.nl` of `-prd`): rode banner met "PRODUCTIE OMGEVING" ### Werking 1. De bookmarklet leest het `location.hostname` en `location.href`. 2. Op basis van herkenbare patronen bepaalt het script de omgeving. 3. Als er een match is: - Wordt een vaste banner (`position: fixed`) bovenaan toegevoegd. - De pagina krijgt `margin-top: 30px`, zodat de banner de content niet overlapt. - `scroll-padding-top: 30px` wordt toegevoegd voor correcte anker-navigatie. ### Instructie 1. Maak een nieuwe bladwijzer in je browser. 2. Plak de onderstaande code in het URL-veld: ```javascript javascript:(function(){const h=location.hostname,u=location.href;let e,c;if(h.includes('.acceptatie')||h.includes('-acc')){e='ACCEPTATIE';c='orange'}else if(h.includes('.test')||h.includes('-tst')){e='TEST';c='green'}else if(u.startsWith('https://energie.engie.nl')||h.includes('-prd')){e='PRODUCTIE';c='red'}if(e){const b=document.createElement('div');b.textContent='⚠️ '+e+' OMGEVING ⚠️';b.style.cssText='position:fixed;top:0;left:0;right:0;background:'+c+';color:white;text-align:center;padding:6px;font-size:14px;font-weight:bold;z-index:9999;font-family:sans-serif;box-shadow:0 2px 5px rgba(0,0,0,0.2);';document.body.prepend(b);document.documentElement.style.scrollPaddingTop='30px';document.body.style.marginTop='30px';}})(); ``` 3. Geef het een herkenbare naam, zoals `Omgevingsbanner`. 4. Zet de bookmark in je bookmark bar zodat je hem snel kunt aanklikken. Wanneer je een omgeving open hebt die aan de voorwaarden voldoet, klik je de bookmark aan en wordt de juiste banner getoond. > [!example] Voorbeeld > ![[Pasted image 20250407153923.png]] > ![[Pasted image 20250407153948.png]] > ![[Pasted image 20250407154125.png]]