Sette opp utviklingsmiljøet
Konfigurer utviklingsmiljøet Deres for å opprette utvidelser til Chrome og Edge, inkludert nettleseroppsett og grunnleggende verktøy.
Sette opp utviklingsmiljøet er en gratis leksjon i Utvikling av nettleserutvidelser (Chrome og Edge) på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Utvikling av nettleserutvidelser (Chrome og Edge), og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Utvikling av nettleserutvidelser (Chrome og Edge) inneholder totalt 4 leksjoner.
Gjør Dem klar til å bygge
Før De begynner å bygge, må De sette opp arbeidsområdet – når verktøyene er klargjort først, blir kodingen enklere, og De kan teste utvidelsene effektivt.
Nettleseren er laboratoriet Deres
Nettleseren er laboratoriet Deres. Chrome og Edge har innebygde utviklerfunksjoner; første steg er å slå på den spesielle Developer Mode.
Slå på Developer Mode
Aktiver Developer Mode: åpne chrome://extensions og slå på bryteren øverst til høyre. Da kan De laste inn og teste egne utvidelser.
Utvidelsens hjem
Hver utvidelse trenger sin egen mappe for alle filene. Opprett en tom mappe – for eksempel my-first-extension – der De kan legge manifestet og koden.
Den nødvendige manifestfilen
manifest.json er byggeplanen for utvidelsen – den forteller nettleseren de viktigste detaljene. Begynn med en minimal fil i mappen.
Velg et koderedigeringsprogram
Alle redigeringsprogrammer kan brukes, men et ordentlig koderedigeringsprogram gir syntaksutheving, autofullføring og feilsøking. VS Code er et gratis og populært valg – installer det om nødvendig.
Last inn den upakkede utvidelsen
Når Developer Mode er aktivert, klikker De på Load unpacked og velger mappen. Utvidelsen skal vises i listen, kanskje også med et ikon på verktøylinjen.
Last inn på nytt for å se oppdateringer
Etter at De har redigert filer, ser nettleseren ikke endringene før De laster inn på nytt – klikk på oppdateringsikonet på utvidelseskortet i chrome://extensions.
Feilsøk med DevTools
Feilsøk utvidelser med DevTools, akkurat som nettsider. Hvert kort har en lenke til inspeksjon av bakgrunnens «service worker» eller popup-vinduet.
Kontroll av utviklingsmiljøet
De har nå lært de viktigste trinnene for å klargjøre nettleseren og laste inn den første utvidelsen. La oss teste forståelsen Deres!
Hvilken av handlingene nedenfor er nødvendig for å se endringer i utvidelsen etter at filene er endret?
Oppsettet er fullført
Miljøet Deres er klart: Developer Mode er aktivert, De har en mappe med manifest.json, kan laste inn og laste inn upakkede utvidelser på nytt, og har DevTools til feilsøking. Da går vi videre!
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 12
- Leksjoner
- 48
Ofte stilte spørsmål
Er leksjonen «Sette opp utviklingsmiljøet» gratis?
Ja – hele teksten i «Sette opp utviklingsmiljøet» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Utvikling av nettleserutvidelser (Chrome og Edge)-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Utvikling av nettleserutvidelser (Chrome og Edge) inneholder totalt 4 leksjoner.
Hva lærer jeg i «Sette opp utviklingsmiljøet»?
Konfigurer utviklingsmiljøet Deres for å opprette utvidelser til Chrome og Edge, inkludert nettleseroppsett og grunnleggende verktøy. Du øver på Utvikling av nettleserutvidelser (Chrome og Edge) med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Utvikling av nettleserutvidelser (Chrome og Edge)?
Ingen tidligere erfaring er nødvendig. Utvikling av nettleserutvidelser (Chrome og Edge) på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «Sette opp utviklingsmiljøet»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Utvikling av nettleserutvidelser (Chrome og Edge)-leksjonen?
Ja. Alle Utvikling av nettleserutvidelser (Chrome og Edge)-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Hva er nettleserutvidelser?
- Sette opp utviklingsmiljøet
- Deres første «Hello World»-utvidelse
- Anatomien til et utvidelsesprosjekt