Utveckling av webbläsartillägg (Chrome och Edge) · Lektion

Manifestjusteringar för flera webbläsare

Identifiera och hantera skillnader i konfigurationer av manifest.json och API-beteenden mellan Chrome och Edge.

Lektion 1 av 411 steg

Manifestjusteringar för flera webbläsare är en gratis lektion i Utveckling av webbläsartillägg (Chrome och Edge) på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Utveckling av webbläsartillägg (Chrome och Edge), och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Utveckling av webbläsartillägg (Chrome och Edge) innehåller totalt 4 lektioner.

Varför samstämmighet mellan webbläsare?

Genom att utveckla webbläsartillägg för flera plattformar, till exempel Chrome och Edge, når projektet en betydligt större målgrupp. Även om båda webbläsarna stöder Manifest V3 kräver verklig kompatibilitet mellan webbläsare noggrannhet.

I den här lektionen utforskar vi de subtila skillnaderna i konfigurationer av manifest.json och i API:ernas beteende, så att ni kan bygga tillägg som fungerar sömlöst överallt.

Manifest V3 i grunden: Gemensam bas

Många centrala fält i manifest.json är identiska i Chrome och Edge, vilket ger en stabil gemensam grund:

manifest_version: Alltid 3 för aktuella tillägg.
name, version, description: Standardmetadata.
action: Definierar popupfönstret i verktygsfältet samt dess ikon och titel.

Dessa fält kräver sällan webbläsarspecifika justeringar.

{
  "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"
  }
}

Behörigheter: Universella deklarationer

Chrome och Edge använder samma syntax för att deklarera permissions och host_permissions. Dessa anger vad ert tillägg kan göra och vilka webbplatser det kan interagera med.

Det är viktigt att deklarera dem noggrant, eftersom alla skillnader kan leda till en behörighetsvarning eller att funktionaliteten inte fungerar i den ena webbläsaren.

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

Finesser i Content Security Policy (CSP)

Nyckeln content_security_policy används i båda webbläsarna för att motverka injiceringsattacker. Det kan dock finnas subtila skillnader i standardvärden eller tillämpning, särskilt för direktiven script-src och object-src.

Testa alltid er CSP i båda webbläsarna. En policy som är för strikt i den ena kan göra att funktionalitet slutar fungera, medan en som är för tillåtande kan utgöra en säkerhetsrisk.

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

Regeluppsättningar för `declarativeNetRequest`

API:et declarativeNetRequest gör det möjligt att blockera eller ändra nätverksbegäranden utan att fånga upp dem, vilket förbättrar integritet och prestanda. Strukturen för att definiera regeluppsättningar är i hög grad standardiserad mellan webbläsare.

Formatet är konsekvent, men tänk på att webbläsarspecifika begränsningar för antalet regler eller regeluppsättningar kan skilja sig något. Läs alltid den officiella dokumentationen för aktuella begränsningar.

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

API-beteende: Exempel med `chrome.tabs`

De flesta chrome.*-API:er är utformade för kompatibilitet, men subtila skillnader i beteendet kan förekomma. Att till exempel skapa eller uppdatera flikar med chrome.tabs kan ha olika standardbeteenden eller ordningsföljder för när händelser utlöses.

Kontrollera alltid det exakta beteendet hos komplexa API-anrop, särskilt sådana som omfattar interaktion med användargränssnittet eller navigering.

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-beteende: Kvoter för `chrome.storage`

API:et chrome.storage tillhandahåller beständig lagring för tilläggets data. Kärnfunktionerna fungerar stabilt mellan webbläsare, men de faktiska lagringskvoterna kan variera.

Exempelvis kan QUOTA_BYTES (totalt antal byte för sync-lagring) och QUOTA_BYTES_PER_ITEM ha något olika gränser i Chrome och Edge. Utforma er lagringsstrategi utifrån den lägsta gemensamma gränsen.

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.');
  }
});

Bästa praxis för lokalisering (`_locales`)

Att internationalisera ert tillägg med mappen _locales och default_locale i manifestet är en standardmetod som stöds av båda webbläsarna.

Se till att meddelandenycklar och platshållarformat är konsekventa i alla lokalfiler. Systemet är konsekvent, men genom att testa översatta strängar i båda webbläsarna säkerställer ni att de visas korrekt och undviker layoutproblem.

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

Villkorsstyrda manifest med byggverktyg

I avancerade scenarier där Chrome och Edge kräver väsentligt olika manifestkonfigurationer (till exempel unika behörigheter eller olika ikoner för profilering) kanske ett enda manifest.json inte räcker.

Många utvecklare använder byggverktyg, till exempel Webpack eller anpassade skript, för att generera webbläsarspecifika manifest.json-filer och paketera dem därefter. Det ger maximal flexibilitet men ökar komplexiteten i byggprocessen.

Snabbtest: skillnader mellan webbläsare

När ni utvecklar ett webbläsartillägg för både Chrome och Edge, vilken aspekt kräver troligen noggrann granskning och eventuella justeringar på grund av subtila beteendeskillnader, även om API-syntaxen är identisk?

Besvara frågan i den interaktiva lektionen

Sammanfattning: Navigera bland webbläsarspecifika manifest

Ni har lärt er att Chrome och Edge visserligen har en i stort sett kompatibel Manifest V3-struktur, men att utveckling för flera webbläsare kräver noggrannhet.

Centrala manifestfält och behörighetsdeklarationer är i huvudsak konsekventa.
CSP, API-beteenden (som kvoter för chrome.tabs och chrome.storage) samt lokalisering bör granskas noggrant och testas i båda webbläsarna.
Vid stora skillnader kan byggverktyg generera webbläsarspecifika manifest.

Grundliga tester är er bästa hjälp för att skapa ett verkligt samstämmigt webbläsartillägg.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 12
Lektioner: 48

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Manifestjusteringar för flera webbläsare” gratis?

Ja – hela texten till ”Manifestjusteringar för flera webbläsare” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Utveckling av webbläsartillägg (Chrome och Edge), kan Ni uppgradera till CoddyKit PRO. Kursen i Utveckling av webbläsartillägg (Chrome och Edge) innehåller totalt 4 lektioner.

Vad lär jag mig i ”Manifestjusteringar för flera webbläsare”?

Identifiera och hantera skillnader i konfigurationer av manifest.json och API-beteenden mellan Chrome och Edge. Ni övar på Utveckling av webbläsartillägg (Chrome och Edge) med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Utveckling av webbläsartillägg (Chrome och Edge)?

Du behöver inga förkunskaper. Utbildningen i Utveckling av webbläsartillägg (Chrome och Edge) på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Manifestjusteringar för flera webbläsare”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Utveckling av webbläsartillägg (Chrome och Edge)-lektionen?

Ja. Varje Utveckling av webbläsartillägg (Chrome och Edge)-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Manifestjusteringar för flera webbläsare
Använda WebExtension-polyfills
Utforska ramverk för tilläggsutveckling
Paketering och publicering i flera butiker

← Tillbaka till Utveckling av webbläsartillägg (Chrome och Edge)