De ontwikkelomgeving instellen

Stel voordat je gaat bouwen je werkruimte in — als je eerst je hulpmiddelen voorbereidt, verloopt het programmeren soepeler en kun je je extensies efficiënt testen.

Je browser is je laboratorium. Chrome en Edge hebben ingebouwde ontwikkelaarstools; de eerste stap is hun speciale "Ontwikkelaarsmodus" inschakelen.

Schakel Ontwikkelaarsmodus in: open chrome://extensions en zet de schakelaar rechtsboven om. Daarmee kun je je eigen extensies laden en testen.

Elke extensie heeft een eigen map nodig voor al zijn bestanden. Maak een lege map — bijvoorbeeld my-first-extension — waarin we het manifest en de code plaatsen.

manifest.json is het bouwplan van je extensie — het vertelt de browser de belangrijkste gegevens. Begin met een minimale versie in je map.

Elke editor werkt, maar een echte code-editor biedt syntaxismarkering, automatisch aanvullen en foutopsporing. VS Code is de gratis, populaire keuze — installeer het als dat nodig is.

Klik met Ontwikkelaarsmodus ingeschakeld op Load unpacked en selecteer je map. Je extensie hoort in de lijst te verschijnen, mogelijk met een pictogram op de werkbalk.

Na het bewerken van bestanden ziet de browser de wijzigingen pas nadat je de extensie hebt herladen — klik op het vernieuwingspictogram op de kaart van je extensie in chrome://extensions.

Spoor fouten in extensies op met DevTools, net als bij webpagina's. Elke kaart bevat een koppeling naar de inspector van de achtergrond-"service worker" of popup, zodat je de werking kunt onderzoeken.

Je omgeving is ingesteld: Ontwikkelaarsmodus staat aan, er is een map met manifest.json, je kunt uitgepakte extensies laden en herladen en DevTools gebruiken voor foutopsporing. Op naar de volgende stap!