Injecter du CSS et isoler les styles
Ajoutez et supprimez des styles sur les pages web depuis des scripts de contenu tout en évitant les conflits avec le CSS propre à la page hôte.
Injecter du CSS et isoler les styles est une leçon Browser Extensions Development (Chrome & Edge) gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Browser Extensions Development (Chrome & Edge), et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Browser Extensions Development (Chrome & Edge) comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
Why Inject CSS
Content scripts can change how a page looks, not just its structure. Injecting CSS lets your extension highlight elements, hide clutter, or apply a custom skin.
But the host page already has its own styles, so you must inject carefully to avoid clashes.
Declaring CSS in the Manifest
The simplest approach lists a stylesheet under content_scripts. The browser injects it automatically on matching pages.
{
"content_scripts": [{
"matches": ["https://*.example.com/*"],
"css": ["styles.css"]
}]
}Injecting CSS Programmatically
To inject only when needed, use the scripting API from your service worker with insertCSS.
chrome.scripting.insertCSS({
target: { tabId: tab.id },
files: ['styles.css']
})Injecting Inline CSS
You can also pass raw CSS text instead of a file with the css property.
chrome.scripting.insertCSS({
target: { tabId: tab.id },
css: 'body { filter: grayscale(1); }'
})Removing Injected CSS
To toggle a feature off, remove the exact same CSS you inserted using removeCSS.
chrome.scripting.removeCSS({
target: { tabId: tab.id },
files: ['styles.css']
})The Specificity Problem
Your injected rules compete with the page's own CSS. If the page has more specific selectors, your styles lose.
Use specific selectors or, sparingly, !important to win when necessary.
.myext-highlight {
background: yellow !important;
}Namespacing Your Classes
Prefix every class you add with a unique token like myext- so your rules never accidentally match the page's elements.
el.classList.add('myext-panel')Shadow DOM for True Isolation
For UI you inject into the page, a shadow DOM fully isolates your styles from the host page, and the page's styles from yours.
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)Loading Fonts and Images
If your CSS references files packaged in the extension, list them under web_accessible_resources and reference them with chrome.runtime.getURL.
const url = chrome.runtime.getURL('img/icon.png')Respecting the Page's Layout
Avoid breaking the host page. Prefer additive styles, fixed-position overlays, or shadow DOM containers over rewriting the page's core layout properties.
Cleaning Up on Toggle Off
When the user disables your feature, remove injected CSS and any elements you created so the page returns to its original state.
document.querySelectorAll('.myext-panel').forEach(e => e.remove())Quick Check
Test your CSS injection knowledge.
Recap
You learned to style pages from content scripts:
- Declare CSS in the manifest or inject with
insertCSS - Remove it with
removeCSS - Namespace classes and manage specificity
- Use a shadow DOM for true isolation
- Clean up when toggling off
Careful injection lets you reshape pages without breaking them.
Questions Fréquemment Posées
La leçon « Injecter du CSS et isoler les styles » est-elle gratuite ?
Oui — le texte complet de « Injecter du CSS et isoler les styles » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Browser Extensions Development (Chrome & Edge), passe à CoddyKit PRO. Le cours Browser Extensions Development (Chrome & Edge) comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Injecter du CSS et isoler les styles » ?
Ajoutez et supprimez des styles sur les pages web depuis des scripts de contenu tout en évitant les conflits avec le CSS propre à la page hôte. Tu pratiques Browser Extensions Development (Chrome & Edge) avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Browser Extensions Development (Chrome & Edge) ?
Aucune expérience préalable n'est requise. Browser Extensions Development (Chrome & Edge) sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Injecter du CSS et isoler les styles » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Browser Extensions Development (Chrome & Edge) ?
Oui. Chaque leçon Browser Extensions Development (Chrome & Edge) inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Injecter des scripts de contenu
- Modifier le DOM d’une page Web
- Interagir avec les données d’une page Web
- Injecter du CSS et isoler les styles