Log inSubmit server
Firefox Css Theme logo

Firefox Css Theme

Inspect, modify, and screenshot Firefox chrome UI styles through MCP tools and live CSS injection.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

Install Firefox Css Theme

Pick your client, then add it in one click or paste the config.

STDIONode.js
~/Library/Application Support/Claude/claude_desktop_config.json
claude_desktop_config.json
{
  "mcpServers": {
    "firefox-css-theme": {
      "command": "npx",
      "args": [
        "-y",
        "firefox-css-theme"
      ]
    }
  }
}

Settings → Developer → Edit Config, merge this into mcpServers, then fully quit and reopen Claude Desktop.

We couldn’t confirm it starts correctly

The install command installed and started the server, which then stopped for configuration (such as an API key) that our sandbox does not have — expected for servers that connect to your account.

npx -y firefox-css-theme

No response to initialize.

This is an experimental automated check and can have false negatives — missing environment variables, a slow cold install, etc. It doesn’t necessarily mean something’s wrong. Last checked Today.

Overview

firefox-css-theme connects an MCP-compatible assistant to Firefox with chrome debugging enabled. It exposes tools for inspecting browser-chrome DOM elements, reading computed styles, injecting or removing CSS, capturing UI screenshots, and running chrome-window JavaScript. Use it when developing or debugging Firefox themes interactively, especially when visual feedback and live stylesheet changes are useful.

Use cases

  • Inspect Firefox chrome elements while building a custom theme
  • Query computed styles for browser controls
  • Inject CSS and review live visual changes
  • Capture screenshots of themed Firefox components
  • Install compiled userChrome.css and userContent.css files

Key features

  • Firefox chrome DOM inspection
  • Computed CSS style queries
  • Live stylesheet injection and removal
  • UI component screenshots
  • Chrome-window JavaScript execution
  • Theme scaffolding and profile installation CLI

Tools11

What Firefox Css Theme lets your agent do. Expand a tool for its parameters.

Self-reported~173 tokens of context

Security & health

What it can reach and how reliably it runs — from our own checks, not the maintainer’s claims.

ActiveLast checked Today

Recent health check succeeded.

9/9 checks healthy over the last 46d

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 5d ago via OSV.dev · firefox-css-theme (npm)

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars3Stargazers on the source repository.
npm downloads1.2kPackage downloads in the last 30 days.
Last commit3d agoMost recent push to the default branch.
Install checkRunsOur sandbox started it; it then asked for an API key or config.
Tools exposed11Callable tools this server registers over MCP.

How Firefox Css Theme works

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:

Terminal
npx -y firefox-css-theme mcp

For Claude Code, register it with:

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

Read the full README View source on GitHub

Reviews

No reviews yet — be the first to share how it worked for you.

Frequently Asked Questions about Firefox Css Theme

firefox-css-theme is an MCP server that connects AI assistants to a Firefox browser running with chrome debugging. Its main tools launch and close Firefox, inspect the browser-chrome UI tree and styles, query elements, inject or remove CSS, list injected stylesheets, capture UI screenshots, toggle toolbar customization, and execute chrome JavaScript.

Run `npx -y firefox-css-theme mcp` and register that command in your MCP client. Claude Code and Codex each have dedicated registration commands, while other clients can use a command configuration with `npx` and the `firefox-css-theme mcp` arguments.

Use `query_ui_elements` to find browser-chrome elements with a CSS selector, then use `get_ui_tree` or `get_computed_styles` to inspect their structure and resolved CSS values. `take_ui_screenshot` can capture a selected UI component for visual review.

Yes, it can inject stylesheets into the live Firefox UI with `inject_theme_css`. Use `list_theme_css` to see injected stylesheets and `remove_theme_css` to remove one while debugging a theme.

Yes, it can be configured in Cursor through its MCP server configuration using the standard command `npx -y firefox-css-theme mcp`. The server also accepts Firefox binary and profile options through the MCP command.

Related MCP servers

All in Browser Automation All alternatives
Add a badge to your READMEShow it’s listed — live SVG, Markdown or HTML.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:
Live Dynamic SVG PreviewFirefox Css Theme AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/firefox-css-theme?style=directory)](https://allmcps.com/mcp/firefox-css-theme)
HTML Embed
<a href="https://allmcps.com/mcp/firefox-css-theme"><img src="https://allmcps.com/api/badge/firefox-css-theme?style=directory" alt="Firefox Css Theme on AllMCPs" /></a>