mcpField
F
firefox-css-theme

firefox-css-theme

Local
github.com/easonwong-deDeveloper Tools3Updated 4d ago
Repository

About firefox-css-theme

firefox-css-theme is a toolkit for Firefox theme authors and users, combining project scaffolding, live CSS reloading, and profile installation. Its MCP server supports inspecting and changing the browser UI while debugging.

Key features

  1. 01Scaffold Firefox theme projects
  2. 02Live CSS hot-reloading
  3. 03Install stylesheets into profiles
  4. 04Inspect browser chrome DOM and styles
  5. 05Inject and remove CSS
  6. 06Capture UI screenshots

Use cases

  1. 01Start a new Firefox theme
  2. 02Debug theme changes in a live browser
  3. 03Install stylesheets into a Firefox profile
  4. 04Inspect and style Firefox UI elements

MCP support

The MCP server exposes Firefox launch and UI-debugging tools to MCP clients. They can inspect DOM elements and computed styles, inject CSS, run chrome-context JavaScript, and capture screenshots.

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
  "mcpServers": {
    "easonwong-de-firefox-css-theme": {
      "command": "npx",
      "args": [
        "-y",
        "firefox-css-theme"
      ]
    }
  }
}
Run commandnpx -y firefox-css-theme

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npmfirefox-css-theme0.3.5

Tools

11

Saved tool list · updated 3d ago

ParameterTypeRequiredDescription
toolboxbooleanNoOptional flag to open the Browser Toolbox. Defaults to true unless headless.
headlessbooleanNoOptional flag to run Firefox in headless mode.
noToolboxbooleanNoOptional flag to disable opening the Browser Toolbox.
binaryPathstringNoOptional path to the Firefox executable binary.
profileNamestringNoOptional name of an existing Firefox profile. If omitted, uses an isolated temporary profile.

Details

From the project 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:

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:

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:

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
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 Configuration
{
	"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
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
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
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
npx firefox-css-theme mcp [options]
Options
OptionDescription
-b, --binary <path>Path to Firefox executable
-p, --profile <name>Firefox profile name

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.