Firefox Css Theme

io.github.easonwong-dePublished by GitHub account easonwong-dev0.3.5Updated Oct 25, 2026

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

VerifiedSTDIODesktop onlyBrowser AutomationDeveloper ToolsMedia & Design

Overview

AI-generated overview

MCP server for building and live-debugging Firefox CSS themes: it inspects the browser chrome UI, injects stylesheets and captures screenshots.

What you can do
  • Launch and close a Firefox instance with chrome debugging enabled, and toggle the Customise Toolbar mode.
  • Inspect the browser chrome UI: dump the DOM tree of an element, query elements by CSS selector, and read computed CSS values.
  • Inject, replace, remove and list live stylesheets in the running Firefox window.
  • Capture PNG screenshots of the chrome window or a specific UI component.
  • Run privileged JavaScript in the chrome window context.
When to use it
Useful when authoring or debugging a Firefox userChrome or userContent theme and you want an assistant to inspect the real browser UI, check computed styles, and iterate on CSS live instead of guessing selectors.
Requirements
Runs locally over stdio via npx, so Node.js is required. Firefox must be installed; the executable path and profile name can be passed as options. No accounts, API keys or environment variables are declared.
Before you install
execute_chrome_javascript runs privileged JavaScript in the chrome window context, which is powerful and should be used with care. Injected stylesheets change the live browser UI, and the CLI install command overwrites existing CSS themes in a profile unless merge is specified, so back up first.

Installation

In SourceWeft

  1. Open Firefox Css Theme in the dashboard and add it to a workspace.
  2. Enable the server for the chats that should use its tools.

Desktop only via STDIO. STDIO servers start a local process, so they need the SourceWeft desktop host.

Other MCP clients

Follow the launch instructions in the repository.

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

Source: README.md at commit bc302be

Tools

11

launch_browser

Launch a Firefox instance with chrome debugging capabilities enabled.

ParameterstoolboxheadlessnoToolboxbinaryPathprofileName

close_browser

Close the running Firefox instance.

Takes no parameters.

customize_toolbar

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

Parametersaction

get_ui_tree

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

ParametersmaxDepthrootSelector

query_ui_elements

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

Parametersselectorrequired

get_computed_styles

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

Parametersselectorrequiredproperties

inject_theme_css

Inject or replace a live stylesheet into the Firefox window.

Parametersidcssrequiredtargetrequired

remove_theme_css

Remove an injected stylesheet from the Firefox window.

Parametersidrequiredtargetrequired

list_theme_css

List all custom stylesheets currently injected into the Firefox window.

Parameterstargetrequired

take_ui_screenshot

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

Parametersselector

execute_chrome_javascript

Execute privileged JavaScript code in the Firefox chrome window context.

Parametersscriptrequired

Version history

6
  1. v0.3.5LatestOct 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

Score

90% of the applicable checks met

How complete this listing is, computed from the registry entry, the endpoint and public sources. Not a rating of the server and not a statement that it is safe or working today: reachability is a dated check, and no installs or reviews go into the score.

  • Reached in the last 30 days25 pts
  • Auth declared10 pts

    Declare the credential headers in the registry entry, or keep the endpoint answering the probe so its auth can be classified.

  • Tools listedRequired15 pts
  • DescriptionRequired15 pts
  • Logo10 pts
  • Documentation15 pts
  • License10 pts