Browser Extensions Development (Chrome & Edge) · レッスン

CSSの注入とスタイルの分離

コンテンツスクリプトからWebページにスタイルを追加・削除し、ホストページ固有のCSSとの競合を避けます。

レッスン 4/413 ステップ

「CSSの注入とスタイルの分離」はCoddyKit上の無料Browser Extensions Development (Chrome & Edge)レッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはBrowser Extensions Development (Chrome & Edge)学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Browser Extensions Development (Chrome & Edge)コースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

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.

無料で開始

AI チューターと学ぶ JavaScript — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 12
レッスン: 48

無料で学習を始めるコース全体を表示

よくある質問

「CSSの注入とスタイルの分離」レッスンは無料ですか？

はい。「CSSの注入とスタイルの分離」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Browser Extensions Development (Chrome & Edge)コースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Browser Extensions Development (Chrome & Edge)コースには全4レッスンが含まれています。

「CSSの注入とスタイルの分離」で何を学びますか？

コンテンツスクリプトからWebページにスタイルを追加・削除し、ホストページ固有のCSSとの競合を避けます。ブラウザで直接実行するハンズオンコードでBrowser Extensions Development (Chrome & Edge)を演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Browser Extensions Development (Chrome & Edge)を始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのBrowser Extensions Development (Chrome & Edge)は初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「CSSの注入とスタイルの分離」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このBrowser Extensions Development (Chrome & Edge)レッスンでコードを書いて実行できますか？

はい。すべてのBrowser Extensions Development (Chrome & Edge)レッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Browser Extensions Development (Chrome & Edge)に戻る