Nettleserutvidelsesutvikling: Manifest V3 og JavaScript API-er

Nettleserutvidelser er små programvareprogrammer som tilpasser nettopplevelsen. De kan legge til nye funksjoner, endre nettsideinnhold, blokkere reklame og mye mer. Med fremkomsten av Manifest V3 har måten utvidelser bygges og fungerer på gjennomgått betydelige endringer. Denne omfattende veiledningen vil utforske nettleserutvidelsesutvikling ved hjelp av Manifest V3 og JavaScript API-er, og gi deg kunnskapen til å lage kraftige og sikre utvidelser for moderne nettlesere.

Hva er nettleserutvidelser?

Nettleserutvidelser er i hovedsak mini-applikasjoner som kjører i en nettleser. De utvider nettleserens funksjonalitet og integreres sømløst med nettsider. Utvidelser er skrevet ved hjelp av standard webteknologier som HTML, CSS og JavaScript, noe som gjør dem relativt tilgjengelige for webutviklere.

Eksempler på populære nettleserutvidelser inkluderer:

• Ad blockers: Blokkerer reklame på nettsider, forbedrer surfinghastigheten og reduserer distraksjoner.
• Password managers: Lagrer og administrerer passord på en sikker måte, og fyller dem automatisk ut på nettsider.
• Note-taking extensions: Lar brukere ta notater og lagre dem direkte fra nettsider.
• Productivity tools: Forbedre produktiviteten ved å tilby funksjoner som oppgavebehandling, tidssporing og fokusmoduser.
• Language translation tools: Oversett nettsider til forskjellige språk med et enkelt klikk. Eksempel: Google Translate-utvidelse.
• VPN extensions: Proxy internettrafikk for å omgå geografiske begrensninger og forbedre personvernet.

Viktigheten av Manifest V3

Manifest V3 er den nyeste versjonen av manifestfilen, som er en JSON-fil som beskriver utvidelsen til nettleseren. Den beskriver utvidelsens navn, versjon, tillatelser, bakgrunnsskript og andre viktige metadata. Manifest V3 introduserer flere viktige endringer sammenlignet med forgjengeren, Manifest V2, hovedsakelig med fokus på sikkerhet og ytelse.

Viktige endringer i Manifest V3:

• Service Workers: Manifest V3 erstatter bakgrunnssider med service workers. Service workers er hendelsesdrevne skript som kjører i bakgrunnen uten å kreve en vedvarende side. De er mer effektive og mindre ressurskrevende enn bakgrunnssider.
• Declarative Net Request API: Dette API-et lar utvidelser endre nettverksforespørsler uten å direkte avskjære dem. Det forbedrer sikkerheten og ytelsen ved å laste ut filtreringslogikk til nettleseren.
• Strenge Content Security Policy (CSP): Manifest V3 håndhever strengere CSP-regler for å forhindre utførelse av vilkårlig kode, noe som ytterligere forbedrer sikkerheten.
• Promise-based APIs: Mange API-er er nå promise-baserte, noe som gjør asynkrone operasjoner lettere å administrere.

Hvorfor overgangen til Manifest V3?

• Forbedret sikkerhet: Manifest V3 er designet for å forbedre sikkerheten til nettleserutvidelser og beskytte brukere mot skadelig kode.
• Forbedret ytelse: Service workers og Declarative Net Request API bidrar til bedre ytelse og redusert ressursbruk.
• Større personvern: Manifest V3 har som mål å gi brukerne mer kontroll over sine data og personvern.

Sette opp utviklingsmiljøet ditt

Før du begynner å utvikle nettleserutvidelser, må du sette opp utviklingsmiljøet ditt. Dette innebærer å installere en kodeeditor, velge en nettleser for testing og forstå den grunnleggende filstrukturen til en utvidelse.

1. Kodeeditor

Velg en kodeeditor du er komfortabel med. Populære alternativer inkluderer:

• Visual Studio Code (VS Code): En gratis og kraftig kodeeditor med utmerket støtte for JavaScript og andre webteknologier.
• Sublime Text: En rask og tilpassbar kodeeditor med et bredt spekter av plugins.
• Atom: En gratis og åpen kildekode-editor utviklet av GitHub.

2. Nettleser for testing

Velg en nettleser for å teste utvidelsene dine. Chrome og Firefox er de mest populære valgene, da de tilbyr robuste utviklerverktøy og støtte for utvidelsesutvikling.

