Opsætning af udviklingsmiljø

Før du bygger, skal du sætte dit arbejdsområde op – når værktøjerne er klar først, bliver kodningen nemmere, og du kan teste dine udvidelser effektivt.

Din browser er dit laboratorium. Chrome og Edge har indbyggede udviklerfunktioner; det første trin er at slå deres særlige "Udviklertilstand" til.

Aktivér Udviklertilstand: Åbn chrome://extensions, og slå kontakten øverst til højre til. Så kan du indlæse og teste dine egne udvidelser.

Hver udvidelse skal have sin egen mappe til alle sine filer. Opret en tom mappe – for eksempel my-first-extension – hvor vi lægger manifestet og koden.

manifest.json er din udvidelses plan – den fortæller browseren de vigtigste oplysninger. Start med en minimal fil i din mappe.

Alle editorer kan bruges, men en rigtig kodeeditor giver syntaksfremhævning, autofuldførelse og fejlfinding. VS Code er et gratis og populært valg – hent det, hvis du har brug for det.

Når Udviklertilstand er slået til, skal du klikke på Load unpacked og vælge din mappe. Din udvidelse bør nu vises på listen, muligvis med et ikon på værktøjslinjen.

Efter redigering af filer kan browseren ikke se ændringerne, før du genindlæser udvidelsen – klik på genindlæsningsikonet på udvidelsens kort på chrome://extensions.

Find fejl i udvidelser med DevTools, ligesom på websider. Hvert kort har et link til inspektøren for dens baggrunds-"service worker" eller popup, så du kan undersøge den nærmere.

Dit miljø er klar: Udviklertilstand er slået til, du har en mappe med manifest.json, du kan indlæse og genindlæse udpakkede udvidelser, og DevTools er klar til fejlfinding. Lad os komme videre!