Injetando CSS e Estilos Isolados
Adicione e remova estilos em páginas web a partir de scripts de conteúdo, evitando conflitos com o próprio CSS da página hospedeira.
Injetando CSS e Estilos Isolados é uma aula grátis de Browser Extensions Development (Chrome & Edge) no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Browser Extensions Development (Chrome & Edge), e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Browser Extensions Development (Chrome & Edge) inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em 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.
Aprenda JavaScript com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 12
- Aulas
- 48
Perguntas Frequentes
A aula “Injetando CSS e Estilos Isolados” é grátis?
Sim — o texto completo de “Injetando CSS e Estilos Isolados” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Browser Extensions Development (Chrome & Edge), atualize para CoddyKit PRO. O curso de Browser Extensions Development (Chrome & Edge) inclui 4 aulas no total.
O que vou aprender em “Injetando CSS e Estilos Isolados”?
Adicione e remova estilos em páginas web a partir de scripts de conteúdo, evitando conflitos com o próprio CSS da página hospedeira. Você pratica Browser Extensions Development (Chrome & Edge) com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Browser Extensions Development (Chrome & Edge)?
Nenhuma experiência prévia é necessária. Browser Extensions Development (Chrome & Edge) no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Injetando CSS e Estilos Isolados”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Browser Extensions Development (Chrome & Edge)?
Sim. Cada aula de Browser Extensions Development (Chrome & Edge) inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Injeção de Scripts de Conteúdo
- Modificação do DOM de Páginas Web
- Interação com Dados de Páginas Web
- Injetando CSS e Estilos Isolados