Inyección de CSS y estilos aislados
Añada y elimine estilos en páginas web desde scripts de contenido evitando conflictos con el CSS propio de la página anfitriona.
Inyección de CSS y estilos aislados es una lección gratuita de Browser Extensions Development (Chrome & Edge) en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Browser Extensions Development (Chrome & Edge), y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Browser Extensions Development (Chrome & Edge) incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
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.
Aprende JavaScript con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 12
- Lecciones
- 48
Preguntas frecuentes
¿La lección «Inyección de CSS y estilos aislados» es gratis?
Sí — el texto completo de «Inyección de CSS y estilos aislados» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Browser Extensions Development (Chrome & Edge), actualiza a CoddyKit PRO. El curso de Browser Extensions Development (Chrome & Edge) incluye 4 lecciones en total.
¿Qué aprenderé en «Inyección de CSS y estilos aislados»?
Añada y elimine estilos en páginas web desde scripts de contenido evitando conflictos con el CSS propio de la página anfitriona. Practicas Browser Extensions Development (Chrome & Edge) con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Browser Extensions Development (Chrome & Edge)?
No se requiere experiencia previa. Browser Extensions Development (Chrome & Edge) en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Inyección de CSS y estilos aislados»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Browser Extensions Development (Chrome & Edge)?
Sí. Cada lección de Browser Extensions Development (Chrome & Edge) incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Inyección de scripts de contenido
- Modificación del DOM de páginas web
- Interacción con datos de páginas web
- Inyección de CSS y estilos aislados