Udvikling af browserudvidelser til Chrome og Edge · Lektion

Baggrundsserviceworkere

Lær, hvordan baggrundsserviceworkere håndterer hændelser, persistent logik og livscyklus i Deres udvidelse.

Lektion 2 af 410 trin

Baggrundsserviceworkere er en gratis Udvikling af browserudvidelser til Chrome og Edge-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Udvikling af browserudvidelser til Chrome og Edge, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Udvikling af browserudvidelser til Chrome og Edge-kurset indeholder 4 lektioner i alt.

Udvidelsens hjerne: Service Workers

Velkommen til kernen i din Manifest V3-udvidelse: baggrunds-Service Workers! Tænk på dem som udvidelsens lydløse hjerne.

De har ansvaret for at lytte efter browserhændelser, administrere vedvarende logik og sikre, at din udvidelse kører effektivt uden konstant at bruge ressourcer.

MV3: Hvorfor Service Workers?

I Manifest V2 brugte udvidelser ofte "vedvarende baggrundssider", der kørte konstant. Manifest V3 introducerede Service Workers som et mere moderne og energieffektivt alternativ.

Hændelsesstyrede: De vågner kun, når der opstår en hændelse.
Midlertidige: De går i inaktiv tilstand og afsluttes, når der ikke længere er brug for dem.
Energibesparende: Denne cyklus med at "sove og vågne" sparer batteri og hukommelse.

Erklær din Service Worker

Hvis du vil bruge en Service Worker, skal du erklære den i din manifest.json-fil. Det fortæller browseren, hvilken JavaScript-fil der fungerer som dit baggrundsscript.

Den angives under nøglen 'background', som peger på dit Service Worker-script.

{
  "manifest_version": 3,
  "name": "My Service Worker Extension",
  "version": "1.0",
  "background": {
    "service_worker": "service-worker.js"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

Service Workers livscyklus

I modsætning til et traditionelt program, der altid er tændt, har en Service Worker en dynamisk livscyklus:

Den aktiveres, når der opstår en hændelse, som den lytter efter.
Den udfører de tilknyttede opgaver.
Efter en periode uden aktivitet (som regel nogle få sekunder) bliver den inaktiv og afsluttes til sidst.

Den aktiveres igen, næste gang en hændelse udløser den.

Lyt efter hændelser

Service Workers fungerer primært ved at lytte efter browserhændelser med chrome-API'et. Når en hændelse udløses, går din worker-kode i gang!

Almindelige hændelser omfatter:

chrome.runtime.onInstalled: Når udvidelsen installeres eller opdateres.
chrome.action.onClicked: Når der klikkes på udvidelsens ikon på værktøjslinjen.

Hændelse: Udvidelsen er installeret

Lad os skrive en simpel service worker, der logger en meddelelse, når din udvidelse installeres eller opdateres første gang. Det er et godt sted til engangsopgaver ved opsætning.

Opret en fil med navnet service-worker.js:

// service-worker.js
chrome.runtime.onInstalled.addListener(() => {
  console.log('CoddyKit Extension installed or updated!');
  // You could set default preferences here
  chrome.storage.sync.set({ 'theme': 'light' });
});

Hændelse: Når der klikkes på udvidelsesikonet

En anden almindelig hændelse opstår, når brugeren klikker på din udvidelses ikon i browserens værktøjslinje. Du kan få din service worker til at reagere på denne interaktion, f.eks. ved at åbne et nyt faneblad.

// service-worker.js
chrome.action.onClicked.addListener((tab) => {
  console.log('Extension icon clicked! Current tab ID:', tab.id);
  // Open a new tab to a specific URL
  chrome.tabs.create({ url: 'https://www.google.com/search?q=CoddyKit' });
});

Fejlfinding af din service worker

Hvis du vil se dine console.log-meddelelser og fejlfinde din service worker, skal du bruge browserens udviklerværktøjer.

I Chrome/Edge skal du gå til chrome://extensions, aktivere "Udviklertilstand", finde din udvidelse og klikke på linket "service worker" for at åbne det tilhørende DevTools-vindue.

Hurtigt tjek: Service workerens rolle

Hvad er en vigtig egenskab ved baggrunds-serviceworkere i Manifest V3 sammenlignet med baggrundssider i Manifest V2?

Besvar den i den interaktive lektion

Opsamling: Baggrunds-serviceworkere

Godt arbejde! Du har lært om den grundlæggende rolle, som baggrunds-serviceworkere spiller i Manifest V3-udvidelser:

De er de hændelsesstyrede "hjerner" i din udvidelse.
De erklæres i manifest.json.
De har en midlertidig livscyklus, hvor de vågner ved hændelser og derefter afsluttes.
Du bruger hændelseslyttere (f.eks. chrome.runtime.onInstalled og chrome.action.onClicked) til at få dem til at reagere på browserhændelser.

Nu ser vi nærmere på, hvordan tilladelser styrer, hvad din udvidelse kan gøre!

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 12
Lektioner: 48

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Baggrundsserviceworkere” gratis?

Ja — hele teksten til “Baggrundsserviceworkere” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Udvikling af browserudvidelser til Chrome og Edge-kurset, skal du opgradere til CoddyKit PRO. Udvikling af browserudvidelser til Chrome og Edge-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Baggrundsserviceworkere”?

Lær, hvordan baggrundsserviceworkere håndterer hændelser, persistent logik og livscyklus i Deres udvidelse. Du øver dig i Udvikling af browserudvidelser til Chrome og Edge med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Udvikling af browserudvidelser til Chrome og Edge?

Der kræves ingen tidligere erfaring. Udvikling af browserudvidelser til Chrome og Edge på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Baggrundsserviceworkere”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Udvikling af browserudvidelser til Chrome og Edge-lektion?

Ja. Alle Udvikling af browserudvidelser til Chrome og Edge-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Forståelse af Manifest V3-strukturen
Baggrundsserviceworkere
Tilladelser og værtsmatchning
Handling, ikoner og værktøjslinjeknappen

← Tilbage til Udvikling af browserudvidelser til Chrome og Edge