Chrome extensie maken met AI: zo bouw je er zelf een zonder code
Je hoeft echt geen programmeur te zijn om een chrome extensie te maken met ai. Ik heb er inmiddels drie gebouwd, en de fijnste begon als een simpel idee: een knop die al mijn open tabbladen sorteert op website. Het lastigste was niet de code schrijven. Het was bedenken wat ik nou eigenlijk wilde.
Misschien herken je dat. Je hebt tien tabbladen open, je raakt kwijt waar wat staat, en je denkt: hier zou toch iets voor moeten bestaan. Dat iets kun je nu zelf bouwen. Je beschrijft wat je wilt, AI zet dat om in code, en jij laadt het in Chrome. Klaar.
Wat je nodig hebt om te starten
Een Chrome-extensie is een mapje met een paar bestanden. Het belangrijkste bestand heet manifest.json. Daar staat in hoe je extensie heet, welke versie hij heeft en welke rechten hij nodig heeft. De logica maak je in JavaScript.
En nee, je hoeft die JavaScript niet uit je hoofd te kennen. De AI schrijft het grootste deel. Jij moet alleen duidelijk kunnen zeggen wat je extensie moet doen. Dat is de enige echte vaardigheid.
Sommige extensies hebben extra rechten nodig, bijvoorbeeld om tabbladen te lezen. Chrome vraagt daar toestemming voor. Hou die rechten beperkt, dan blijft je extensie overzichtelijk en krijg je minder waarschuwingen.
Dit is geen tovermiddel. Soms geeft AI code die bijna werkt, maar net niet. Dan plak je de foutmelding terug en vraag je wat er mis is. Net als bij een digitaal product maken is het: klein beginnen, testen, opnieuw proberen.
De basis staat in een manifest
Open je editor en maak een mapje met een duidelijke naam, bijvoorbeeld tabbladen-opruimer. Daar maak je een bestand in dat manifest.json heet. Dat bestand is een blok tekst met velden als name, version en permissions.
Mijn eerste fout was dat ik zelf het manifest wilde schrijven. Niet doen. Gebruik AI. Een prompt als deze werkt prima:
Schrijf een manifest.json voor een Chrome-extensie die tabbladen kan opslaan en sluiten. Gebruik manifest versie 3. Geef de extensie de naam Tabbladen Opruimer.
Let op: manifest versie 3 is nu de standaard. Chrome weigert soms oude versies. Vraag daarom altijd expliciet om versie 3.
AI helpt je met de logica
Na het manifest komt het echte werk. Je wil dat er iets gebeurt als je op de knop klikt. Ook dat kun je als opdracht aan AI geven.
Een voorbeeld:
Maak een popup voor mijn extensie. Als ik op de knop klik, zet dan de titel en URL van de actieve tab in een lijst. Voeg ook een knop toe om de tab te sluiten. Bewaar de opgeslagen tabs in local storage, zodat ze na een herstart niet weg zijn.
AI komt dan terug met twee of drie bestanden. Meestal een popup.html, een popup.js en soms een styles.css. Plak ze in je mapje, precies zoals de AI zegt. Sla alles op. Let ook op de uitleg die AI bij de code geeft. Daar leer je sneller van dan van twintig tutorials.
Toen ik mijn eerste extensie testte, gebeurde er niks. De popup bleef leeg. Bleek dat ik in het manifest de verkeerde paden had staan. Ik plakte de foutmelding uit de console in mijn AI-tool, en de oplossing kwam direct. Dat is het fijne van AI: je hoeft de fout niet zelf te snappen, je moet alleen de melding kunnen doorgeven.
Testen in Chrome
- Ga in Chrome naar chrome://extensions.
- Zet rechtsboven Ontwikkelaarsmodus aan.
- Klik linksboven op ‘Uitgepakte extensie laden’.
- Kies het mapje dat je net hebt gemaakt.
- Je extensie staat erbij. Klik op het puzzelstukje rechtsboven om hem vast te pinnen.
Elke keer dat je code verandert, klik je op het rondje met de pijl op je extensie. Daarna herlaad je de pagina waar je hem op test. Pas dan zie je of je wijziging werkt.
Houd je extensie klein en simpel
Mijn eerste versie had drie knoppen. Twee daarvan deden iets vaags, en ik snapte na een week zelf niet meer waarom. Daarna heb ik alles teruggebracht naar één functie: tabbladen sluiten en opslaan. Dat werd pas een fijne tool.
Dus begin met één actie. Geen instellingen, geen thema’s, geen notificaties. Dan blijft testen overzichtelijk. Wil je de extensie later delen met vrienden, dan kun je het mapje als zip versturen. Publiceren in de Chrome Web Store kan ook, maar dat is een apart traject waar Google je code bekijkt.
Veelgestelde vragen
Heb ik programmeerkennis nodig om een Chrome extensie te maken met AI?
Nee. Je moet vooral kunnen uitleggen wat je wilt. De code schrijft de AI. Gaandeweg pik je vanzelf wat termen op, zoals manifest en local storage, maar dat hoeft niet van tevoren.
Kan ik mijn extensie delen met anderen?
Ja. Voor eigen gebruik of voor vrienden deel je het mapje als zip. Zij zetten dan ontwikkelaarsmodus aan en laden de uitgepakte map. Voor de Chrome Web Store heb je een apart ontwikkelaarsaccount nodig.
Hoe lang duurt het om een simpele extensie te bouwen?
Reken op een avond voor een eerste versie met één functie. Het testen en foutjes oplossen kost de meeste tijd. Mijn eerste extensie draaide na anderhalf uur, maar had pas na drie avonden de vorm die ik wilde.
Waarom doet mijn extensie niets?
Meestal klopt het pad in je manifest niet, of ben je vergeten de extensie te herladen na een wijziging. Plak de foutmelding uit de console in je AI-tool en vraag om hulp. Dat lost het bijna altijd sneller op dan zelf zoeken.
Zodra je eerste extensie draait, is de drempel weg. Je merkt dat je ook andere kleine dingen zelf kunt bouwen: een tekst-tool, een notitieblokje, een automatische invuller. Begin klein en bouw iets wat je zelf gaat gebruiken. Dat is de beste test of je idee goed is.
