CSS injecteren en geïsoleerde styling
Voeg vanuit contentscripts stijlen toe aan webpagina's en verwijder ze weer, zonder conflicten met de CSS van de hostpagina te veroorzaken.
CSS injecteren en geïsoleerde styling is een gratis Browserextensies ontwikkelen (Chrome en Edge)-les op CoddyKit. Dit is les 4 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.
Waarom CSS injecteren
Contentscripts kunnen niet alleen de structuur van een pagina veranderen, maar ook hoe die eruitziet. Door CSS te injecteren, kan je extensie elementen markeren, rommel verbergen of een aangepaste vormgeving toepassen.
De hostpagina heeft echter al eigen stijlen, dus je moet zorgvuldig injecteren om conflicten te voorkomen.
CSS declareren in het manifest
De eenvoudigste aanpak vermeldt een stylesheet onder content_scripts. De browser injecteert deze automatisch op overeenkomende pagina's.
{
"content_scripts": [{
"matches": ["https://*.example.com/*"],
"css": ["styles.css"]
}]
}CSS programmatisch injecteren
Als je CSS alleen wilt injecteren wanneer dat nodig is, gebruik je de scripting-API vanuit je serviceworker met insertCSS.
chrome.scripting.insertCSS({
target: { tabId: tab.id },
files: ['styles.css']
})Inline CSS injecteren
Je kunt ook onbewerkte CSS-tekst doorgeven in plaats van een bestand, met de eigenschap css.
chrome.scripting.insertCSS({
target: { tabId: tab.id },
css: 'body { filter: grayscale(1); }'
})Geïnjecteerde CSS verwijderen
Als je een functie wilt uitschakelen, verwijder je precies dezelfde CSS die je met removeCSS hebt ingevoegd.
chrome.scripting.removeCSS({
target: { tabId: tab.id },
files: ['styles.css']
})Het specificiteitsprobleem
Je geïnjecteerde regels concurreren met de eigen CSS van de pagina. Als de pagina specifiekere selectors heeft, verliezen jouw stijlen.
Gebruik specifieke selectors of, met mate, !important wanneer dat nodig is.
.myext-highlight {
background: yellow !important;
}Naamruimten voor je klassen gebruiken
Voorzie elke klasse die je toevoegt van een unieke prefix, zoals myext-, zodat je regels nooit per ongeluk overeenkomen met elementen van de pagina.
el.classList.add('myext-panel')Shadow DOM voor echte isolatie
Voor UI die je in de pagina injecteert, isoleert een shadow DOM jouw stijlen volledig van de hostpagina en de stijlen van de pagina van die van jou.
const host = document.createElement('div')
const shadow = host.attachShadow({ mode: 'open' })
shadow.innerHTML = '<style>p{color:red}</style><p>Hi</p>'
document.body.appendChild(host)Lettertypen en afbeeldingen laden
Als je CSS verwijst naar bestanden die in de extensie zijn opgenomen, vermeld je deze onder web_accessible_resources en verwijs je ernaar met chrome.runtime.getURL.
const url = chrome.runtime.getURL('img/icon.png')De lay-out van de pagina respecteren
Voorkom dat je de hostpagina stukmaakt. Geef de voorkeur aan aanvullende stijlen, overlays met een vaste positie of containers met een shadow DOM boven het herschrijven van de belangrijkste lay-outeigenschappen van de pagina.
Opruimen bij uitschakelen
Wanneer de gebruiker je functie uitschakelt, verwijder je de geïnjecteerde CSS en alle elementen die je hebt gemaakt, zodat de pagina terugkeert naar de oorspronkelijke toestand.
document.querySelectorAll('.myext-panel').forEach(e => e.remove())Korte controle
Test je kennis van CSS-injectie.
Samenvatting
Je hebt geleerd hoe je pagina's opmaakt vanuit contentscripts:
- Declareer CSS in het manifest of injecteer deze met
insertCSS - Verwijder CSS met
removeCSS - Gebruik naamruimten voor klassen en beheer de specificiteit
- Gebruik een shadow DOM voor echte isolatie
- Ruim alles op wanneer je de functie uitschakelt
Met zorgvuldige injectie kun je pagina's aanpassen zonder ze stuk te maken.
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
Veelgestelde vragen
Is de les “CSS injecteren en geïsoleerde styling” gratis?
Ja — de volledige tekst van “CSS injecteren en geïsoleerde styling” 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 “CSS injecteren en geïsoleerde styling”?
Voeg vanuit contentscripts stijlen toe aan webpagina's en verwijder ze weer, zonder conflicten met de CSS van de hostpagina te veroorzaken. 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 4 van 4.
Hoe lang duurt de les “CSS injecteren en geïsoleerde styling”?
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
- Contentscripts injecteren
- De DOM van webpagina's aanpassen
- Interactie met gegevens op webpagina's
- CSS injecteren en geïsoleerde styling