firefox-css-theme

Firefox CSS 主题

用于搭建、实时调试和安装 Firefox CSS 主题的工具包。它还提供 MCP 服务，支持通过 Agent 检查 DOM 并实时设置样式。

入门

提示

开始使用前，需要安装 Node.js。

主题作者

使用 npx 搭建新的主题项目：

npx firefox-css-theme create

系统会交互式地提示你输入主题名称和样式表目标（userChrome only、userContent only 或 both）。

如果你已打开主题仓库，可启动 Firefox 并启用 CSS 实时热重载：

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：启动 Firefox 并启用 chrome 调试。
• 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 配置文件名称