{
  "markdown": "# Firefox CSS Theme\n\n[![npm version](https://img.shields.io/npm/v/firefox-css-theme)](https://www.npmjs.com/package/firefox-css-theme)\n[![Test](https://github.com/easonwong-de/Firefox-CSS-Theme/actions/workflows/test.yml/badge.svg)](https://github.com/easonwong-de/Firefox-CSS-Theme/actions/workflows/test.yml)\n\nA toolkit for Firefox CSS theme authors to scaffold, bundle, and live-debug theme repositories. It also provides end users with an automated installer.\n\nA Model Context Protocol (MCP) server is also available for AI-assisted DOM inspection and live styling.\n\n## Requirements\n\n- Node.js >= 20\n- Firefox Browser\n\n## Getting Started\n\n### For Theme Authors\n\nScaffold a new theme project using `npx`:\n\n```bash\nnpx firefox-css-theme create\n```\n\nThis interactively prompts for your theme name and stylesheet targets (`userChrome.css`, `userContent.css`, or both), creating a minimal npm package with helper scripts and dependencies.\n\nAlternatively, add `firefox-css-theme` as a development dependency to an existing project:\n\n```bash\nnpm install --save-dev firefox-css-theme\n```\n\nAdd helper scripts to your `package.json`:\n\n```javascript\n{\n\t\"scripts\": {\n\t\t\"start\": \"firefox-css-theme start\", // launch Firefox with live CSS hot-reloading\n\t\t\"install:theme\": \"firefox-css-theme install\" // installer script for users\n\t}\n}\n```\n\n> [!NOTE]\n> Theme entry files (`userChrome.css` and/or `userContent.css`) must be located at the repository root directory.\n\n### For End Users\n\nWhen users clone your theme repository, they only need to run the installer:\n\n```bash\n# Clone the repository and install dependencies\nnpm install\n\n# Installer the CSS theme\nnpm run install:theme\n```\n\nIf multiple Firefox profiles exist, an interactive selection list will prompt you to choose one. To skip the selection, specify the target profile directly with `-p, --profile <name>`.\n\nFor the full list of CLI options, run `npx firefox-css-theme --help` in your project.\n\n## Commands\n\n### `firefox-css-theme create`\n\nScaffold a new Firefox CSS theme package.\n\n#### Usage\n\n```bash\nfirefox-css-theme create [name] [options]\n```\n\n#### Options\n\n| Option                  | Description                                 |\n| ----------------------- | ------------------------------------------- |\n| `-t, --target <target>` | Stylesheet target: both, chrome, or content |\n| `-f, --force`           | Proceed without warning                     |\n\n### `firefox-css-theme start`\n\nLaunch Firefox with live stylesheet bundling and hot-reloading.\n\n#### Usage\n\n```bash\nfirefox-css-theme start [options]\n```\n\n#### Options\n\n| Option                 | Description                |\n| ---------------------- | -------------------------- |\n| `-b, --binary <path>`  | Path to Firefox executable |\n| `-p, --profile <name>` | Firefox profile name       |\n| `--no-watch`           | Disable file watching      |\n| `--headless`           | Run in headless mode       |\n| `--nova-ui`            | Enable Firefox Nova UI     |\n\n### `firefox-css-theme install`\n\nInstall compiled stylesheets into a Firefox profile.\n\n#### Usage\n\n```bash\nfirefox-css-theme install [options]\n```\n\n#### Options\n\n| Option                 | Description                     |\n| ---------------------- | ------------------------------- |\n| `-p, --profile <name>` | Firefox profile name            |\n| `-m, --merge`          | Merge with existing stylesheets |\n| `-f, --force`          | Proceed without warning         |\n\n> [!WARNING]\n> This operation will overwrite existing CSS themes in the profile unless `--merge` is specified. A backup is advised.\n\n### `firefox-css-theme mcp`\n\nStart the Model Context Protocol (MCP) server.\n\n#### Usage\n\n```bash\nfirefox-css-theme mcp [options]\n```\n\n#### Options\n\n| Option                 | Description                |\n| ---------------------- | -------------------------- |\n| `-b, --binary <path>`  | Path to Firefox executable |\n| `-p, --profile <name>` | Firefox profile name       |\n| `--headless`           | Run in headless mode       |\n| `--nova-ui`            | Enable Firefox Nova UI     |\n\n## MCP Server Usage\n\nThe MCP server enables AI assistants to inspect the Firefox chrome DOM, query computed styles, inject custom CSS, and capture UI screenshots in real time.\n\n![MCP Usage Example - Customising Close Tab Button](./assets/image.jpg)\n\n### Configuration\n\nAdd the server to your preferred client or development environment:\n\n#### Claude Code\n\n```bash\nclaude mcp add firefox-css-theme -- npx -y firefox-css-theme mcp --nova-ui\n```\n\n#### Codex\n\n```bash\ncodex mcp add firefox-css-theme -- npx -y firefox-css-theme mcp --nova-ui\n```\n\n#### IDE MCP Configuration\n\nUsing `npx`:\n\n```json\n{\n\t\"mcpServers\": {\n\t\t\"firefox-css-theme\": {\n\t\t\t\"command\": \"npx\",\n\t\t\t\"args\": [\"-y\", \"firefox-css-theme\", \"mcp\", \"--nova-ui\"]\n\t\t}\n\t}\n}\n```\n\nOr using a local build:\n\n```json\n{\n\t\"mcpServers\": {\n\t\t\"firefox-css-theme\": {\n\t\t\t\"command\": \"node\",\n\t\t\t\"args\": [\n\t\t\t\t\"/path/to/firefox-css-theme/dist/cli.js\",\n\t\t\t\t\"mcp\",\n\t\t\t\t\"--nova-ui\"\n\t\t\t]\n\t\t}\n\t}\n}\n```\n\n## Available MCP Tools\n\n- `launch_browser`: Launches Firefox with chrome debugging.\n- `close_browser`: Terminates the browser instance.\n- `customize_toolbar`: Toggles the Firefox \"Customise Toolbar\" mode.\n- `get_ui_tree`: Dumps the hierarchical DOM tree of selected UI element.\n- `query_ui_elements`: Queries elements matching a CSS selector in the browser chrome.\n- `get_computed_styles`: Extracts computed CSS property values of a specific UI element.\n- `inject_theme_css`: Injects a stylesheet in the live UI.\n- `remove_theme_css`: Removes an injected stylesheet.\n- `list_theme_css`: Lists all currently injected stylesheets.\n- `take_ui_screenshot`: Captures a screenshot of a specific UI component.\n- `execute_chrome_javascript`: Runs JavaScript in the browser chrome window context.\n",
  "bytes": 5784,
  "sha": "3b7f812da080965ea63f42b989fe3da2774858901835e63929c48c7e2ca61511",
  "repo_slug": "easonwong-de/firefox-css-theme",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/mcp_io_github_easonwong_de_firefox_css_theme_7da2ae23/readme"
}