Udvikling af browserudvidelser: Manifest V3 og JavaScript API'er

Browserudvidelser er små softwareprogrammer, der tilpasser browseroplevelsen. De kan tilføje nye funktioner, ændre webstedsindhold, blokere reklamer og meget mere. Med ankomsten af Manifest V3 har den måde, udvidelser bygges og fungerer på, gennemgået betydelige ændringer. Denne omfattende guide vil udforske udvikling af browserudvidelser ved hjælp af Manifest V3 og JavaScript API'er og give dig den viden, du har brug for til at skabe kraftfulde og sikre udvidelser til moderne browsere.

Hvad er browserudvidelser?

Browserudvidelser er i bund og grund mini-applikationer, der kører i en webbrowser. De udvider browserens funktionalitet og integreres problemfrit med websider. Udvidelser skrives ved hjælp af standard webteknologier som HTML, CSS og JavaScript, hvilket gør dem relativt tilgængelige for webudviklere.

Eksempler på populære browserudvidelser inkluderer:

• Annonceblokkere: Blokerer reklamer på websider, hvilket forbedrer browserhastigheden og reducerer distraktioner.
• Adgangskodeadministratorer: Opbevarer og administrerer sikkert adgangskoder og udfylder dem automatisk på websteder.
• Note-udvidelser: Giver brugerne mulighed for at tage noter og gemme dem direkte fra websider.
• Produktivitetsværktøjer: Forbedrer produktiviteten ved at tilbyde funktioner som opgavestyring, tidsregistrering og fokustilstande.
• Sprogoversættelsesværktøjer: Oversætter websider til forskellige sprog med et enkelt klik. Eksempel: Google Translate-udvidelsen.
• VPN-udvidelser: Proxytrafik for at omgå geografiske begrænsninger og forbedre privatlivets fred.

Betydningen af Manifest V3

Manifest V3 er den seneste version af manifest-filen, som er en JSON-fil, der beskriver udvidelsen for browseren. Den skitserer udvidelsens navn, version, tilladelser, baggrundsscripts og andre essentielle metadata. Manifest V3 introducerer flere vigtige ændringer i forhold til sin forgænger, Manifest V2, primært med fokus på sikkerhed og ydeevne.

Vigtige ændringer i Manifest V3:

• Service Workers: Manifest V3 erstatter baggrundssider med service workers. Service workers er hændelsesdrevne scripts, der kører i baggrunden uden at kræve en vedvarende side. De er mere effektive og mindre ressourcekrævende end baggrundssider.
• Declarative Net Request API: Dette API giver udvidelser mulighed for at ændre netværksanmodninger uden direkte at opfange dem. Det forbedrer sikkerhed og ydeevne ved at overlade filtreringslogikken til browseren.
• Strammere Content Security Policy (CSP): Manifest V3 håndhæver strammere CSP-regler for at forhindre udførelse af vilkårlig kode, hvilket yderligere forbedrer sikkerheden.
• Promise-baserede API'er: Mange API'er er nu promise-baserede, hvilket gør asynkrone operationer lettere at håndtere.

Hvorfor skiftet til Manifest V3?

• Forbedret sikkerhed: Manifest V3 er designet til at forbedre sikkerheden for browserudvidelser og beskytte brugere mod ondsindet kode.
• Forbedret ydeevne: Service workers og Declarative Net Request API'et bidrager til bedre ydeevne og reduceret ressourceforbrug.
• Større privatliv: Manifest V3 sigter mod at give brugerne mere kontrol over deres data og privatliv.

Opsætning af dit udviklingsmiljø

Før du begynder at udvikle browserudvidelser, skal du opsætte dit udviklingsmiljø. Dette indebærer installation af en kodeditor, valg af en browser til test og forståelse af den grundlæggende filstruktur for en udvidelse.

1. Kodeditor

Vælg en kodeditor, du er komfortabel med. Populære muligheder inkluderer:

• Visual Studio Code (VS Code): En gratis og kraftfuld kodeditor med fremragende understøttelse af JavaScript og andre webteknologier.
• Sublime Text: En hurtig og tilpasselig kodeditor med et bredt udvalg af plugins.
• Atom: En gratis og open-source kodeditor udviklet af GitHub.

2. Browser til test

Vælg en browser til at teste dine udvidelser. Chrome og Firefox er de mest populære valg, da de tilbyder robuste udviklerværktøjer og understøttelse af udvidelsesudvikling.

