Utvikling av nettleserutvidelser: Navigering i Manifest V3 og JavaScript-APIer

Nettleserutvidelser tilbyr en kraftig måte å forbedre og tilpasse nettopplevelsen på. De lar utviklere legge til funksjonalitet i nettlesere, samhandle med nettsider og integrere med webtjenester. Denne guiden gir en omfattende oversikt over utvikling av nettleserutvidelser, med fokus på Manifest V3 og de sentrale JavaScript-APIene som driver disse utvidelsene.

Forståelse av nettleserutvidelser

En nettleserutvidelse er et lite program som utvider funksjonaliteten til en nettleser. Utvidelser kan endre nettsider, legge til nye funksjoner og integrere med eksterne tjenester. De er vanligvis skrevet i JavaScript, HTML og CSS, og pakket som en ZIP-fil med en manifestfil som beskriver utvidelsens metadata og tillatelser.

Populære bruksområder for nettleserutvidelser inkluderer:

• Annonseblokkerere: Fjerner annonser fra nettsider.
• Passordbehandlere: Lagrer og administrerer passord på en sikker måte.
• Produktivitetsverktøy: Forbedrer arbeidsflyten med funksjoner som oppgavehåndtering og notattaking.
• Innholdstilpasning: Endrer utseendet og oppførselen til nettsider.
• Tilgjengelighetsverktøy: Forbedrer nettilgjengeligheten for brukere med nedsatt funksjonsevne.

Manifest V3: Den nye standarden

Manifest V3 er den nyeste versjonen av manifestfilen for nettleserutvidelser, en JSON-fil som beskriver utvidelsens metadata, tillatelser og ressurser. Den introduserer betydelige endringer i utviklingsprosessen for utvidelser, med hovedfokus på forbedret sikkerhet, personvern og ytelse. Viktige endringer i Manifest V3 inkluderer:

• Service Workers: Erstatter bakgrunnssider med service workers for forbedret ytelse og redusert minnebruk. Service workers er hendelsesdrevne skript som kjører i bakgrunnen og håndterer hendelser som nettverksforespørsler og alarmer.
• Declarative Net Request API: Erstatter det blokkerende webRequest API-et med Declarative Net Request API for filtrering av nettverksforespørsler. Dette forbedrer personvern og sikkerhet ved å begrense utvidelsens tilgang til nettverkstrafikk.
• Content Security Policy (CSP): Håndhever strengere CSP-regler for å forhindre kjøring av vilkårlig kode og redusere sikkerhetsrisikoer.
• Manifestversjon: Nøkkelen manifest_version i manifest.json-filen må settes til 3.

Migrering fra Manifest V2 til Manifest V3

Migrering fra Manifest V2 til Manifest V3 krever nøye planlegging og kodeendringer. Her er en trinnvis guide:

1. Oppdater manifestfilen: Sett manifest_version til 3 og oppdater feltene permissions og background for å overholde kravene i Manifest V3.
2. Erstatt bakgrunnssider med service workers: Skriv om bakgrunnsskript som service workers, og håndter hendelser ved hjelp av API-ene chrome.scripting og chrome.alarms.
3. Migrer til Declarative Net Request API: Erstatt blokkerende webRequest API-kall med deklarative regler definert i declarativeNetRequest-API-et.
4. Oppdater Content Security Policy: Juster feltet content_security_policy i manifestfilen for å overholde strengere CSP-krav.
5. Test grundig: Test utvidelsen grundig i forskjellige nettlesere for å sikre kompatibilitet og riktig funksjonalitet.

Eksempel: Migrering av et bakgrunnsskript til en Service Worker

Manifest V2 (background.js):

            chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    return {cancel: true};
  },
  {urls: ["*.example.com/*"]},
  ["blocking"]
);

            

              
                Copy
              
            
          

Manifest V3 (service-worker.js):

            chrome.declarativeNetRequest.updateDynamicRules({
  removeRuleIds: [1],
  addRules: [{
    "id": 1,
    "priority": 1,
    "action": { "type": "block" },
    "condition": { "urlFilter": "*.example.com/*", "resourceTypes": ["main_frame", "sub_frame", "stylesheet", "script", "image", "object", "xmlhttprequest", "other"] }
  }]
});

            

              
                Copy
              
            
          

