0Pricing
Browser Extensions Development (Chrome & Edge) · Lesson

Injecting CSS & Isolated Styling

Add and remove styles on web pages from content scripts while avoiding conflicts with the host page's own CSS.

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"]
  }]
}

All lessons in this course

  1. Injecting Content Scripts
  2. Modifying Web Page DOM
  3. Interacting with Web Page Data
  4. Injecting CSS & Isolated Styling
← Back to Browser Extensions Development (Chrome & Edge)