Browserextensies ontwikkelen (Chrome en Edge) · Les

Contentscripts injecteren

Leer hoe u JavaScript en CSS in specifieke webpagina's injecteert, zodat uw extensie het uiterlijk en gedrag ervan kan aanpassen.

Les 1 van 411 stappen

Contentscripts injecteren is een gratis Browserextensies ontwikkelen (Chrome en Edge)-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Browserextensies ontwikkelen (Chrome en Edge). Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Browserextensies ontwikkelen (Chrome en Edge) bevat in totaal 4 lessen.

Wat zijn contentscripts?

Welkom bij contentscripts! Dit zijn JavaScript-bestanden die worden uitgevoerd in de context van webpagina's die in de browser zijn geladen.

Zie ze als een brug. Ze zorgen ervoor dat je extensie kan communiceren met de inhoud van de webpagina, net als een script dat rechtstreeks op die pagina wordt uitgevoerd.

Details van een pagina lezen.
De weergave van de pagina aanpassen.
Elementen toevoegen of verwijderen.

De geïsoleerde wereld

Contentscripts worden uitgevoerd in een 'geïsoleerde wereld'. Dat betekent dat ze de eigen JavaScript-omgeving van de pagina niet beïnvloeden.

Je script kan het Document Object Model (DOM) van de pagina openen en aanpassen, maar heeft geen rechtstreekse toegang tot JavaScript-variabelen of -functies die door de webpagina zelf zijn gedefinieerd.

Door deze isolatie worden conflicten voorkomen en blijft de functionaliteit van de webpagina intact.

Statische injectie via manifest.json

De eenvoudigste manier om contentscripts te injecteren is ze te declareren in het bestand manifest.json van je extensie.

Deze scripts worden automatisch geladen en uitgevoerd op webpagina's die overeenkomen met de patronen die je opgeeft. Dit is ideaal voor scripts die actief moeten zijn telkens wanneer een bepaald type pagina wordt geladen.

Voorbeeld van statische JavaScript-injectie

Zo stel je in manifest.json een contentscript in om een JavaScript-bestand met de naam content.js te injecteren:

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

Voorbeeld van statische CSS-injectie

Je kunt ook CSS-bestanden injecteren met hetzelfde veld content_scripts in manifest.json. Dit is ideaal voor aangepaste opmaak!

De CSS wordt toegepast op overeenkomende pagina's en past de visuele weergave ervan aan.

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

Programmatische injectie

Soms heb je meer controle nodig over het moment waarop een script wordt geïnjecteerd. Daarvoor gebruik je programmatische injectie.

Je kunt scripts dynamisch injecteren op basis van acties van de gebruiker, zoals het klikken op een knop in je pop-up, of op basis van specifieke voorwaarden, in plaats van automatisch bij het laden van de pagina.

chrome.scripting.executeScript() gebruiken

Om scripts programmatisch te injecteren, gebruik je de API chrome.scripting.executeScript() vanuit het achtergrondscript of de pop-up van je extensie.

Voor deze methode is de permissie scripting vereist in je manifest.json.

De methode richt zich op een specifiek tabblad.
Je kunt een functie of een bestand injecteren.
Ideaal voor interacties op aanvraag.

Demonstratie van programmatische code

Dit voorbeeld toont hoe een achtergrondscript een eenvoudige functie in het actieve tabblad injecteert wanneer op het pictogram van de extensie wordt geklikt.

De geïnjecteerde functie verandert de achtergrondkleur van de pagina. Probeer het uit!

// 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!');
      }
    });
  }
});

Permissies en aanbevolen werkwijzen

Voor programmatische injectie heb je meestal de permissies activeTab en scripting nodig.

activeTab: Geeft tijdelijk hostpermissies voor het momenteel actieve tabblad wanneer de gebruiker de extensie activeert.
scripting: Hiermee kun je de API chrome.scripting gebruiken om code te injecteren.

Vraag altijd alleen de minimale permissies aan die nodig zijn voor de functionaliteit van je extensie.

Snelle controle

Welke van de volgende uitspraken over contentscripts is WAAR?

Beantwoord dit in de interactieve les

Samenvatting: contentscripts injecteren

Je hebt geleerd hoe je contentscripts in webpagina's injecteert!

Met contentscripts kan je extensie communiceren met webpagina's.
Ze worden uitgevoerd in een geïsoleerde wereld om conflicten te voorkomen.
Je kunt ze statisch injecteren via manifest.json, zodat ze automatisch worden geladen.
Of je kunt ze programmatisch injecteren met chrome.scripting.executeScript() voor acties op aanvraag.

Vervolgens gaan we dieper in op het aanpassen van de DOM van webpagina's met deze krachtige scripts!

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 12
Lessen: 48

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Contentscripts injecteren” gratis?

Ja — de volledige tekst van “Contentscripts injecteren” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Browserextensies ontwikkelen (Chrome en Edge) wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Browserextensies ontwikkelen (Chrome en Edge) bevat in totaal 4 lessen.

Wat leer ik in “Contentscripts injecteren”?

Leer hoe u JavaScript en CSS in specifieke webpagina's injecteert, zodat uw extensie het uiterlijk en gedrag ervan kan aanpassen. Je oefent met Browserextensies ontwikkelen (Chrome en Edge) door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Browserextensies ontwikkelen (Chrome en Edge) te beginnen?

Ervaring vooraf is niet nodig. Browserextensies ontwikkelen (Chrome en Edge) op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “Contentscripts injecteren”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Browserextensies ontwikkelen (Chrome en Edge)?

Ja. Elke les over Browserextensies ontwikkelen (Chrome en Edge) bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Browserextensies ontwikkelen (Chrome en Edge)