En udvidelsesprojekts anatomi
Få en gennemgang af standardfilerne og -mapperne i en Manifest V3-browserudvidelse, og se, hvad hver af dem bruges til.
En udvidelsesprojekts anatomi er en gratis Udvikling af browserudvidelser til Chrome og Edge-lektion på CoddyKit. Dette er lektion 4 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.
Udvidelser er bare webfiler
En udvidelse er blot en samling af HTML, CSS, JavaScript og en konfigurationsfil, som browseren indlæser i en særlig kontekst med ekstra funktioner.
manifest.json som hjerte
Alle udvidelser skal have en manifest.json i roden — den angiver navn, version, tilladelser og scripts. Uden den ignorerer browseren mappen.
{
"manifest_version": 3,
"name": "My Extension",
"version": "1.0.0"
}En typisk mappestruktur
Strukturen er fleksibel, men en ryddelig mappestruktur er nemmere at vedligeholde: manifestet i roden samt mapper til popup, baggrund, indhold og ikoner.
Baggrundens service worker
I Manifest V3 kører baggrundslogikken i en service worker. Den håndterer hændelser, selv når ingen brugergrænseflade er åben, men afsluttes, når den er inaktiv, for at spare hukommelse.
{
"background": {
"service_worker": "background.js"
}
}Handlingen popup
Handlingen definerer værktøjslinjeknappen og den popup, den åbner — selv blot en lille HTML-side. Konfigurationen nedenfor viser begge felter.
{
"action": {
"default_popup": "popup/popup.html",
"default_title": "Open My Extension"
}
}Contentscripts
Contentscripts kører inde på websider, så din udvidelse kan læse og ændre DOM'en. Du begrænser dem med URL-matchmønstre.
{
"content_scripts": [{
"matches": ["https://*.example.com/*"],
"js": ["content/main.js"]
}]
}Ikoner i flere størrelser
Angiv dit ikon i flere størrelser — browsere viser det forskellige steder og ved forskellige opløsninger, så det forbliver skarpt overalt.
{
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
}Angivelse af tilladelser
Arrayet permissions viser de browser-API'er, du har brug for, for eksempel storage eller tabs. Bed kun om det, du faktisk bruger.
{
"permissions": ["storage", "activeTab"]
}Webtilgængelige ressourcer
Hvis en webside skal indlæse en fil, der er pakket i din udvidelse, skal du angive den under web_accessible_resources — ellers blokerer browseren adgangen.
{
"web_accessible_resources": [{
"resources": ["images/logo.png"],
"matches": ["https://*.example.com/*"]
}]
}Sådan kommunikerer delene
Popup, contentscripts og service worker lever i separate kontekster, så de kommunikerer via messaging-API'en og ikke via delte variabler.
chrome.runtime.sendMessage({ type: 'PING' })Hold det organiseret
Efterhånden som projektet vokser, skal du samle relaterede filer i mapper og holde manifest.json enkelt. En forudsigelig struktur gør fejlfinding og gennemgang i webbutikken nemmere.
Hurtigt tjek
Tjek, hvad du husker om udvidelsers struktur.
Opsummering
Du har gennemgået byggestenene: manifest.json angiver alt, en service worker kører i baggrunden, handlingen styrer popuppen, og contentscripts påvirker sider.
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
Ofte stillede spørgsmål
Er lektionen “En udvidelsesprojekts anatomi” gratis?
Ja — hele teksten til “En udvidelsesprojekts anatomi” 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 “En udvidelsesprojekts anatomi”?
Få en gennemgang af standardfilerne og -mapperne i en Manifest V3-browserudvidelse, og se, hvad hver af dem bruges til. 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 4 af 4.
Hvor lang tid tager lektionen “En udvidelsesprojekts anatomi”?
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
- Hvad er browserudvidelser?
- Opsætning af udviklingsmiljø
- Deres første 'Hello World'-udvidelse
- En udvidelsesprojekts anatomi