firefox-css-theme

Firefox CSS Theme

Firefox CSS テーマのひな形作成、ライブデバッグ、インストールを行うためのツールキットです。エージェントによる DOM の検査とライブスタイリングには、MCP サーバーも利用できます。

はじめに

ヒント

始めるには Node.js が必要です。

テーマ作成者向け

npx を使って、新しいテーマプロジェクトのひな形を作成します。

npx firefox-css-theme create

テーマ名とスタイルシートの対象（userChrome only、userContent only、または both）を対話形式で入力します。

すでにテーマのリポジトリを開いている場合は、ライブ CSS ホットリロードを有効にして Firefox を起動します。

npx firefox-css-theme start

メモ

テーマのエントリーファイル（userChrome.css および／または userContent.css）は、プロジェクトディレクトリのルートに配置する必要があります。

テーマ利用者向け

テーマディレクトリに移動し、スタイルシートをインストールします。

npx firefox-css-theme install

このツールキットは、現在のディレクトリにある userChrome.css と userContent.css を探し、選択した Firefox プロファイルにインストールします。

CLI オプションの一覧については、npx firefox-css-theme --help を実行してください。

MCP サーバーの使い方

MCP サーバーを使うと、AI アシスタントは Firefox の chrome DOM を検査し、計算済みスタイルを照会し、カスタム CSS を挿入し、UI のスクリーンショットをリアルタイムで撮影できます。

設定

使用するクライアントまたは開発環境にサーバーを追加します。

Claude Code

claude mcp add firefox-css-theme -- npx -y firefox-css-theme mcp

Codex

codex mcp add firefox-css-theme -- npx -y firefox-css-theme mcp

IDE の MCP 設定

{
	"mcpServers": {
		"firefox-css-theme": {
			"command": "npx",
			"args": ["-y", "firefox-css-theme", "mcp"]
		}
	}
}

利用可能な MCP ツール

• launch_browser：chrome のデバッグ機能を有効にして Firefox を起動します。
• close_browser：ブラウザーのインスタンスを終了します。
• customize_toolbar：Firefox の「ツールバーをカスタマイズ」モードを切り替えます。
• get_ui_tree：選択した UI 要素の階層 DOM ツリーを出力します。
• query_ui_elements：ブラウザー chrome 内で CSS セレクターに一致する要素を照会します。
• get_computed_styles：特定の UI 要素の計算済み CSS プロパティ値を取得します。
• inject_theme_css：ライブ UI にスタイルシートを挿入します。
• remove_theme_css：挿入したスタイルシートを削除します。
• list_theme_css：現在挿入されているすべてのスタイルシートを一覧表示します。
• take_ui_screenshot：特定の UI コンポーネントのスクリーンショットを撮影します。
• execute_chrome_javascript：ブラウザーの chrome ウィンドウのコンテキストで JavaScript を実行します。

コマンド

firefox-css-theme create

新しい Firefox CSS テーマプロジェクトのひな形を作成します。

使い方

npx firefox-css-theme create [options]

オプション

オプション	説明
-n, --name <name>	テーマ名
-t, --target <target>	スタイルシートの対象：chrome、content、または both
-f, --force	警告なしで続行

---

firefox-css-theme start

スタイルシートのバンドルとホットリロードを有効にして Firefox を起動します。

使い方

npx firefox-css-theme start [options]

オプション

オプション	説明
-b, --binary <path>	Firefox 実行ファイルへのパス
-p, --profile <name>	Firefox プロファイル名
--headless	ヘッドレスモードで実行
--atbc	Adaptive Tab Bar Colour を有効にして起動
--no-toolbox	Browser Toolbox を無効化
--no-watch	ファイル監視を無効化

---

firefox-css-theme install

現在の作業ディレクトリから、コンパイル済みスタイルシートを Firefox プロファイルにインストールします。

使用方法

npx firefox-css-theme install [options]

オプション

オプション	説明
-p, --profile <name>	Firefox プロファイル名
-m, --merge	既存のスタイルシートとマージする
-f, --force	警告を表示せずに続行する

警告

--merge を指定しない場合、この操作によってプロファイル内の既存の CSS テーマが上書きされます。バックアップを作成することをおすすめします。

---

firefox-css-theme mcp

Model Context Protocol（MCP）サーバーを起動します。

使用方法

npx firefox-css-theme mcp [options]

オプション

オプション	説明
-b, --binary <path>	Firefox 実行ファイルへのパス
-p, --profile <name>	Firefox プロファイル名