ポップアップスタイルのカスタマイズ

設定ページにカスタム CSS の入力ボックスがあります。ここに記述した CSS は保存後、ポップアップ・設定ページ・ヘルプページの <head> に注入され、デフォルトのスタイルを上書きします。

例：信頼度バッジをより目立たせる

.confidence.high {
  background: #14532d;
  color: #fff;
  font-weight: 700;
}

.confidence.medium {
  background: #ca8a04;
  color: #fff;
}

例：テーマカラーを変更する

:root {
  --accent: #d946ef;
  --accent-dark: #a21caf;
  --accent-soft: rgba(217, 70, 239, 0.1);
}

ポップアップ内のセグメント・技術リンクのホバー・更新ボタンなどはすべてこれらのトークンを参照しているため、変更すると一緒に色が変わります。

例：フォントサイズを大きくする

body {
  font-size: 15px;
}

.tech-name {
  font-size: 14px;
}

注入位置

すべてのカスタム CSS は固定 ID の <style id="stackPrismCustomCss"> タグに配置され、<head> の末尾に挿入されます。再保存すると古い内容が置き換わり、重複追加はされません。

適用範囲

• ポップアップ（popup）
• 設定ページ（options page）
• 使い方説明ページ（help page）

通常のウェブページには影響しません。この CSS は拡張機能自身の UI の範囲内でのみ有効です。

デバッグのヒント

ポップアップまたは設定ページを開き、右クリック → 検証。Elements パネルで注入された style タグを確認でき、セレクターが正しくマッチしているか確認できます。

制限

• 長さの上限は CUSTOM_RULE_LIMITS.css（デフォルト 10000 文字）。超えると保存に失敗します
• 外部 CSS ファイルのインポートはできません（@import 不可）。拡張機能の CSP が許可していないためです
• url(...) で base64 以外の外部画像を参照することはできません