Utveckling av webbläsartillägg (Chrome och Edge) · Lektion

Injicera innehållsskript

Lär Er att injicera JavaScript och CSS på specifika webbsidor så att tillägget kan ändra deras utseende och beteende.

Lektion 1 av 411 steg

Injicera innehållsskript är en gratis lektion i Utveckling av webbläsartillägg (Chrome och Edge) på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Utveckling av webbläsartillägg (Chrome och Edge), och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Utveckling av webbläsartillägg (Chrome och Edge) innehåller totalt 4 lektioner.

Vad är content scripts?

Välkomna till content scripts! Det är JavaScript-filer som körs i kontexten för webbsidor som läses in i webbläsaren.

Tänk på dem som en brygga. De gör att tillägget kan interagera med webbsidans innehåll, precis som ett skript som körs direkt på sidan.

Läsa information från en sida.
Ändra sidans utseende.
Lägga till eller ta bort element.

Den isolerade världen

Content scripts körs i en ”isolerad värld”. Det innebär att de inte stör sidans egen JavaScript-miljö.

Skriptet kan komma åt och ändra sidans Document Object Model (DOM), men det kan inte direkt komma åt JavaScript-variabler eller funktioner som definieras av själva webbsidan.

Den här isoleringen förhindrar konflikter och säkerställer att tillägget inte förstör webbsidans funktionalitet.

Statisk injicering via manifest.json

Det enklaste sättet att injicera content scripts är att deklarera dem i tilläggets fil manifest.json.

Dessa skript läses automatiskt in och körs på webbsidor som matchar de mönster Ni anger. Det passar bra för skript som behöver vara aktiva varje gång en viss typ av sida läses in.

Exempel på statisk JS-injicering

Så här konfigurerar Ni ett content script i manifest.json för att injicera en JavaScript-fil med namnet content.js:

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

Exempel på statisk CSS-injicering

Ni kan även injicera CSS-filer med samma fält content_scripts i manifest.json. Det passar perfekt för anpassad formatering!

CSS-formatmallarna tillämpas på matchande sidor och ändrar deras visuella utseende.

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

Programmatisk injicering

Ibland behöver Ni ha större kontroll över när ett skript injiceras. Då är programmatisk injicering användbar.

Ni kan injicera skript dynamiskt baserat på användaråtgärder, till exempel när Ni klickar på en knapp i popupfönstret, eller på specifika villkor i stället för automatiskt när sidan läses in.

Använda chrome.scripting.executeScript()

För att injicera skript programmatiskt använder Ni API:et chrome.scripting.executeScript() från tilläggets bakgrundsskript eller popupfönster.

Den här metoden kräver behörigheten scripting i manifest.json.

Det riktar sig mot en specifik flik.
Ni kan injicera en funktion eller en fil.
Perfekt för interaktioner vid behov.

Demo av programmatisk kod

Det här exemplet visar hur ett bakgrundsskript injicerar en enkel funktion i den aktiva fliken när användaren klickar på tilläggets ikon.

Den injicerade funktionen ändrar sidans bakgrundsfärg. Prova att köra 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!');
      }
    });
  }
});

Behörigheter och bästa praxis

För programmatisk injicering behöver Ni vanligtvis behörigheterna activeTab och scripting.

activeTab: Beviljar tillfälliga värdbehörigheter för den aktuella aktiva fliken när användaren aktiverar tillägget.
scripting: Gör det möjligt att använda API:et chrome.scripting för att injicera kod.

Begär alltid minsta möjliga behörigheter som krävs för tilläggets funktionalitet.

Snabbkontroll

Vilket av följande påståenden om content scripts är SANT?

Besvara frågan i den interaktiva lektionen

Sammanfattning: Injicera content scripts

Ni har lärt Er att injicera content scripts på webbsidor!

Content scripts gör att tillägget kan interagera med webbsidor.
De körs i en isolerad värld för att förhindra konflikter.
Ni kan injicera dem statiskt via manifest.json så att de läses in automatiskt.
Eller så kan Ni injicera dem programmatiskt med chrome.scripting.executeScript() för åtgärder vid behov.

Härnäst går vi igenom hur Ni kan ändra webbsidors DOM med hjälp av dessa kraftfulla skript!

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 12
Lektioner: 48

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Injicera innehållsskript” gratis?

Ja – hela texten till ”Injicera innehållsskript” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Utveckling av webbläsartillägg (Chrome och Edge), kan Ni uppgradera till CoddyKit PRO. Kursen i Utveckling av webbläsartillägg (Chrome och Edge) innehåller totalt 4 lektioner.

Vad lär jag mig i ”Injicera innehållsskript”?

Lär Er att injicera JavaScript och CSS på specifika webbsidor så att tillägget kan ändra deras utseende och beteende. Ni övar på Utveckling av webbläsartillägg (Chrome och Edge) med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Utveckling av webbläsartillägg (Chrome och Edge)?

Du behöver inga förkunskaper. Utbildningen i Utveckling av webbläsartillägg (Chrome och Edge) på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Injicera innehållsskript”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Utveckling av webbläsartillägg (Chrome och Edge)-lektionen?

Ja. Varje Utveckling av webbläsartillägg (Chrome och Edge)-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Utveckling av webbläsartillägg (Chrome och Edge)