Firefox Css Theme

io.github.easonwong-de由 GitHub 帳號 easonwong-de 發布v0.3.5更新於 Oct 25, 2026

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

已驗證STDIO僅桌面瀏覽器自動化開發者工具媒體與設計

概覽

AI 產生的概覽

用來建置與即時除錯 Firefox CSS 主題的 MCP 伺服器，可檢視瀏覽器介面、注入樣式表並擷取畫面。

可以做什麼
  • 啟動與關閉開啟 chrome 偵錯的 Firefox 實例，並切換「自訂工具列」模式。
  • 檢視瀏覽器介面：匯出元素的 DOM 樹、以 CSS 選擇器查詢元素、讀取計算後的 CSS 屬性值。
  • 對執行中的 Firefox 視窗注入、取代、移除與列出即時樣式表。
  • 擷取瀏覽器介面視窗或特定介面元件的 PNG 畫面。
  • 在 chrome 視窗環境中執行特權 JavaScript。
適用情境
適合在撰寫或除錯 Firefox userChrome、userContent 主題時使用，讓助理直接檢視真實瀏覽器介面、核對計算樣式並即時調整 CSS，而不必猜測選擇器。
執行需求
透過 npx 以 stdio 在本機執行，需要 Node.js。需已安裝 Firefox，可用選項指定執行檔路徑與設定檔名稱。未宣告帳號、API 金鑰或環境變數。
安裝前請注意
execute_chrome_javascript 會在 chrome 視窗環境中執行特權 JavaScript，權限很大，需謹慎使用。注入樣式表會改變執行中的瀏覽器介面；命令列安裝指令若未指定合併，會覆寫設定檔中既有的 CSS 主題，建議先備份。

安裝

在 SourceWeft 中

  1. 開啟 儀表板中的 Firefox Css Theme，將其新增到工作區。
  2. 為需要使用其工具的對話啟用該服務。

Desktop only，透過 STDIO。 STDIO 服務會啟動本機處理程序，因此需要 SourceWeft 桌面主機。

其他 MCP 客戶端

參照 儲存庫 中的啟動說明。

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

來源：README.md，提交 bc302be

工具

11

launch_browser

Launch a Firefox instance with chrome debugging capabilities enabled.

輸入參數toolboxheadlessnoToolboxbinaryPathprofileName

close_browser

Close the running Firefox instance.

無需輸入參數。

customize_toolbar

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

輸入參數action

get_ui_tree

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

輸入參數maxDepthrootSelector

query_ui_elements

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

輸入參數selector必填

get_computed_styles

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

輸入參數selector必填properties

inject_theme_css

Inject or replace a live stylesheet into the Firefox window.

輸入參數idcss必填target必填

remove_theme_css

Remove an injected stylesheet from the Firefox window.

輸入參數id必填target必填

list_theme_css

List all custom stylesheets currently injected into the Firefox window.

輸入參數target必填

take_ui_screenshot

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

輸入參數selector

execute_chrome_javascript

Execute privileged JavaScript code in the Firefox chrome window context.

輸入參數script必填

版本歷史

6
  1. v0.3.5最新Oct 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

評分

已滿足適用檢查項的 90%

該評分衡量此收錄條目的完整程度，依據註冊中心條目、端點與公開來源計算得出。它不是對伺服器本身的評價，也不表示伺服器安全或目前可用：可連通性是帶日期的檢查結果，評分也不包含安裝量或使用者評價。

  • 近 30 天內可連通25 分
  • 已宣告認證方式10 分

    請在註冊中心條目中宣告憑證請求標頭，或保持端點能夠回應探測，以便判定其認證方式。

  • 已列出工具必需15 分
  • 描述必需15 分
  • 圖示10 分
  • 文件15 分
  • 授權條款10 分