manifest.json (Manifest V3):

            {
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "A simple extension",
  "permissions": [
    "declarativeNetRequest",
    "declarativeNetRequestFeedback",
    "storage"
  ],
  "background": {
    "service_worker": "service-worker.js"
  },
  "declarative_net_request": {
    "rule_resources": [{
      "id": "ruleset_1",
      "enabled": true,
      "path": "rules.json"
    }]
  }
}

            

              
                Copy
              
            
          

Essensielle JavaScript-APIer for nettleserutvidelser

Nettleserutvidelser er avhengige av et sett med JavaScript-APIer for å samhandle med nettleseren og nettsider. Her er noen av de viktigste API-ene:

1. chrome.runtime

chrome.runtime-API-et gir tilgang til utvidelsens kjøretidsmiljø. Det lar utvidelser kommunisere med bakgrunnsskriptet, få tilgang til manifestfilen og administrere utvidelsens livssyklus.

Viktige metoder:

• chrome.runtime.sendMessage(): Sender en melding til bakgrunnsskriptet eller andre utvidelser.
• chrome.runtime.onMessage.addListener(): Lytter etter meldinger fra andre skript.
• chrome.runtime.getManifest(): Returnerer utvidelsens manifestfil som et JavaScript-objekt.
• chrome.runtime.reload(): Laster utvidelsen på nytt.

Eksempel: Sende en melding fra innholdsskript til bakgrunnsskript

Innholdsskript (content.js):

            chrome.runtime.sendMessage({message: "Hello from content script!"}, function(response) {
  console.log("Response from background script: ", response.message);
});

            

              
                Copy
              
            
          

Bakgrunnsskript (service-worker.js):

            chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log("Message from content script: ", request.message);
    sendResponse({message: "Hello from background script!"});
  }
);

            

              
                Copy
              
            
          

2. chrome.storage

chrome.storage-API-et gir en mekanisme for å lagre og hente data i utvidelsen. Det tilbyr både lokal og synkronisert lagring.

Viktige metoder:

• chrome.storage.local.set(): Lagrer data lokalt.
• chrome.storage.local.get(): Henter data fra lokal lagring.
• chrome.storage.sync.set(): Lagrer data som synkroniseres på tvers av brukerens enheter.
• chrome.storage.sync.get(): Henter data fra synkronisert lagring.

Eksempel: Lagre og hente data i lokal lagring

            // Lagre data
chrome.storage.local.set({key: "value"}, function() {
  console.log("Value is set to " + "value");
});

// Hente data
chrome.storage.local.get(["key"], function(result) {
  console.log("Value currently is " + result.key);
});

            

              
                Copy
              
            
          

3. chrome.tabs

chrome.tabs-API-et lar utvidelser samhandle med nettleserfaner. Det gir metoder for å opprette, spørre, endre og lukke faner.

Viktige metoder:

• chrome.tabs.create(): Oppretter en ny fane.
• chrome.tabs.query(): Spør etter faner som samsvarer med spesifikke kriterier.
• chrome.tabs.update(): Oppdaterer egenskapene til en fane.
• chrome.tabs.remove(): Lukker en fane.
• chrome.tabs.executeScript(): Utfører JavaScript-kode i en fane.

Eksempel: Opprette en ny fane

            chrome.tabs.create({url: "https://www.example.com"}, function(tab) {
  console.log("New tab created with ID: " + tab.id);
});

            

              
                Copy
              
            
          

4. chrome.alarms

chrome.alarms-API-et lar utvidelser planlegge oppgaver som skal utføres på et bestemt tidspunkt eller etter et spesifisert intervall. Dette er spesielt viktig i Manifest V3, da det erstatter bruken av tidtakere i bakgrunnssider, som ikke lenger støttes.

Viktige metoder:

• chrome.alarms.create(): Oppretter en ny alarm.
• chrome.alarms.get(): Henter en eksisterende alarm.
• chrome.alarms.clear(): Sletter en alarm.
• chrome.alarms.getAll(): Henter alle alarmer.
• chrome.alarms.onAlarm.addListener(): Lytter etter alarmhendelser.

Eksempel: Opprette en alarm

            chrome.alarms.create("myAlarm", {delayInMinutes: 1, periodInMinutes: 1});

chrome.alarms.onAlarm.addListener(function(alarm) {
  if (alarm.name === "myAlarm") {
    console.log("Alarm triggered!");
  }
});

            

              
                Copy
              
            
          

5. chrome.scripting