3. Grunnleggende filstruktur

En nettleserutvidelse består vanligvis av følgende filer:

• manifest.json: Denne filen inneholder metadataene til utvidelsen, for eksempel navn, versjon, tillatelser og bakgrunnsskript.
• background.js (eller service worker script): Dette skriptet kjører i bakgrunnen og håndterer hendelser som nettleserhandlinger og kontekstmenykklikk.
• content.js: Dette skriptet kjører i konteksten av nettsider og kan endre innholdet deres.
• popup.html: Denne filen definerer brukergrensesnittet til utvidelsens popup.
• popup.js: Dette skriptet håndterer logikken til utvidelsens popup.
• options.html: Denne filen definerer brukergrensesnittet til utvidelsens options-side.
• options.js: Dette skriptet håndterer logikken til utvidelsens options-side.
• icons: Dette er ikonene som brukes til å representere utvidelsen i nettleserens verktøylinje og side for utvidelsesadministrasjon.

Opprette din første utvidelse: "Hello, World!"

La oss lage en enkel "Hello, World!"-utvidelse for å demonstrere de grunnleggende prinsippene for nettleserutvidelsesutvikling.

1. Opprett en manifestfil (manifest.json)

Opprett en fil som heter `manifest.json` i en ny mappe og legg til følgende kode:

{
  "manifest_version": 3,
  "name": "Hello, World!",
  "version": "1.0",
  "description": "A simple Hello, World! extension",
  "permissions": [
    "storage"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

Forklaring:

• `manifest_version`: Spesifiserer versjonen av manifestfilen (3 for Manifest V3).
• `name`: Navnet på utvidelsen.
• `version`: Versjonsnummeret til utvidelsen.
• `description`: En kort beskrivelse av utvidelsen.
• `permissions`: En rekke tillatelser som utvidelsen krever (f.eks. "storage").
• `action`: Definerer egenskapene til utvidelsens popup, inkludert standard popup-fil og ikoner.
• `icons`: Spesifiserer stiene til utvidelsens ikoner.

2. Opprett en popup-fil (popup.html)

Opprett en fil som heter `popup.html` i samme mappe og legg til følgende kode:

  
  


  
Hello, World!
  
This is a simple browser extension.

Denne filen definerer brukergrensesnittet til utvidelsens popup, som vil vise meldingen "Hello, World!".

3. Opprett ikonbilder

Opprett tre ikonbilder med følgende størrelser: 16x16, 48x48 og 128x128 piksler. Lagre dem som `icon16.png`, `icon48.png` og `icon128.png` i en `images`-mappe i utvidelsesmappen.

4. Last inn utvidelsen i nettleseren din

Chrome:

1. Åpne Chrome og gå til `chrome://extensions`.
2. Aktiver "Utviklermodus" øverst til høyre.
3. Klikk på "Last inn utpakket" og velg mappen som inneholder utvidelsesfilene dine.

Firefox:

1. Åpne Firefox og gå til `about:debugging#/runtime/this-firefox`.
2. Klikk på "Last inn midlertidig tillegg..." og velg `manifest.json`-filen.

Din "Hello, World!"-utvidelse skal nå være installert og synlig i nettleserens verktøylinje. Klikk på utvidelsesikonet for å åpne popup-vinduet og se "Hello, World!"-meldingen.

Arbeide med JavaScript API-er

Nettleserutvidelser kan samhandle med nettleseren og nettsider ved hjelp av JavaScript API-er. Disse API-ene gir tilgang til ulike funksjonaliteter, for eksempel:

• Tabs API: Lar deg administrere nettleserfaner, inkludert opprettelse, oppdatering og spørring av faner.
• Storage API: Gir en måte å lagre og hente data permanent i utvidelsen.
• Alarms API: Lar deg planlegge oppgaver som skal utføres på bestemte tidspunkter.
• Notifications API: Lar deg vise varsler til brukeren.
• Context Menus API: Lar deg legge til tilpassede elementer i nettleserens kontekstmeny (høyreklikkmeny).
• Web Request API (Declarative Net Request i Manifest V3): Lar deg avskjære og endre nettverksforespørsler.
• Scripting API: Tillater å injisere skript i nettsider.

Eksempel: Bruke Storage API

La oss lage en utvidelse som lagrer og henter en brukers navn ved hjelp av Storage API.

1. Oppdater manifestfilen (manifest.json)

Sørg for at `permissions`-arrayen i `manifest.json` inneholder `"storage"`:

{
  "manifest_version": 3,
  "name": "Storage Example",
  "version": "1.0",
  "description": "An extension that uses the Storage API",
  "permissions": [
    "storage"
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

2. Opprett en popup-fil (popup.html)

Opprett eller oppdater `popup.html` med følgende innhold:

  
  


  
Storage Example
  Enter your name:
  
  Save
  

  

3. Opprett et popup-skript (popup.js)

Opprett en fil som heter `popup.js` og legg til følgende kode:

document.addEventListener('DOMContentLoaded', () => {
  const nameInput = document.getElementById('name');
  const saveButton = document.getElementById('save');
  const greeting = document.getElementById('greeting');

  // Load the saved name from storage
  chrome.storage.sync.get('name', (data) => {
    if (data.name) {
      nameInput.value = data.name;
      greeting.textContent = `Hello, ${data.name}!`;
    }
  });

  // Save the name to storage when the button is clicked
  saveButton.addEventListener('click', () => {
    const name = nameInput.value;
    chrome.storage.sync.set({ name: name }, () => {
      greeting.textContent = `Hello, ${name}!`;
    });
  });
});

Forklaring:

• Skriptet lytter etter `DOMContentLoaded`-hendelsen for å sikre at DOM er fullstendig lastet inn før koden utføres.
• Det henter referanser til inndatafeltet, lagre-knappen og hilsenavsnittet.
• Det laster inn det lagrede navnet fra lagring ved hjelp av `chrome.storage.sync.get()`.
• Det lagrer navnet i lagring når lagre-knappen klikkes ved hjelp av `chrome.storage.sync.set()`.
• Det oppdaterer hilsenavsnittet med det lagrede eller angitte navnet.

Last inn utvidelsen på nytt i nettleseren din. Nå, når du åpner popup-vinduet, kan du skrive inn navnet ditt, lagre det og se hilsenmeldingen. Navnet vil bli lagret i utvidelsens lagring og vil bli lastet inn neste gang du åpner popup-vinduet.

Eksempel: Bruke Tabs API

La oss lage en utvidelse som viser den gjeldende fanens URL i et popup-vindu.

1. Oppdater manifestfilen (manifest.json)

Legg til `"tabs"`-tillatelsen til `permissions`-arrayen i `manifest.json`:

{
  "manifest_version": 3,
  "name": "Tabs Example",
  "version": "1.0",
  "description": "An extension that uses the Tabs API",
  "permissions": [
    "tabs"
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

2. Opprett en popup-fil (popup.html)

Opprett eller oppdater `popup.html` med følgende innhold:

  
  


  
Tabs Example
  
Current Tab URL:
  

  

3. Opprett et popup-skript (popup.js)

Opprett en fil som heter `popup.js` og legg til følgende kode:

document.addEventListener('DOMContentLoaded', () => {
  const urlDisplay = document.getElementById('url');

  // Get the current tab's URL
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    const tab = tabs[0];
    urlDisplay.textContent = tab.url;
  });
});

Forklaring:

• Skriptet lytter etter `DOMContentLoaded`-hendelsen.
• Det bruker `chrome.tabs.query()` for å få den gjeldende aktive fanen i det gjeldende vinduet.
• Det henter URL-en til fanen og viser den i `url`-avsnittet.

Last inn utvidelsen på nytt i nettleseren din. Nå, når du åpner popup-vinduet, vil det vise URL-en til den gjeldende fanen.

Bakgrunnsskript og Service Workers

I Manifest V3 erstattes bakgrunnsskript med service workers. Service workers er hendelsesdrevne skript som kjører i bakgrunnen uten å kreve en vedvarende side. De er mer effektive og mindre ressurskrevende enn bakgrunnssider.

Viktige funksjoner i Service Workers:

• Hendelsesdrevet: Service workers reagerer på hendelser som nettleserhandlinger, alarmer og meldinger fra innholdsskript.
• Asynkron: Service workers bruker asynkrone API-er for å unngå å blokkere hovedtråden.
• Avsluttes når den er inaktiv: Service workers avsluttes når de ikke aktivt håndterer hendelser, og sparer ressurser.

Eksempel: Bruke en Service Worker

La oss lage en utvidelse som viser et varsel når nettleseren starter.

1. Oppdater manifestfilen (manifest.json)

Oppdater `manifest.json` med følgende innhold:

{
  "manifest_version": 3,
  "name": "Service Worker Example",
  "version": "1.0",
  "description": "An extension that uses a service worker",
  "permissions": [
    "notifications"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

Forklaring:

• `"background"`-egenskapen spesifiserer banen til service worker-skriptet (`background.js`).
• `"permissions"`-arrayen inkluderer `"notifications"`, som kreves for å vise varsler.

2. Opprett et Service Worker-skript (background.js)

Opprett en fil som heter `background.js` og legg til følgende kode:

chrome.runtime.onStartup.addListener(() => {
  // Display a notification when the browser starts
  chrome.notifications.create('startup-notification', {
    type: 'basic',
    iconUrl: 'images/icon48.png',
    title: 'Browser Started',
    message: 'The browser has started.',
  });
});

Forklaring:

• Skriptet lytter etter `chrome.runtime.onStartup`-hendelsen, som utløses når nettleseren starter.
• Det bruker `chrome.notifications.create()` for å vise et varsel med de spesifiserte egenskapene.

Last inn utvidelsen på nytt i nettleseren din. Nå, når du starter nettleseren på nytt, bør du se et varsel fra utvidelsen.

Innholdsskript

Innholdsskript er JavaScript-filer som kjører i konteksten av nettsider. De kan få tilgang til og endre DOM-en til nettsider, slik at du kan tilpasse virkemåten og utseendet til nettsteder.

Viktige funksjoner i innholdsskript:

• Tilgang til DOM: Innholdsskript kan få tilgang til og manipulere DOM-en til nettsider.
• Isolasjon fra nettsideskript: Innholdsskript kjører i et isolert miljø, og forhindrer konflikter med nettsideskript.
• Kommunikasjon med bakgrunnsskript: Innholdsskript kan kommunisere med bakgrunnsskript ved hjelp av meldingssending.

Eksempel: Bruke et innholdsskript

La oss lage en utvidelse som endrer bakgrunnsfargen på nettsider til lyseblå.

1. Oppdater manifestfilen (manifest.json)

Oppdater `manifest.json` med følgende innhold:

{
  "manifest_version": 3,
  "name": "Content Script Example",
  "version": "1.0",
  "description": "An extension that uses a content script",
  "permissions": [
    "activeTab",
    "scripting"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": [""],
      "js": ["content.js"]
    }
  ],
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

Forklaring:

• `"content_scripts"`-egenskapen spesifiserer en rekke innholdsskript som skal injiseres i nettsider.
• `"matches"` spesifiserer URL-ene som innholdsskriptet skal injiseres i (`` samsvarer med alle URL-er).
• `"js"` spesifiserer banen til innholdsskriptet (`content.js`).
• `"permissions"`-arrayen inkluderer `"activeTab"` og `"scripting"`, som kreves for å injisere skript.

2. Opprett et innholdsskript (content.js)

Opprett en fil som heter `content.js` og legg til følgende kode:

document.body.style.backgroundColor = 'lightblue';

3. Opprett en Service Worker (background.js)

Opprett en fil som heter `background.js` og legg til følgende kode:

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: () => {
      document.body.style.backgroundColor = 'lightblue';
    }
  });
});

Forklaring:

• Innholdsskriptet setter ganske enkelt bakgrunnsfargen på `body`-elementet til lyseblå.
• Service worker lytter til klikkhendelsen og utfører en funksjon i den gjeldende fanen som endrer bakgrunnsfargen.

Last inn utvidelsen på nytt i nettleseren din. Nå, når du åpner en nettside, vil bakgrunnsfargen være lyseblå.

Feilsøke nettleserutvidelser

Feilsøking av nettleserutvidelser er en viktig del av utviklingsprosessen. Chrome og Firefox tilbyr utmerkede utviklerverktøy for feilsøking av utvidelser.

Feilsøking i Chrome:

1. Åpne Chrome og gå til `chrome://extensions`.
2. Aktiver "Utviklermodus" øverst til høyre.
3. Klikk på "Inspiser visninger bakgrunnsside" for utvidelsen din. Dette vil åpne Chrome DevTools for bakgrunnsskriptet.
4. For å feilsøke innholdsskript, åpne nettsiden der innholdsskriptet er injisert, og åpne deretter Chrome DevTools for den siden. Du skal se innholdsskriptet ditt oppført i "Sources"-panelet.

Feilsøking i Firefox:

1. Åpne Firefox og gå til `about:debugging#/runtime/this-firefox`.
2. Finn utvidelsen din i listen og klikk på "Inspiser". Dette vil åpne Firefox Developer Tools for utvidelsen.
3. For å feilsøke innholdsskript, åpne nettsiden der innholdsskriptet er injisert, og åpne deretter Firefox Developer Tools for den siden. Du skal se innholdsskriptet ditt oppført i "Debugger"-panelet.

Vanlige feilsøkingsteknikker:

• Konsolllogging: Bruk `console.log()` for å skrive ut meldinger til konsollen.
• Brytepunkter: Sett brytepunkter i koden din for å pause utførelsen og inspisere variabler.
• Kildekart: Bruk kildekart for å feilsøke koden din i sin opprinnelige form, selv om den er minimert eller transpileres.
• Feilhåndtering: Implementer feilhåndtering for å fange opp og logge feil.

Publisere utvidelsen din

Når du har utviklet og testet utvidelsen din, kan du publisere den til Chrome Web Store eller Firefox Add-ons marketplace.

Publisere til Chrome Web Store:

1. Opprett en utviklerkonto i Chrome Web Store.
2. Pakk utvidelsen din inn i en `.zip`-fil.
3. Last opp `.zip`-filen til Chrome Web Store.
4. Oppgi de nødvendige metadataene, for eksempel utvidelsens navn, beskrivelse og skjermbilder.
5. Send inn utvidelsen din for vurdering.

Publisere til Firefox Add-ons Marketplace:

1. Opprett en utviklerkonto i Firefox Add-ons marketplace.
2. Pakk utvidelsen din inn i en `.zip`-fil.
3. Last opp `.zip`-filen til Firefox Add-ons marketplace.
4. Oppgi de nødvendige metadataene, for eksempel utvidelsens navn, beskrivelse og skjermbilder.
5. Send inn utvidelsen din for vurdering.

Beste fremgangsmåter for publisering:

• Skriv en klar og konsis beskrivelse av utvidelsen din.
• Gi skjermbilder og videoer av høy kvalitet for å vise utvidelsens funksjoner.
• Test utvidelsen din grundig før du sender den inn.
• Svar raskt på brukeranmeldelser og tilbakemeldinger.
• Hold utvidelsen din oppdatert med de nyeste nettleserversjonene og sikkerhetsoppdateringene.

Sikkerhetshensyn

Sikkerhet er et kritisk aspekt ved utvikling av nettleserutvidelser. Utvidelser kan potensielt få tilgang til sensitive brukerdata og endre nettsideinnhold, så det er viktig å følge sikkerhetsmessige beste fremgangsmåter for å beskytte brukere mot skadelig kode.

Viktige sikkerhetshensyn:

• Minimer tillatelser: Be bare om tillatelsene som utvidelsen din faktisk trenger.
• Valider brukerinndata: Rens og valider alle brukerinndata for å forhindre cross-site scripting (XSS)-angrep.
• Bruk HTTPS: Bruk alltid HTTPS for å kommunisere med eksterne servere.
• Content Security Policy (CSP): Håndhev en streng CSP for å forhindre utførelse av vilkårlig kode.
• Oppdater utvidelsen din regelmessig: Hold utvidelsen din oppdatert med de nyeste sikkerhetsoppdateringene.

Ved å følge disse sikkerhetsretningslinjene kan du bidra til å sikre at nettleserutvidelsen din er trygg og sikker for brukere.

Konklusjon

Nettleserutvidelsesutvikling ved hjelp av Manifest V3 og JavaScript API-er tilbyr en kraftig måte å tilpasse nettopplevelsen og legge til nye funksjoner i nettlesere. Ved å forstå nøkkelkonseptene, API-ene og beste fremgangsmåter som er beskrevet i denne veiledningen, kan du lage kraftige og sikre utvidelser som forbedrer produktiviteten, forbedrer sikkerheten og gir en bedre nettopplevelse for brukere over hele verden. Etter hvert som nettet fortsetter å utvikle seg, vil nettleserutvidelser spille en stadig viktigere rolle i å forme fremtiden for online interaksjoner. Omfavn mulighetene som presenteres av Manifest V3 og rikdommen av JavaScript API-er for å bygge innovative og verdifulle utvidelser.