Udvikling af browserudvidelser til Chrome og Edge · Lektion

Tilpasning af manifest på tværs af browsere

Identificér og håndtér forskelle i konfigurationer af manifest.json og API-adfærd mellem Chrome og Edge.

Lektion 1 af 411 trin

Tilpasning af manifest på tværs af browsere er en gratis Udvikling af browserudvidelser til Chrome og Edge-lektion på CoddyKit. Dette er lektion 1 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.

Hvorfor harmoni på tværs af browsere?

Når du udvikler browserudvidelser til flere platforme som Chrome og Edge, når dit projekt ud til et langt større publikum. Selvom begge browsere understøtter Manifest V3, kræver ægte kompatibilitet på tværs af browsere sans for detaljer.

I denne lektion undersøger vi de små forskelle i konfigurationer af manifest.json og i API'ernes funktionsmåde, så du kan bygge udvidelser, der fungerer problemfrit overalt.

Manifest V3 i kernen: Fælles grundlag

Mange centrale felter i din manifest.json er identiske i Chrome og Edge, hvilket giver et solidt fælles grundlag:

manifest_version: Altid 3 for aktuelle udvidelser.
name, version, description: Standardmetadata.
action: Definerer pop op-vinduet på værktøjslinjen samt dets ikon og titel.

Disse felter kræver sjældent browserspecifikke justeringer.

{
  "manifest_version": 3,
  "name": "My Cross-Browser Extension",
  "version": "1.0",
  "description": "A simple extension for Chrome and Edge.",
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  }
}

Tilladelser: Universelle erklæringer

Chrome og Edge bruger den samme syntaks til at angive permissions og host_permissions. De bestemmer, hvad din udvidelse kan gøre, og hvilke websteder den kan interagere med.

Det er afgørende at angive dem omhyggeligt, da enhver forskel kan føre til en tilladelsesadvarsel eller funktionsfejl i den ene browser.

{
  "permissions": [
    "storage",
    "activeTab"
  ],
  "host_permissions": [
    "*://*.example.com/*",
    "https://www.google.com/*"
  ]
}

Nuancer i Content Security Policy (CSP)

Nøglen content_security_policy bruges i begge browsere til at begrænse angrebstyper, der injicerer indhold. Der kan dog forekomme små forskelle i standardværdier eller håndhævelse, især for direktiverne script-src og object-src.

Test altid din CSP i begge browsere, da en politik, der er for streng i den ene, kan ødelægge funktionaliteten, mens en for lempelig politik kan udgøre en sikkerhedsrisiko.

{
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'"
  }
}

Regelsæt for `declarativeNetRequest`

API'et declarativeNetRequest gør det muligt at blokere eller ændre netværksanmodninger uden at opfange dem, hvilket forbedrer privatliv og ydeevne. Strukturen til definition af regelsæt er i høj grad standardiseret på tværs af browsere.

Selvom formatet er ens, skal du være opmærksom på, at browserspecifikke begrænsninger for antallet af regler eller regelsæt kan variere en smule. Se altid den officielle dokumentation for de aktuelle begrænsninger.

{
  "permissions": [
    "declarativeNetRequest"
  ],
  "host_permissions": [
    "<all_urls>"
  ],
  "declarative_net_request": {
    "rule_resources": [
      {
        "id": "ruleset_1",
        "enabled": true,
        "path": "rules.json"
      }
    ]
  }
}

API-funktionsmåde: Eksempel med `chrome.tabs`

Selvom de fleste chrome.*-API'er er udviklet med henblik på kompatibilitet, kan der opstå små forskelle i funktionsmåden. Når faner for eksempel oprettes eller opdateres med chrome.tabs, kan standardadfærden eller rækkefølgen af udløste hændelser være forskellig.

Kontrollér altid den præcise funktionsmåde for komplekse API-kald, især dem der involverer brugergrænsefladen eller navigation.

