# firefox-css-theme [Health: Active]

**Category:** 📂 Browser Automation  
**Repository:** https://github.com/easonwong-de/Firefox-CSS-Theme  
**GitHub Stars:** 3  
**npm Downloads (last month):** 1179  
**Views:** 0  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/firefox-css-theme

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

## Tools
Capabilities this server exposes over MCP:

- **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.

## Claude Desktop Quick Installation
Install path detected from listing signals. Uses `npx` (confidence: high):

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

## Documentation

## What firefox-css-theme does

firefox-css-theme provides an MCP interface for working with Firefox’s browser-chrome UI, the interface layer that includes browser controls and other Firefox application elements. An assistant can start or stop a Firefox instance, inspect the UI structure, find elements with CSS selectors, examine computed CSS values, apply temporary styles, and capture screenshots of selected components.

The package also includes command-line workflows for Firefox CSS themes. It can scaffold a project, start Firefox with stylesheet watching and hot reload, and install compiled `userChrome.css` or `userContent.css` files into a selected Firefox profile. The MCP portion is started with the `mcp` command.

## How it works

Run the MCP entry point through `npx` and register it with an MCP client using a command-based server configuration. The server launches Firefox with chrome debugging when requested, then operates on the browser chrome window through its exposed tools.

Inspection tools work at different levels. `get_ui_tree` returns a hierarchical representation of a selected UI element, while `query_ui_elements` locates browser-chrome elements using CSS selectors. `get_computed_styles` reports the resolved CSS properties for a specific element. Screenshots provide a visual result for a chosen UI component.

CSS injected through the MCP tools applies to the live interface. The server can remove individual injected stylesheets or list the stylesheets currently active through the injection mechanism. `customize_toolbar` controls Firefox’s Customise Toolbar mode, and `execute_chrome_javascript` runs JavaScript in the browser chrome window context.

## Setup and configuration

Node.js is required. Start the server with:

```bash
npx -y firefox-css-theme mcp
```

For Claude Code, register it with:

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

For Codex, use:

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

Other MCP clients can use a command configuration with `npx` and the arguments `-y`, `firefox-css-theme`, and `mcp`. The MCP command accepts `--binary` for a Firefox executable path and `--profile` for a Firefox profile name.

Theme authors can scaffold a project with `npx firefox-css-theme create`. The `start` command supports a Firefox binary path, profile name, headless mode, optional Adaptive Tab Bar Colour startup, Browser Toolbox control, and file-watching control. Theme files must be at the project root for the supported `userChrome.css` and `userContent.css` workflows.

## Tools and capabilities

- Launch and close a Firefox instance with chrome debugging.
- Toggle Firefox’s Customise Toolbar mode.
- Inspect browser-chrome UI trees and query elements with CSS selectors.
- Read computed CSS properties from selected UI elements.
- Inject, remove, and list live theme stylesheets.
- Capture screenshots of Firefox UI components.
- Execute JavaScript in the browser chrome window.
- Scaffold, watch, hot-reload, and install Firefox CSS theme files through the CLI.

## Limitations and notes

The `install` command can overwrite existing CSS themes in the selected profile unless the merge option is used, so backing up existing theme files is advisable. The theme workflow distinguishes between `userChrome.css`, which targets browser chrome, and `userContent.css`, which targets content pages. The MCP tools operate on the live Firefox UI rather than replacing the profile-based installation workflow.

_Full upstream README: https://allmcps.com/mcp/firefox-css-theme/readme_