CSS Enjekte Etme ve Yalıtılmış Stillendirme
Ana makine sayfasının kendi CSS'siyle çakışmaları önleyerek içerik betikleri aracılığıyla web sayfalarına stil ekleyip kaldırın.
CSS Enjekte Etme ve Yalıtılmış Stillendirme, CoddyKit'te ücretsiz bir Browser Extensions Development (Chrome & Edge) dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Browser Extensions Development (Chrome & Edge) öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Browser Extensions Development (Chrome & Edge) kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
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.
Yapay zeka eğitmeniyle JavaScript öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 12
- Dersler
- 48
Sıkça Sorulan Sorular
“CSS Enjekte Etme ve Yalıtılmış Stillendirme” dersi ücretsiz mi?
Evet — “CSS Enjekte Etme ve Yalıtılmış Stillendirme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Browser Extensions Development (Chrome & Edge) kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Browser Extensions Development (Chrome & Edge) kursu toplamda 4 dersten oluşur.
“CSS Enjekte Etme ve Yalıtılmış Stillendirme” dersinde ne öğreneceğim?
Ana makine sayfasının kendi CSS'siyle çakışmaları önleyerek içerik betikleri aracılığıyla web sayfalarına stil ekleyip kaldırın. Browser Extensions Development (Chrome & Edge) ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Browser Extensions Development (Chrome & Edge) öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Browser Extensions Development (Chrome & Edge), başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“CSS Enjekte Etme ve Yalıtılmış Stillendirme” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Browser Extensions Development (Chrome & Edge) dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Browser Extensions Development (Chrome & Edge) dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- İçerik Betiklerini Enjekte Etme
- Web Sayfası DOM'sini Değiştirme
- Web Sayfası Verileriyle Etkileşim
- CSS Enjekte Etme ve Yalıtılmış Stillendirme