chrome.action.onClicked.addListener(async (tab) => {
  const newTab = await chrome.tabs.create({
    url: 'https://example.com/new-page',
    active: false
  });
  console.log('New tab created:', newTab.id);
  // Edge might handle 'active: false' slightly differently
  // or fire specific events in a different order.
});

API-funktionsmåde: Kvoter for `chrome.storage`

API'et chrome.storage giver persistent lagring af data til din udvidelse. Selvom den grundlæggende funktionalitet er robust på tværs af browsere, kan de faktiske lagerkvoter variere.

For eksempel kan QUOTA_BYTES (det samlede antal byte for sync-lagring) og QUOTA_BYTES_PER_ITEM have lidt forskellige begrænsninger i Chrome og Edge. Design din lagringsstrategi med den laveste fælles grænse for øje.

chrome.storage.sync.set({
  'user_setting': 'value_A'
}, () => {
  if (chrome.runtime.lastError) {
    console.error('Storage error:', chrome.runtime.lastError.message);
    // Check limits if storage fails unexpectedly.
  } else {
    console.log('Setting saved.');
  }
});

Bedste praksis for lokalisering (`_locales`)

Internationalisering af din udvidelse ved hjælp af mappen _locales og default_locale i dit manifest er en standardpraksis, der understøttes af begge browsere.

Sørg for, at dine meddelelsesnøgler og formateringen af pladsholdere er ensartede i alle lokaliseringsfiler. Selvom systemet er ens, sikrer test af oversatte tekststrenge i begge browsere korrekt visning og forebygger problemer med layoutet.

{
  "default_locale": "en",
  "name": "__MSG_extensionName__",
  "description": "__MSG_extensionDescription__"
}

Betingede manifester med byggeværktøjer

I avancerede scenarier, hvor Chrome og Edge kræver markant forskellige manifestkonfigurationer (f.eks. unikke tilladelser eller forskellige ikoner til branding), er én enkelt manifest.json muligvis ikke tilstrækkelig.

Mange udviklere bruger byggeværktøjer (f.eks. Webpack eller brugerdefinerede scripts) til at generere browserspecifikke manifest.json-filer og pakke dem derefter. Det giver maksimal fleksibilitet, men øger kompleksiteten i byggeprocessen.

Hurtigt tjek: Nuancer på tværs af browsere

Når du udvikler en browserudvidelse til både Chrome og Edge, hvilket aspekt kræver mest sandsynligt en grundig gennemgang og eventuelle justeringer på grund af små forskelle i funktionsmåden, selvom API-syntaksen er identisk?

Besvar den i den interaktive lektion

Opsummering: Navigering i manifester på tværs af browsere

Du har lært, at selvom Chrome og Edge deler en i høj grad kompatibel Manifest V3-struktur, kræver udvikling på tværs af browsere sans for detaljer.

Centrale manifestfelter og erklæringer af tilladelser er for det meste ens.
CSP, API'ernes funktionsmåde (som kvoterne for chrome.tabs og chrome.storage) samt lokalisering bør gennemgås og testes omhyggeligt i begge browsere.
Ved større forskelle kan byggeværktøjer generere browserspecifikke manifester.

Grundig test er din bedste ven, hvis du vil have en virkelig harmonisk browserudvidelse!

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 “Tilpasning af manifest på tværs af browsere” gratis?

Ja — hele teksten til “Tilpasning af manifest på tværs af browsere” 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 “Tilpasning af manifest på tværs af browsere”?

Identificér og håndtér forskelle i konfigurationer af manifest.json og API-adfærd mellem Chrome og Edge. 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 1 af 4.

Hvor lang tid tager lektionen “Tilpasning af manifest på tværs af browsere”?

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

Tilpasning af manifest på tværs af browsere
Brug af WebExtension-polyfills
Undersøg frameworks til udvikling af udvidelser
Pakning og publicering til flere butikker

← Tilbage til Udvikling af browserudvidelser til Chrome og Edge