Firefox Css Theme

io.github.easonwong-de由 GitHub 账号 easonwong-de 发布v0.3.5更新于 Oct 25, 2026

MCP for building, inspecting, and live-debugging Firefox CSS themes.

已验证STDIO仅桌面浏览器自动化开发者工具媒体与设计

概览

AI 生成的概览

用于构建和实时调试 Firefox CSS 主题的 MCP 服务器，可检查浏览器界面、注入样式表并截图。

可以做什么
  • 启动和关闭启用 chrome 调试的 Firefox 实例，并切换“自定义工具栏”模式。
  • 检查浏览器界面：导出元素的 DOM 树、按 CSS 选择器查找元素、读取计算后的 CSS 属性值。
  • 向运行中的 Firefox 窗口注入、替换、移除和列出实时样式表。
  • 截取浏览器界面窗口或指定界面组件的 PNG 截图。
  • 在 chrome 窗口上下文中执行特权 JavaScript。
适用场景
适合在编写或调试 Firefox userChrome、userContent 主题时使用，让助手直接查看真实浏览器界面、核对计算样式并实时迭代 CSS，而不是靠猜测选择器。
运行要求
通过 npx 以 stdio 在本地运行，需要 Node.js。需已安装 Firefox，可通过选项指定可执行文件路径和配置文件名称。未声明账号、API 密钥或环境变量。
安装前请注意
execute_chrome_javascript 会在 chrome 窗口上下文中执行特权 JavaScript，权限很大，需谨慎使用。注入样式表会改变正在运行的浏览器界面；命令行安装命令在未指定合并时会覆盖配置文件中已有的 CSS 主题，建议先备份。

安装

在 SourceWeft 中

  1. 打开 控制台中的 Firefox Css Theme，将其添加到工作区。
  2. 为需要使用其工具的对话启用该服务。

Desktop only，通过 STDIO。 STDIO 服务会启动本地进程，因此需要 SourceWeft 桌面宿主。

其他 MCP 客户端

参照 仓库 中的启动说明。

README

Firefox CSS Theme

[npm version] [Test]

A toolkit for scaffolding, live-debugging, and installing Firefox CSS themes. For agentic DOM inspection and live styling, an MCP server is also available.

Getting Started

[!TIP] You need Node.js to get started.

For Theme Authors

Scaffold a new theme project using npx:

bash
npx firefox-css-theme create

This interactively prompts for your theme name and stylesheet targets (userChrome only, userContent only, or both).

If you have already opened a theme repository, launch Firefox with live CSS hot-reloading:

bash
npx firefox-css-theme start

[!NOTE] Theme entry files (userChrome.css and/or userContent.css) must be located at the root of the project directory.

For Theme Users

Navigate to the theme directory and install the stylesheets:

bash
npx firefox-css-theme install

The toolkit will look for userChrome.css and userContent.css in the current directory, and install them into the selected Firefox profile.

For the full list of CLI options, run npx firefox-css-theme --help.

MCP Server Usage

The MCP server enables AI assistants to inspect the Firefox chrome DOM, query computed styles, inject custom CSS, and capture UI screenshots in real time.

[MCP Usage Example - Customising Close Tab Button]

Configuration

Add the server to your preferred client or development environment:

Claude Code
bash
claude mcp add firefox-css-theme -- npx -y firefox-css-theme mcp
Codex
bash
codex mcp add firefox-css-theme -- npx -y firefox-css-theme mcp
IDE MCP Configuration
json
{	"mcpServers": {		"firefox-css-theme": {			"command": "npx",			"args": ["-y", "firefox-css-theme", "mcp"]		}	}}