chrome.scripting-API-et lar utvidelser injisere JavaScript og CSS i nettsider. Dette API-et er en nøkkelkomponent i Manifest V3 og brukes av service workers for å samhandle med nettsider etter at de er lastet inn.

Viktige metoder:

• chrome.scripting.executeScript(): Utfører JavaScript-kode i en fane eller ramme.
• chrome.scripting.insertCSS(): Setter inn CSS i en fane eller ramme.

Eksempel: Injisere JavaScript i en fane

            chrome.scripting.executeScript({
  target: {tabId: tabId},
  function: function() {
    console.log("Injected script!");
    document.body.style.backgroundColor = 'red';
  }
});

            

              
                Copy
              
            
          

6. chrome.notifications

chrome.notifications-API-et lar utvidelser vise varsler til brukeren. Dette er nyttig for å gi oppdateringer, varsler og annen viktig informasjon.

Viktige metoder:

• chrome.notifications.create(): Oppretter et nytt varsel.
• chrome.notifications.update(): Oppdaterer et eksisterende varsel.
• chrome.notifications.clear(): Fjerner et varsel.
• chrome.notifications.getAll(): Henter alle varsler.

Eksempel: Opprette et varsel

            chrome.notifications.create('myNotification', {
  type: 'basic',
  iconUrl: 'icon.png',
  title: 'My Extension',
  message: 'Hello from my extension!'
}, function(notificationId) {
  console.log('Notification created with ID: ' + notificationId);
});

            

              
                Copy
              
            
          

7. chrome.contextMenus

chrome.contextMenus-API-et lar utvidelser legge til elementer i nettleserens kontekstmeny (høyreklikkmeny). Dette gir en praktisk måte for brukere å få tilgang til utvidelsens funksjonalitet direkte fra nettsider.

Viktige metoder:

• chrome.contextMenus.create(): Oppretter et nytt element i kontekstmenyen.
• chrome.contextMenus.update(): Oppdaterer et eksisterende element i kontekstmenyen.
• chrome.contextMenus.remove(): Fjerner et element fra kontekstmenyen.
• chrome.contextMenus.removeAll(): Fjerner alle elementer i kontekstmenyen som er opprettet av utvidelsen.

Eksempel: Opprette et element i kontekstmenyen

            chrome.contextMenus.create({
  id: "myContextMenuItem",
  title: "My Context Menu Item",
  contexts: ["page", "selection"]
}, function() {
  console.log("Context menu item created.");
});

chrome.contextMenus.onClicked.addListener(function(info, tab) {
  if (info.menuItemId === "myContextMenuItem") {
    console.log("Context menu item clicked!");
    alert("You clicked the context menu item!");
  }
});

            

              
                Copy
              
            
          

8. chrome.i18n

chrome.i18n-API-et brukes til å internasjonalisere utvidelsen din, slik at den blir tilgjengelig for brukere på forskjellige språk og i ulike regioner. Det gjør det mulig å tilby lokaliserte versjoner av utvidelsens brukergrensesnitt og meldinger.

Viktige metoder:

• chrome.i18n.getMessage(): Henter en lokalisert streng fra utvidelsens _locales-katalog.

Eksempel: Bruke chrome.i18n for lokalisering

Først oppretter du en _locales-katalog i rotmappen til utvidelsen din. Inne i denne oppretter du språkspesifikke mapper som en, es, fr, osv.

I hver språkmappe oppretter du en messages.json-fil. For eksempel, i _locales/en/messages.json:

            {
  "extensionName": {
    "message": "My Extension",
    "description": "The name of the extension."
  },
  "greetingMessage": {
    "message": "Hello, world!",
    "description": "A simple greeting message."
  }
}

            

              
                Copy
              
            
          

Deretter, i JavaScript-koden din:

            let extensionName = chrome.i18n.getMessage("extensionName");
let greeting = chrome.i18n.getMessage("greetingMessage");
console.log(extensionName); // Output: My Extension
console.log(greeting);      // Output: Hello, world!

            

              
                Copy
              
            
          

Kompatibilitet på tvers av nettlesere

Selv om Chrome er den mest populære nettleseren for utvidelsesutvikling, er det viktig å vurdere kompatibilitet på tvers av nettlesere. Firefox, Safari og andre nettlesere støtter også utvidelser, men deres APIer og manifestformater kan variere noe.

For å sikre kompatibilitet på tvers av nettlesere:

• Bruk WebExtensions API: WebExtensions API er et standardisert API for utvikling av nettleserutvidelser som støttes av flere nettlesere.
• Test i forskjellige nettlesere: Test utvidelsen din i forskjellige nettlesere for å identifisere og fikse kompatibilitetsproblemer.
• Bruk polyfills: Bruk polyfills for å tilby manglende API-funksjonalitet i forskjellige nettlesere.
• Betinget kode: Bruk betinget kode for å tilpasse deg nettleserspesifikke forskjeller. For eksempel: if (typeof browser === "undefined") { var browser = chrome; }

Beste praksis for utvikling av nettleserutvidelser

Her er noen beste praksiser du bør følge når du utvikler nettleserutvidelser:

• Minimer tillatelser: Be kun om tillatelsene som utvidelsen din absolutt trenger. Dette forbedrer brukernes personvern og sikkerhet.
• Bruk sikre kodingspraksiser: Følg sikre kodingspraksiser for å forhindre sårbarheter som cross-site scripting (XSS) og kodeinjeksjon.
• Optimaliser ytelse: Optimaliser ytelsen til utvidelsen din for å minimere dens innvirkning på nettleserens ytelse.
• Gi klar og konsis dokumentasjon: Gi klar og konsis dokumentasjon for å hjelpe brukere med å forstå hvordan de skal bruke utvidelsen din.
• Håndter feil elegant: Implementer feilhåndtering for å forhindre at utvidelsen din krasjer eller forårsaker uventet oppførsel.
• Hold utvidelsen din oppdatert: Oppdater utvidelsen din jevnlig for å håndtere feil, sikkerhetssårbarheter og kompatibilitetsproblemer.
• Vurder internasjonalisering (i18n): Design utvidelsen din slik at den enkelt kan lokaliseres til forskjellige språk. Bruk chrome.i18n-API-et.
• Respekter brukernes personvern: Vær åpen om hvordan utvidelsen din samler inn og bruker brukerdata, og innhent brukersamtykke når det er nødvendig. Følg relevante personvernforskrifter som GDPR og CCPA.

Sende inn utvidelsen din til butikkene

Når utvidelsen din er utviklet og testet, vil du sende den inn til nettlesernes utvidelsesbutikker for å gjøre den tilgjengelig for brukere. Hver nettleser har sin egen butikk og innsendingsprosess:

• Chrome Web Store: Send inn utvidelsen din til Chrome Web Store for Chrome-brukere. Prosessen innebærer å opprette en utviklerkonto, pakke utvidelsen din og laste den opp til butikken.
• Firefox Add-ons: Send inn utvidelsen din til Firefox Add-ons for Firefox-brukere. Prosessen ligner på Chrome Web Store og innebærer å opprette en utviklerkonto og sende inn utvidelsen din for gjennomgang.
• Safari Extensions Gallery: Send inn utvidelsen din til Safari Extensions Gallery for Safari-brukere. Prosessen innebærer å skaffe et utviklersertifikat fra Apple og sende inn utvidelsen din for gjennomgang.

Når du sender inn utvidelsen din, må du sørge for å gi nøyaktig og fullstendig informasjon, inkludert en beskrivende tittel, en detaljert beskrivelse, skjermbilder og en personvernerklæring. Utvidelsesbutikkene gjennomgår innsendinger for å sikre at de overholder deres retningslinjer og policyer.

Konklusjon

Utvikling av nettleserutvidelser med Manifest V3 og JavaScript-APIer tilbyr en kraftig måte å tilpasse og forbedre nettopplevelsen på. Ved å forstå kjernekonseptene, følge beste praksis og vurdere kompatibilitet på tvers av nettlesere, kan utviklere skape verdifulle og engasjerende utvidelser for brukere over hele verden. Etter hvert som nettet utvikler seg, vil nettleserutvidelser fortsette å spille en avgjørende rolle i å forme internettets fremtid.

Husk å alltid prioritere brukernes personvern og sikkerhet når du utvikler utvidelser. Ved å bygge med disse prinsippene i tankene, kan du skape utvidelser som er både nyttige og pålitelige.

Denne guiden gir et solid grunnlag for å komme i gang med utvikling av nettleserutvidelser. Etter hvert som du dykker dypere, kan du utforske de ulike APIene og funksjonene som er tilgjengelige, og eksperimentere med forskjellige teknikker for å skape innovative og virkningsfulle utvidelser.