Utvikling av nettleserutvidelser (Chrome og Edge) · leksjon

Injisere innholdsskript

Lær hvordan De kan injisere JavaScript og CSS i bestemte nettsider, slik at utvidelsen kan endre utseendet og atferden deres.

Leksjon 1 av 411 trinn

Injisere innholdsskript 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.

Hva er content scripts?

Velkommen til content scripts! Dette er JavaScript-filer som kjører i konteksten til nettsider som er lastet inn i nettleseren.

Tenk på dem som en bro. De lar utvidelsen samhandle med innholdet på nettsiden, omtrent som et skript som kjører direkte på siden.

Les detaljer fra en side.
Endre utseendet til siden.
Legg til eller fjern elementer.

Det isolerte miljøet

Content scripts kjører i et «isolert miljø». Det betyr at de ikke påvirker sidens eget JavaScript-miljø.

Skriptet kan få tilgang til og endre sidens Document Object Model (DOM), men det kan ikke få direkte tilgang til JavaScript-variabler eller -funksjoner som er definert av selve nettsiden.

Denne isoleringen hindrer konflikter og sikrer at utvidelsen ikke ødelegger funksjonaliteten på nettsiden.

Statisk innlasting via manifest.json

Den enkleste måten å laste inn content scripts på er å deklarere dem i utvidelsens manifest.json-fil.

Disse skriptene lastes inn og kjøres automatisk på nettsider som samsvarer med mønstrene du angir. Dette passer godt for skript som må være aktive hver gang en bestemt type side lastes inn.

Eksempel på statisk innlasting av JavaScript

Slik konfigurerer du et content script i manifest.json for å laste inn en JavaScript-fil med navnet content.js:

{  "manifest_version": 3,
  "name": "My Page Modifier",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["https://*.example.com/*"],
      "js": ["content.js"]
    }
  ]
}

Eksempel på statisk innlasting av CSS

Du kan også laste inn CSS-filer ved å bruke det samme feltet content_scripts i manifest.json. Dette passer perfekt for egendefinert stil!

CSS-en brukes på samsvarende sider og endrer det visuelle utseendet deres.

{  "manifest_version": 3,
  "name": "My Page Styler",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["*://*.google.com/*"],
      "css": ["content.css"]
    }
  ]
}

Programmatisk innlasting

Noen ganger trenger du mer kontroll over når et skript lastes inn. Det er her programmatisk innlasting kommer inn.

Du kan laste inn skript dynamisk basert på brukerhandlinger (for eksempel når brukeren klikker på en knapp i popup-vinduet) eller bestemte betingelser, i stedet for automatisk når siden lastes inn.

Bruke chrome.scripting.executeScript()

For å laste inn skript programmatisk bruker du API-et chrome.scripting.executeScript() fra bakgrunnsskriptet eller popup-vinduet til utvidelsen.

Denne metoden krever tillatelsen scripting i manifest.json.

Den retter seg mot en bestemt fane.
Du kan laste inn en funksjon eller en fil.
Perfekt for interaksjoner ved behov.

Demonstrasjon av programmatisk kode

Dette eksempelet viser et bakgrunnsskript som laster inn en enkel funksjon i den aktive fanen når det klikkes på utvidelsesikonet.

Den innlastede funksjonen endrer bakgrunnsfargen på siden. Prøv å kjøre den!

// manifest.json snippet:
// {"permissions": ["activeTab", "scripting"]}

// background.js
chrome.action.onClicked.addListener(async (tab) => {
  if (tab.url.startsWith("http")) {
    await chrome.scripting.executeScript({
      target: { tabId: tab.id },
      function: () => {
        document.body.style.backgroundColor = 'lightblue';
        console.log('Background changed!');
      }
    });
  }
});

Tillatelser og anbefalte fremgangsmåter

For programmatisk innlasting trenger du vanligvis tillatelsene activeTab og scripting.

activeTab: Gir midlertidige vertstillatelser til den aktive fanen når brukeren aktiverer utvidelsen.
scripting: Gjør det mulig å bruke API-et chrome.scripting til å laste inn kode.

Be alltid bare om tillatelsene som er nødvendige for funksjonaliteten til utvidelsen.

Rask sjekk

Hvilket av følgende utsagn om content scripts er RIKTIG?

Besvar den i den interaktive leksjonen

Oppsummering: Laste inn content scripts

Du har lært hvordan du laster inn content scripts på nettsider!

Content scripts lar utvidelsen samhandle med nettsider.
De kjører i et isolert miljø for å hindre konflikter.
Du kan laste dem inn statisk via manifest.json for automatisk innlasting.
Du kan også laste dem inn programmatisk ved hjelp av chrome.scripting.executeScript() for handlinger ved behov.

Deretter skal vi se nærmere på hvordan du endrer DOM-en til nettsider ved hjelp av disse kraftige skriptene!

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 «Injisere innholdsskript» gratis?

Ja – hele teksten i «Injisere innholdsskript» 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 «Injisere innholdsskript»?

Lær hvordan De kan injisere JavaScript og CSS i bestemte nettsider, slik at utvidelsen kan endre utseendet og atferden deres. 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 «Injisere innholdsskript»?

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

← Tilbake til Utvikling av nettleserutvidelser (Chrome og Edge)