Available MCP Tools

  • launch_browser: Launches Firefox with chrome debugging.
  • close_browser: Terminates the browser instance.
  • customize_toolbar: Toggles the Firefox "Customise Toolbar" mode.
  • get_ui_tree: Dumps the hierarchical DOM tree of the selected UI element.
  • query_ui_elements: Queries elements matching a CSS selector in the browser chrome.
  • get_computed_styles: Extracts computed CSS property values of a specific UI element.
  • inject_theme_css: Injects a stylesheet into the live UI.
  • remove_theme_css: Removes an injected stylesheet.
  • list_theme_css: Lists all currently injected stylesheets.
  • take_ui_screenshot: Captures a screenshot of a specific UI component.
  • execute_chrome_javascript: Runs JavaScript in the browser chrome window context.

Commands

firefox-css-theme create

Scaffold a new Firefox CSS theme project.

Usage
bash
npx firefox-css-theme create [options]
Options
OptionDescription
-n, --name <name>Theme name
-t, --target <target>Stylesheet target: chrome, content, or both
-f, --forceProceed without warning

firefox-css-theme start

Launch Firefox with live stylesheet bundling and hot-reloading.

Usage
bash
npx firefox-css-theme start [options]
Options
OptionDescription
-b, --binary <path>Path to Firefox executable
-p, --profile <name>Firefox profile name
--headlessRun in headless mode
--atbcStart with Adaptive Tab Bar Colour
--no-toolboxDisable Browser Toolbox
--no-watchDisable file watching

firefox-css-theme install

Install compiled stylesheets from the current working directory into a Firefox profile.

Usage
bash
npx firefox-css-theme install [options]
Options
OptionDescription
-p, --profile <name>Firefox profile name
-m, --mergeMerge with existing stylesheets
-f, --forceProceed without warning

[!WARNING] This operation will overwrite existing CSS themes in the profile unless --merge is specified. A backup is advised.

firefox-css-theme mcp

Start the Model Context Protocol (MCP) server.

Usage
bash
npx firefox-css-theme mcp [options]
Options
OptionDescription
-b, --binary <path>Path to Firefox executable
-p, --profile <name>Firefox profile name

来源：README.md，提交 bc302be

工具

11

launch_browser

Launch a Firefox instance with chrome debugging capabilities enabled.

输入参数toolboxheadlessnoToolboxbinaryPathprofileName

close_browser

Close the running Firefox instance.

无需输入参数。

customize_toolbar

Activate or manage the Firefox Customise Toolbar mode in the browser chrome.

输入参数action

get_ui_tree

Retrieve the hierarchical DOM tree of the selected UI element in the Firefox chrome window.

输入参数maxDepthrootSelector

query_ui_elements

Find elements in the Firefox UI chrome document matching a CSS selector.

输入参数selector必填

get_computed_styles

Extract computed CSS property values for a Firefox UI chrome element.

输入参数selector必填properties

inject_theme_css

Inject or replace a live stylesheet into the Firefox window.

输入参数idcss必填target必填

remove_theme_css

Remove an injected stylesheet from the Firefox window.

输入参数id必填target必填

list_theme_css

List all custom stylesheets currently injected into the Firefox window.

输入参数target必填

take_ui_screenshot

Capture a PNG screenshot of the Firefox browser chrome window or a specific UI component.

输入参数selector

execute_chrome_javascript

Execute privileged JavaScript code in the Firefox chrome window context.

输入参数script必填

版本历史

6
  1. v0.3.5最新Oct 25, 2026
  2. v0.3.4Oct 14, 2026
  3. v0.3.3Oct 13, 2026
  4. v0.3.2Oct 12, 2026
  5. v0.2.9Oct 3, 2026
  6. v0.2.8Sep 16, 2026

评分

已满足适用检查项的 90%

该评分衡量此收录条目的完整程度，依据注册中心条目、端点与公开来源计算得出。它不是对服务器本身的评价，也不表示服务器安全或当前可用：可连通性是带日期的检查结果，评分也不包含安装量或用户评价。

  • 近 30 天内可连通25 分
  • 已声明认证方式10 分

    请在注册中心条目中声明凭据请求头，或保持端点能够响应探测，以便判定其认证方式。

  • 已列出工具必需15 分
  • 描述必需15 分
  • 图标10 分
  • 文档15 分
  • 许可证10 分