Browser Extensions Development (Chrome & Edge) · Lekcja

Wstrzykiwanie CSS i izolowanie stylów

Dodadzą Państwo style do stron internetowych i usuną je z poziomu skryptów content scripts, unikając konfliktów z CSS samej strony.

Wstrzykiwanie CSS i izolowanie stylów to bezpłatna lekcja Browser Extensions Development (Chrome & Edge) na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Browser Extensions Development (Chrome & Edge), a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Browser Extensions Development (Chrome & Edge) zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

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.

Często zadawane pytania

Czy lekcja „Wstrzykiwanie CSS i izolowanie stylów” jest bezpłatna?

Tak — pełny tekst „Wstrzykiwanie CSS i izolowanie stylów” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Browser Extensions Development (Chrome & Edge), przejdź na CoddyKit PRO. Kurs Browser Extensions Development (Chrome & Edge) zawiera 4 lekcji w sumie.

Co nauczysz się w „Wstrzykiwanie CSS i izolowanie stylów”?

Dodadzą Państwo style do stron internetowych i usuną je z poziomu skryptów content scripts, unikając konfliktów z CSS samej strony. Ćwiczysz Browser Extensions Development (Chrome & Edge) z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Browser Extensions Development (Chrome & Edge)?

Nie wymagamy żadnego doświadczenia. Browser Extensions Development (Chrome & Edge) w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Wstrzykiwanie CSS i izolowanie stylów”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Browser Extensions Development (Chrome & Edge)?

Tak. Każda lekcja Browser Extensions Development (Chrome & Edge) zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Browser Extensions Development (Chrome & Edge)