Met behulp van AI kun je websites die je bezoekt ombouwen en volledig aan je wensen aanpassen. Je formuleert gewoon wat je wilt de AI produceert een passend userscript dat lokaal in je browser uitgevoerd wordt.
Stel je voor dat je je favoriete websites helemaal naar je eigen smaak kunt veranderen en er bijvoorbeeld ook nieuwe functies aan kunt toevoegen, of het ontwerp helemaal naar wens personaliseren. Je krijgt er een kijkje mee achter de schermen en kunt daarbij zelfs vervelende bugs verwijderen die je eigenlijk al jaren irriteren. Door slim gebruik te maken van AI kan dat. Je hoeft alleen maar je wensen door te geven.
Technische basis
De technische basis daarvoor vormen de zogenaamde userscripts. Dat is JavaScript-code die de gewenste aanpassingen aan de website doorvoert. Browser-extensies zoals Violentmonkey, Greasemonkey en Tampermonkey injecteren de scripts automatisch tijdens het surfen op een website. Je browser voert de aanpassingen vervolgens lokaal op je computer uit. Aanbevolen wordt vooral het opensourceproject Violentmonkey, dat Firefox, Chrome en aanverwante browsers ondersteunt.
Userscripts bestaan al jaren. In catalogi zoals Greasy Fork vind je talloze kant-en-klare scripts voor veel websites, maar vaak zijn die verouderd en werken ze niet zoals gehoopt. Bovendien vereist het gebruik van externe scripts een bepaald vertrouwen. Als alternatief kun je zelf scripts ontwikkelen, bijvoorbeeld via de in Violentmonkey geïntegreerde code-editor. Dat is op zich niet al te moeilijk, maar vergt wel tijd en in ieder geval wat basiskennis van webontwikkeling. De drempel om ‘even snel’ iets uit te proberen is relatief hoog en dan moet het echt de moeite waard zijn.
In dit eenvoudige voorbeeld genereert ChatGPT een userscript dat het lettertype op de website ct.nl wijzigt
AI helpt
Daar schiet AI te hulp: moderne taalmodellen zoals ChatGPT beheersen het ontwikkelen van userscripts voor Violentmonkey en dergelijke uitstekend. Bij tests leverde dat vaak bij de eerste poging al een functioneel script op dat een website naar wens aanpaste. Om dergelijke scripts te genereren, volstaat een gratis OpenAI-account met ChatGPT. Je kunt het ook met andere taalmodellen proberen, want JavaScript is voor de meeste geen uitdaging. Een eenvoudig voorbeeld om mee te beginnen: de prompt ‘Maak een Violentmonkey-script dat het lettertype van ct.nl verandert in Comic Sans’ leverde bij ChatGPT het afgebeelde userscript op. Dat begint met de noodzakelijke meta-informatie die uitbreidingen zoals Violentmonkey nodig hebben. Daarin bevindt zich de naam van het script (@name), die later in de browser-extensie wordt weergegeven. @match geeft aan op welke websites het script moet worden geladen. In het getoonde voorbeeld heeft ChatGPT correct aangegeven dat het op alle pagina’s van ct.nl actief is. Via @grant kun je het script uitgebreide toegangsrechten geven, wat in dit geval niet nodig is.
De daadwerkelijke magie zit in de JavaScript-functie daaronder, waarmee het script het lettertype van de hele website aanpast. Om meer te weten te komen over de gekozen oplossing, vraag je eenvoudigweg: “Leg het script uit”. Vervolgens levert de AI een uitgebreide uitleg: var elements = document. getElementsByTag Name('*') selecteert alle HTML-elementen op de pagina, for (var i = 0; i < elements.length; i++) { ... } een loop die langs alle geselecteerde elementen gaat en elements[i].style. fontFamily = 'Comic Sans MS, Comic Sans, cursive' stelt voor elk geselecteerd element de fontFamily-eigenschap in, wat hier betekent dat het lettertype van elk element wordt gewijzigd naar Comic Sans. Omdat er altijd een zekere mate van toeval meespeelt, kan de specifieke oplossing bij jou anders zijn. Bij 3 keer die vraag kregen we 3 verschillende oplossingen: er leiden nu eenmaal meerdere wegen naar Rome. Als je niet tevreden bent met het resultaat, loont het de moeite om dezelfde prompt opnieuw te proberen.
Violentmonkey past websites aan via scripts die het uiterlijk en de werking modificeren
Scripts toevoegen
Om dergelijke scripts uit te proberen, ga je als volgt te werk. Installeer een userscript-manager zoals Violentmonkey als extensie voor je browser en klik op het symbool van de extensie (bij Violentmonkey is dat een grijnzende apenkop). Daarna klik je op het plus-teken om een nieuw script in de code-editor te openen. Daarin kopieer je de door AI gegenereerde code. De standaardinhoud voor een nieuw script overschrijf je daarbij. Ten slotte klik je rechtsboven op Opslaan en sluiten. Als je dan terugkeert naar het tabblad met de website en die vernieuwt, is het script actief. Ook bij aanpassingen aan het script moet de pagina verversen of de website opnieuw openen, zodat het gewijzigde script bij het laden geïnjecteerd wordt. Of en hoeveel scripts er actief zijn, herken je aan het cijfer op het Violentmonkey-pictogram. In dat eenvoudige voorbeeld werkt ct.nl voortaan met Comic Sans MS.
Als je daar op den duur genoeg van hebt, kun je het script weer uitschakelen door op de extensie-knop en vervolgens op de scriptnaam te klikken. Wijzigingen zijn op elk moment mogelijk via de knop die naast de scriptnaam verschijnt als je hem aanwijst. Daarmee kom je weer in de editor terecht. Toegegeven, het Comic-Sans-voorbeeld is niet erg complex of nuttig, maar je hebt wel een goed idee van hoe het werkt.
Dan is het tijd om de AI met concretere en moeilijkere taken te belasten. Als je bijvoorbeeld de YouTube-interface wilt opschonen, kun je de AI vragen om elementen te verwijderen die je niet interesseren, zoals de reacties van andere gebruikers. In dat geval volstaat meestal een enkele nauwkeurige prompt om tot een bruikbaar resultaat te komen: “Maak een Violentmonkey-script dat op YouTube de reacties verbergt.” Het resultaat kan een script zijn dat met de functie document. getElementById() het web-element met de ID comments zoekt en dat vervolgens met .style.display = 'none' onzichtbaar maakt.
Foutopsporing
Als het door AI gegenereerde script niet werkt, probeer het dan gewoon opnieuw. Of geef de AI door dat er iets misgaat om oplossingsvoorstellen en correcties te ontvangen. Controleer ook of in de meta-info bovenaan het script bij @match de juiste url voor de website staat, bijvoorbeeld https://www.youtube.com/* voor alle HTTPS-url’s die beginnen met www.youtube.com. Zonder het wildcard-sterretje moet de url exact kloppen. Als je de @match-regel weglaat, injecteert Violentmonkey je script in alle websites. Dat moet je echter goed overwegen, want scripts die specifiek zijn afgestemd op de structuur van een bepaalde website kunnen elders fouten veroorzaken.
De AI fouten laten opsporen, werkt het beste als je de AI een concrete Java Scriptfoutmelding meegeeft. Open via het browsermenu de ontwikkelaarstools en daar de console om eventuele fouten bij het uit voeren van de code te inspecteren. Dat kan ook met een toetsencombinatie: onder Windows en Linux met Ctrl + Shift + I en onder macOS Opt + Cmd + I. Zoek naar fouten die afkomstig zijn van je userscript. Je kunt die herkennen aan de in de meta-info vastgelegde scriptnaam (@name) gevolgd door .user.js en het regelnummer waar de fout optrad. Kopieer de fout naar de AI-chat, zodat de Java Scriptcode kan worden gecorrigeerd. Als je scripts maakt voor minder prominente websites of diensten op het intranet, moet je ervan uitgaan dat de AI niets weet over hun structuur en in het wilde weg gaat proberen om bepaalde elementen of functies te manipuleren. Dan moet je context geven, zoals een fragment van de websitebroncode of de identificatiekenmerken van elementen. Daarvoor zijn de ontwikkelaarstools van de browser weer nuttig. Klik bij de ontwikkelaarstools op de knop linksboven en vervolgens op een element van de website om direct naar de bijbehorende HTML- code te gaan. Kopieer die naar de AI-chat samen met een foutbeschrijving.
Achter de schermen
Met userscripts kun je interne processen van websites observeren die anders verborgen blijven. Probeer de volgende prompt: “Maak een Violentmonkey-script dat het plaatsen van cookies toont.” Nadat je het script hebt geïmporteerd en de website hebt vernieuwd, vind je in de console meldingen zoals ‘Cookie geplaatst: cookiebanner=closed; path=/; expires=Wed 22 May 2024 13:27:49 GMT’. Als je een verzoek zoals “Het script moet de cookies als melding op de website weergeven die na 5 seconden verdwijnt” toevoegt, moet het script het plaatsen van cookies direct op de website tonen en hoef je de console niet te openen. Bij onze test werd een klein div-element als overlay over de website geplaatst en een timer zorgde ervoor dat het na korte tijd weer verdween. Zoals altijd geldt: de oplossing kan in jouw geval anders zijn en mogelijk zijn er meerdere pogingen nodig voordat een script werkt. Om meldingen te tonen, kan je userscript ook de notification-API van de browser gebruiken en berichten genereren die als melding van je besturingssysteem verschijnen. Die verschijnen namelijk ook als de website op de achtergrond draait of als je het browservenster geminimaliseerd hebt. Dat is bijvoorbeeld nuttig om geïnformeerd te worden wanneer op een website een tijdrovende handeling voltooid is of er een nieuw bericht is binnen gekomen. Op die manier kun je ook andere web-API's benutten.
Workflow optimaliseren
De AI-assistent kan je browser nieuwe functies geven die normaal gesproken een eigen extensie zouden vergen. Om snel en eenvoudig op het web te zoeken, kun je de AI vragen een script te schrijven dat de gemarkeerde tekst naar een zoekmachine stuurt wanneer je een bepaalde toetsencombinatie indrukt. Dat kost ook niet veel eigen inspanning. Je zegt gewoon wat je wilt: “Maak een Violentmonkey-script dat de gemarkeerde term naar DuckDuckGo stuurt wanneer ik Ctrl en Shift indruk.” Na twee of drie pogingen zou je een werkend script moeten hebben dat een zoekopdracht start wanneer je tegelijkertijd op Ctrl + Shift drukt terwijl er tekst gemarkeerd is. Dat kan bijvoorbeeld een script opleveren dat met document.addEventListener naar toetsenbord-gebeurtenissen luistert (ctrlKey en shiftKey ), de geselecteerde tekst toewijst aan de url-parameter q van de DuckDuckGo-url (https://duckduckgo. com/?q=) en die met window.open een nieuw tabblad opent. Bonusopdracht: voeg een extra toetsencombinatie toe die de gemarkeerde term direct naar de ChatGPT-url https://chat.openai.com/ chat?q= stuurt, zodat je de AI-assistent altijd binnen handbereik hebt. Nu je die voorbeelden hebt gezien, vind je vast snel eigen ideeën om je workflow te optimaliseren.
Via de code-editor voeg je userscripts toe en bewerk je ze
Synchronisatie en mobiel gebruik
Als je tevreden bent met je scripts, kun je je creaties via de Violentmonkey-instellingen als reservekopie in een zipbestand bewaren. Voor gebruik op meerdere computers is de synchronisatiefunctie van de browserextensie beter geschikt. Die functie ondersteunt Dropbox, Google Drive, OneDrive en WebDAV-servers zoals Nextcloud. Ook op smartphones en tablets kun je je scripts uitproberen: Firefox voor Android kan de Violentmonkey-extensie eenvoudig installeren vanuit de add-ons-catalogus. Voor iOS en iPadOS is er de Safari-extensie Userscripts. Die is ook te gebruiken met de macOS-versie van Safari, waarvoor Violentmonkey niet beschikbaar is.
