Utvikling av nettleserutvidelser (Chrome og Edge) · leksjon

Forstå avanserte tillatelser

Utforsk sensitive tillatelser som `activeTab`, `scripting` og vertstillatelser, og lær når og hvordan de skal forespørres.

Leksjon 1 av 411 trinn

Forstå avanserte tillatelser er en gratis leksjon i Utvikling av nettleserutvidelser (Chrome og Edge) på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Utvikling av nettleserutvidelser (Chrome og Edge), og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Utvikling av nettleserutvidelser (Chrome og Edge) inneholder totalt 4 leksjoner.

Utover grunnleggende tillatelser

Velkommen! I denne leksjonen skal vi gå i dybden på avanserte tillatelser for nettleserutvidelser. Disse tillatelsene gir omfattende funksjonalitet og gjør det mulig for utvidelsen å samhandle mer inngående med nettinnhold og brukerdata.

Det er avgjørende å forstå dem for å kunne bygge robuste utvidelser og samtidig ivareta brukernes tillit og sikkerhet.

Vi skal gå gjennom:

Vertstillatelser
Tillatelsen activeTab
Tillatelsen scripting

Gi tilgang til nettet

Vertstillatelser er grunnleggende. De definerer hvilke nettsteder utvidelsen kan samhandle med. Dette omfatter å lese data, endre innhold eller sende nettverksforespørsler på de aktuelle nettstedene.

Tenk på dem som «nøkler» som låser opp tilgang til bestemte nettdomener.

Deklarere vertstilgang

De deklarerer vertstillatelser i filen manifest.json under nøkkelen host_permissions. Hver streng er et URL-mønster.

Hvis De for eksempel vil tillate tilgang til alle sider på google.com, angir De:

{
  "name": "My Extension",
  "version": "1.0",
  "manifest_version": 3,
  "host_permissions": [
    "https://www.google.com/*"
  ]
}

Omfattende tilgang med jokertegn

De kan bruke jokertegn (*) for å gi bredere tilgang. For eksempel gir "<all_urls>" (eller "*://*/*") tilgang til alle URL-er på alle protokoller (HTTP, HTTPS).

Selv om dette er kraftig, bør brede jokertegn brukes med stor forsiktighet, siden de gir utvidelsen betydelig kontroll over brukerens nettleseropplevelse på alle nettsteder.

{
  "name": "My Extension",
  "version": "1.0",
  "manifest_version": 3,
  "host_permissions": [
    "<all_urls>"
  ]
}

Midlertidige fanetillatelser

Tillatelsen activeTab er et sikrere alternativ til brede vertstillatelser for enkeltstående handlinger på den gjeldende siden.

Når brukeren aktiverer utvidelsen (for eksempel ved å klikke på ikonet), gir activeTab utvidelsen midlertidige vertstillatelser for den aktive fanen. Tillatelsene varer til brukeren navigerer bort fra siden eller lukker fanen.

{
  "name": "My Extension",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": [
    "activeTab"
  ]
}

Hente URL-en til den gjeldende fanen

Med activeTab kan utvidelsen få tilgang til informasjon om den gjeldende fanen, for eksempel URL-en eller tittelen, uten permanente vertstillatelser.

Prøv å kjøre dette eksempelet. Tenk Dem at koden ligger i popup-skriptet til utvidelsen:

// This script runs when the extension popup opens.
document.addEventListener('DOMContentLoaded', function() {
  chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
    if (tabs.length > 0) {
      const activeTab = tabs[0];
      console.log('Active tab URL:', activeTab.url);
      // Display in popup for demonstration
      document.body.innerHTML = `<p>Current URL: ${activeTab.url}</p>`;
    } else {
      document.body.innerHTML = `<p>No active tab.</p>`;
    }
  });
});

Programmatisk kodeinjisering

Tillatelsen scripting gjør det mulig for utvidelsen å injisere JavaScript og CSS i nettsider programmatisk. Slik kan De endre innholdet eller oppførselen til en side.

Dette er en viktig tillatelse for innholdsskript og erstatter Manifest V2-API-et tabs.executeScript.

{
  "name": "My Extension",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": [
    "scripting"
  ],
  "host_permissions": [
    "https://www.example.com/*"
  ]
}

Endre en side

Når De har tillatelsen scripting (og vertstillatelse for målfanen), kan De injisere kode. Dette eksempelet injiserer et enkelt skript som endrer bakgrunnsfargen i den aktive fanen.

Tenk Dem at dette kjøres i bakgrunnsskriptet eller popupen:

// This code would typically run from a background script
// or popup after a user action.
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
  if (tabs.length > 0) {
    const activeTabId = tabs[0].id;
    chrome.scripting.executeScript({
      target: { tabId: activeTabId },
      function: () => {
        // This function runs in the context of the web page
        document.body.style.backgroundColor = 'lightblue';
        console.log('CoddyKit: Page background changed!');
      }
    });
  }
});

Prinsippet om minste privilegium

Følg alltid prinsippet om minste privilegium: Be bare om tillatelsene utvidelsen absolutt trenger.

Nødvendige tillatelser: Deklareres i manifest.json og bes om ved installasjon.
Valgfrie tillatelser: Kan bes om under kjøring med chrome.permissions.request(), og bare når brukeren trenger den aktuelle funksjonen. Dette gir brukerne mer kontroll og bygger tillit.

Tillatelsesscenarioer

Hvilken eller hvilke tillatelser trenger De for en utvidelse som, når ikonet klikkes, leser tittelen på den gjeldende siden og deretter injiserer en egendefinert CSS-fil på den samme siden?

Besvar den i den interaktive leksjonen

Sammendrag av avanserte tillatelser

Godt jobbet! De har lært om kraftige avanserte tillatelser:

Vertstillatelser: Gir tilgang til bestemte nettsteder.
activeTab: Gir midlertidige vertstillatelser til den aktive fanen når brukeren aktiverer utvidelsen, og passer godt for enkeltstående handlinger.
scripting: Gjør det mulig å injisere JavaScript og CSS programmatisk.

Bruk alltid tilnærmingen med færrest privilegier for å ivareta sikkerheten og brukernes tillit. Deretter skal vi utforske sikker programmeringspraksis!

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 12
Leksjoner: 48

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Forstå avanserte tillatelser» gratis?

Ja – hele teksten i «Forstå avanserte tillatelser» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Utvikling av nettleserutvidelser (Chrome og Edge)-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Utvikling av nettleserutvidelser (Chrome og Edge) inneholder totalt 4 leksjoner.

Hva lærer jeg i «Forstå avanserte tillatelser»?

Utforsk sensitive tillatelser som `activeTab`, `scripting` og vertstillatelser, og lær når og hvordan de skal forespørres. Du øver på Utvikling av nettleserutvidelser (Chrome og Edge) med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Utvikling av nettleserutvidelser (Chrome og Edge)?

Ingen tidligere erfaring er nødvendig. Utvikling av nettleserutvidelser (Chrome og Edge) på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Forstå avanserte tillatelser»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Utvikling av nettleserutvidelser (Chrome og Edge)-leksjonen?

Ja. Alle Utvikling av nettleserutvidelser (Chrome og Edge)-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Forstå avanserte tillatelser
Sikker programmeringspraksis
Content Security Policy (CSP)
Valgfrie tillatelser og forespørsler under kjøring

← Tilbake til Utvikling av nettleserutvidelser (Chrome og Edge)