3. Grundlæggende filstruktur

En browserudvidelse består typisk af følgende filer:

• manifest.json: Denne fil indeholder metadata for udvidelsen, såsom dens navn, version, tilladelser og baggrundsscripts.
• background.js (eller service worker-script): Dette script kører i baggrunden og håndterer hændelser som browserhandlinger og genvejsmenuklik.
• content.js: Dette script kører i konteksten af websider og kan ændre deres indhold.
• popup.html: Denne fil definerer brugergrænsefladen for udvidelsens popup.
• popup.js: Dette script håndterer logikken i udvidelsens popup.
• options.html: Denne fil definerer brugergrænsefladen for udvidelsens indstillingsside.
• options.js: Dette script håndterer logikken på udvidelsens indstillingsside.
• icons: Dette er de ikoner, der bruges til at repræsentere udvidelsen i browserens værktøjslinje og udvidelsesstyringsside.

Oprettelse af din første udvidelse: "Hello, World!"

Lad os oprette en simpel "Hello, World!"-udvidelse for at demonstrere de grundlæggende principper for udvikling af browserudvidelser.

1. Opret en manifest-fil (manifest.json)

Opret en fil ved navn `manifest.json` i en ny mappe og tilføj følgende kode:

{
  "manifest_version": 3,
  "name": "Hello, World!",
  "version": "1.0",
  "description": "En simpel Hello, World! udvidelse",
  "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`: Angiver versionen af manifest-filen (3 for Manifest V3).
• `name`: Navnet på udvidelsen.
• `version`: Versionsnummeret for udvidelsen.
• `description`: En kort beskrivelse af udvidelsen.
• `permissions`: En liste over tilladelser, som udvidelsen kræver (f.eks. "storage").
• `action`: Definerer egenskaberne for udvidelsens popup, herunder standard popup-fil og ikoner.
• `icons`: Angiver stierne til udvidelsens ikoner.

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

Opret en fil ved navn `popup.html` i samme mappe og tilføj følgende kode:

<!DOCTYPE html>
<html>
<head>
  <title>Hej, Verden!</title>
  <style>
    body {
      width: 200px;
      padding: 10px;
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <h1>Hej, Verden!</h1>
  <p>Dette er en simpel browserudvidelse.</p>
</body>
</html>

Denne fil definerer brugergrænsefladen for udvidelsens popup, som vil vise meddelelsen "Hej, Verden!".

3. Opret ikonbilleder

Opret tre ikonbilleder med følgende størrelser: 16x16, 48x48 og 128x128 pixels. Gem dem som `icon16.png`, `icon48.png` og `icon128.png` i en `images`-mappe i din udvidelsesmappe.

4. Indlæs udvidelsen i din browser

Chrome:

1. Åbn Chrome og gå til `chrome://extensions`.
2. Aktivér "Udviklertilstand" i øverste højre hjørne.
3. Klik på "Indlæs udpakket" og vælg mappen, der indeholder dine udvidelsesfiler.

Firefox:

1. Åbn Firefox og gå til `about:debugging#/runtime/this-firefox`.
2. Klik på "Indlæs midlertidig tilføjelse..." og vælg `manifest.json`-filen.

Din "Hello, World!"-udvidelse skulle nu være installeret og synlig i browserens værktøjslinje. Klik på udvidelsesikonet for at åbne popuppen og se meddelelsen "Hej, Verden!".

Arbejde med JavaScript API'er

Browserudvidelser kan interagere med browseren og websider ved hjælp af JavaScript API'er. Disse API'er giver adgang til forskellige funktionaliteter, såsom:

• Tabs API: Giver dig mulighed for at administrere browserfaner, herunder oprettelse, opdatering og forespørgsel af faner.
• Storage API: Giver en måde at gemme og hente data vedvarende i udvidelsen.
• Alarms API: Giver dig mulighed for at planlægge opgaver, der skal udføres på bestemte tidspunkter.
• Notifications API: Giver dig mulighed for at vise meddelelser til brugeren.
• Context Menus API: Giver dig mulighed for at tilføje brugerdefinerede elementer til browserens genvejsmenu (højrekliksmenu).
• Web Request API (Declarative Net Request i Manifest V3): Giver dig mulighed for at opfange og ændre netværksanmodninger.
• Scripting API: Giver mulighed for at injicere scripts på websider.

Eksempel: Brug af Storage API'et

Lad os oprette en udvidelse, der gemmer og henter en brugers navn ved hjælp af Storage API'et.

1. Opdater manifest-filen (manifest.json)

Sørg for, at `permissions`-arrayet i din `manifest.json` inkluderer `"storage"`:

{
  "manifest_version": 3,
  "name": "Storage Eksempel",
  "version": "1.0",
  "description": "En udvidelse der bruger Storage API'et",
  "permissions": [
    "storage"
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

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

Opret eller opdater din `popup.html` med følgende indhold:

<!DOCTYPE html>
<html>
<head>
  <title>Storage Eksempel</title>
  <style>
    body {
      width: 250px;
      padding: 10px;
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <h1>Storage Eksempel</h1>
  <label for="name">Indtast dit navn:</label>
  <input type="text" id="name">
  <button id="save">Gem</button>
  <p id="greeting"></p>
  <script src="popup.js"></script>
</body>
</html>

3. Opret et popup-script (popup.js)

Opret en fil ved navn `popup.js` og tilføj følgende kode:

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

  // Indlæs det gemte navn fra lager
  chrome.storage.sync.get('name', (data) => {
    if (data.name) {
      nameInput.value = data.name;
      greeting.textContent = `Hej, ${data.name}!`;
    }
  });

  // Gem navnet i lager, når der klikkes på knappen
  saveButton.addEventListener('click', () => {
    const name = nameInput.value;
    chrome.storage.sync.set({ name: name }, () => {
      greeting.textContent = `Hej, ${name}!`;
    });
  });
});

Forklaring:

• Scriptet lytter efter `DOMContentLoaded`-hændelsen for at sikre, at DOM er fuldt indlæst, før koden udføres.
• Det henter referencer til inputfeltet, gem-knappen og hilsen-paragraffen.
• Det indlæser det gemte navn fra lageret ved hjælp af `chrome.storage.sync.get()`.
• Det gemmer navnet i lageret, når der klikkes på gem-knappen, ved hjælp af `chrome.storage.sync.set()`.
• Det opdaterer hilsen-paragraffen med det gemte eller indtastede navn.

Genindlæs udvidelsen i din browser. Nu, når du åbner popuppen, kan du indtaste dit navn, gemme det og se hilsen-meddelelsen. Navnet vil blive gemt i udvidelsens lager og vil blive indlæst næste gang, du åbner popuppen.

Eksempel: Brug af Tabs API'et

Lad os oprette en udvidelse, der viser den aktuelle fanes URL i en popup.

1. Opdater manifest-filen (manifest.json)

Tilføj `"tabs"`-tilladelsen til `permissions`-arrayet i din `manifest.json`:

{
  "manifest_version": 3,
  "name": "Tabs Eksempel",
  "version": "1.0",
  "description": "En udvidelse der bruger Tabs API'et",
  "permissions": [
    "tabs"
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

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

Opret eller opdater din `popup.html` med følgende indhold:

<!DOCTYPE html>
<html>
<head>
  <title>Tabs Eksempel</title>
  <style>
    body {
      width: 300px;
      padding: 10px;
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <h1>Tabs Eksempel</h1>
  <p>Nuværende fanes URL:</p>
  <p id="url"></p>
  <script src="popup.js"></script>
</body>
</html>

3. Opret et popup-script (popup.js)

Opret en fil ved navn `popup.js` og tilføj følgende kode:

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

  // Hent den aktuelle fanes URL
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    const tab = tabs[0];
    urlDisplay.textContent = tab.url;
  });
});

Forklaring:

• Scriptet lytter efter `DOMContentLoaded`-hændelsen.
• Det bruger `chrome.tabs.query()` til at hente den aktuelt aktive fane i det aktuelle vindue.
• Det henter fanens URL og viser den i `url`-paragraffen.

Genindlæs udvidelsen i din browser. Nu, når du åbner popuppen, vil den vise URL'en for den aktuelle fane.

Baggrundsscripts og Service Workers

I Manifest V3 er baggrundsscripts erstattet med service workers. Service workers er hændelsesdrevne scripts, der kører i baggrunden uden at kræve en vedvarende side. De er mere effektive og mindre ressourcekrævende end baggrundssider.

Nøglefunktioner for Service Workers:

• Hændelsesdrevet: Service workers reagerer på hændelser som browserhandlinger, alarmer og meddelelser fra indholdsscripts.
• Asynkron: Service workers bruger asynkrone API'er for at undgå at blokere hovedtråden.
• Afslutter ved inaktivitet: Service workers afsluttes, når de ikke aktivt håndterer hændelser, hvilket sparer ressourcer.

Eksempel: Brug af en Service Worker

Lad os oprette en udvidelse, der viser en notifikation, når browseren starter.

1. Opdater manifest-filen (manifest.json)

Opdater din `manifest.json` med følgende indhold:

{
  "manifest_version": 3,
  "name": "Service Worker Eksempel",
  "version": "1.0",
  "description": "En udvidelse der bruger en service worker",
  "permissions": [
    "notifications"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

Forklaring:

• Egenskaben `"background"` angiver stien til service worker-scriptet (`background.js`).
• `"permissions"`-arrayet inkluderer `"notifications"`, som er påkrævet for at vise notifikationer.

2. Opret et Service Worker-script (background.js)

Opret en fil ved navn `background.js` og tilføj følgende kode:

chrome.runtime.onStartup.addListener(() => {
  // Vis en notifikation, når browseren starter
  chrome.notifications.create('startup-notification', {
    type: 'basic',
    iconUrl: 'images/icon48.png',
    title: 'Browser startet',
    message: 'Browseren er startet.',
  });
});

Forklaring:

• Scriptet lytter efter `chrome.runtime.onStartup`-hændelsen, som udløses, når browseren starter.
• Det bruger `chrome.notifications.create()` til at vise en notifikation med de angivne egenskaber.

Genindlæs udvidelsen i din browser. Nu, når du genstarter din browser, skulle du se en notifikation fra udvidelsen.

Indholdsscripts (Content Scripts)

Indholdsscripts er JavaScript-filer, der kører i konteksten af websider. De kan tilgå og ændre DOM'en på websider, hvilket giver dig mulighed for at tilpasse websteders adfærd og udseende.

Nøglefunktioner for Indholdsscripts:

• Adgang til DOM: Indholdsscripts kan tilgå og manipulere DOM'en på websider.
• Isolation fra webside-scripts: Indholdsscripts kører i et isoleret miljø, hvilket forhindrer konflikter med webside-scripts.
• Kommunikation med baggrundsscripts: Indholdsscripts kan kommunikere med baggrundsscripts ved hjælp af meddelelsesudveksling.

Eksempel: Brug af et indholdsscript

Lad os oprette en udvidelse, der ændrer baggrundsfarven på websider til lyseblå.

1. Opdater manifest-filen (manifest.json)

Opdater din `manifest.json` med følgende indhold:

{
  "manifest_version": 3,
  "name": "Content Script Eksempel",
  "version": "1.0",
  "description": "En udvidelse der bruger et indholdsscript",
  "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:

• Egenskaben `"content_scripts"` angiver en liste over indholdsscripts, der skal injiceres på websider.
• `"matches"` angiver de URL'er, som indholdsscriptet skal injiceres i (`` matcher alle URL'er).
• `"js"` angiver stien til indholdsscriptet (`content.js`).
• `"permissions"`-arrayet inkluderer `"activeTab"` og `"scripting"`, som er påkrævet for at injicere scripts.

2. Opret et indholdsscript (content.js)

Opret en fil ved navn `content.js` og tilføj følgende kode:

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

3. Opret en Service Worker (background.js)

Opret en fil ved navn `background.js` og tilføj følgende kode:

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

Forklaring:

• Indholdsscriptet sætter simpelthen baggrundsfarven på `body`-elementet til lyseblå.
• Service workeren lytter til klikhændelsen og udfører en funktion inden for den aktuelle fane, som ændrer baggrundsfarven.

Genindlæs udvidelsen i din browser. Nu, når du åbner en hvilken som helst webside, vil baggrundsfarven være lyseblå.

Fejlfinding i browserudvidelser

Fejlfinding i browserudvidelser er en essentiel del af udviklingsprocessen. Chrome og Firefox tilbyder fremragende udviklerværktøjer til fejlfinding af udvidelser.

Fejlfinding i Chrome:

1. Åbn Chrome og gå til `chrome://extensions`.
2. Aktivér "Udviklertilstand" i øverste højre hjørne.
3. Klik på "Inspicer visninger baggrundsside" for din udvidelse. Dette åbner Chrome DevTools for baggrundsscriptet.
4. For at fejlfinde indholdsscripts, åbn den webside, hvor indholdsscriptet er injiceret, og åbn derefter Chrome DevTools for den pågældende side. Du skulle se dit indholdsscript på listen i "Sources"-panelet.

Fejlfinding i Firefox:

1. Åbn Firefox og gå til `about:debugging#/runtime/this-firefox`.
2. Find din udvidelse på listen og klik på "Inspicer". Dette åbner Firefox Developer Tools for udvidelsen.
3. For at fejlfinde indholdsscripts, åbn den webside, hvor indholdsscriptet er injiceret, og åbn derefter Firefox Developer Tools for den pågældende side. Du skulle se dit indholdsscript på listen i "Debugger"-panelet.

Almindelige fejlfindingsteknikker:

• Konsol-logging: Brug `console.log()` til at udskrive meddelelser til konsollen.
• Breakpoints: Sæt breakpoints i din kode for at pause udførelsen og inspicere variabler.
• Source maps: Brug source maps til at fejlfinde din kode i dens oprindelige form, selvom den er blevet minificeret eller transpileret.
• Fejlhåndtering: Implementer fejlhåndtering for at fange og logge fejl.

Udgivelse af din udvidelse

Når du har udviklet og testet din udvidelse, kan du udgive den i Chrome Web Store eller Firefox Add-ons-markedspladsen.

Udgivelse i Chrome Web Store:

1. Opret en udviklerkonto i Chrome Web Store.
2. Pak din udvidelse i en `.zip`-fil.
3. Upload `.zip`-filen til Chrome Web Store.
4. Angiv de nødvendige metadata, såsom udvidelsens navn, beskrivelse og skærmbilleder.
5. Indsend din udvidelse til gennemgang.

Udgivelse på Firefox Add-ons Marketplace:

1. Opret en udviklerkonto på Firefox Add-ons-markedspladsen.
2. Pak din udvidelse i en `.zip`-fil.
3. Upload `.zip`-filen til Firefox Add-ons-markedspladsen.
4. Angiv de nødvendige metadata, såsom udvidelsens navn, beskrivelse og skærmbilleder.
5. Indsend din udvidelse til gennemgang.

Bedste praksis for udgivelse:

• Skriv en klar og præcis beskrivelse af din udvidelse.
• Lever skærmbilleder og videoer af høj kvalitet for at fremvise din udvidelses funktioner.
• Test din udvidelse grundigt, før du indsender den.
• Svar hurtigt på brugeranmeldelser og feedback.
• Hold din udvidelse opdateret med de seneste browserversioner og sikkerhedsrettelser.

Sikkerhedsovervejelser

Sikkerhed er et kritisk aspekt af udvikling af browserudvidelser. Udvidelser kan potentielt få adgang til følsomme brugerdata og ændre webindhold, så det er vigtigt at følge bedste sikkerhedspraksis for at beskytte brugere mod ondsindet kode.

Vigtige sikkerhedsovervejelser:

• Minimer tilladelser: Anmod kun om de tilladelser, din udvidelse rent faktisk har brug for.
• Valider brugerinput: Rens og valider alt brugerinput for at forhindre cross-site scripting (XSS) angreb.
• Brug HTTPS: Brug altid HTTPS til at kommunikere med eksterne servere.
• Content Security Policy (CSP): Håndhæv en streng CSP for at forhindre udførelse af vilkårlig kode.
• Opdater jævnligt din udvidelse: Hold din udvidelse opdateret med de seneste sikkerhedsrettelser.

Ved at følge disse sikkerhedsretningslinjer kan du hjælpe med at sikre, at din browserudvidelse er sikker for brugerne.

Konklusion

Udvikling af browserudvidelser ved hjælp af Manifest V3 og JavaScript API'er tilbyder en kraftfuld måde at tilpasse browseroplevelsen og tilføje nye funktioner til webbrowsere. Ved at forstå de centrale koncepter, API'er og bedste praksis, der er beskrevet i denne guide, kan du skabe kraftfulde og sikre udvidelser, der forbedrer produktiviteten, øger sikkerheden og giver en bedre browseroplevelse for brugere over hele verden. Efterhånden som internettet fortsætter med at udvikle sig, vil browserudvidelser spille en stadig vigtigere rolle i udformningen af fremtidens online interaktioner. Grib de muligheder, som Manifest V3 og det væld af JavaScript API'er præsenterer, for at bygge innovative og værdifulde udvidelser.