firefox-css-theme 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Eason Wong
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,181 @@
+# Firefox CSS Theme
+
+[![npm version](https://img.shields.io/npm/v/firefox-css-theme)](https://www.npmjs.com/package/firefox-css-theme)
+[![Test](https://github.com/easonwong-de/Firefox-CSS-Theme-MCP/actions/workflows/test.yml/badge.svg)](https://github.com/easonwong-de/Firefox-CSS-Theme-MCP/actions/workflows/test.yml)
+
+A CLI toolkit for scaffolding, compiling, live-debugging, and watching Firefox UI and CSS themes (`userChrome.css` and `userContent.css`). It also provides a Model Context Protocol (MCP) server for AI-assisted inspection and styling.
+
+## Requirements
+
+- Node.js >= 20
+- Firefox Browser
+
+## Getting Started
+
+### Installation
+
+Install as a development dependency within your theme repository:
+
+```bash
+npm install --save-dev firefox-css-theme
+```
+
+You can add workflow scripts to your `package.json`:
+
+```json
+{
+	"scripts": {
+		"create": "firefox-css-theme create",
+		"start": "firefox-css-theme start",
+		"profiles": "firefox-css-theme profiles",
+		"save": "firefox-css-theme save"
+	}
+}
+```
+
+> [!NOTE]
+> `userChrome.css` and `userContent.css` must be located at the project root directory by default; otherwise, specify their paths using the `-c, --chrome` and `-u, --content` options.
+
+### Scaffold Theme Files
+
+Generate boilerplate `userChrome.css` and `userContent.css` files with Firefox namespace headers:
+
+```bash
+npm run create
+```
+
+Options:
+
+- `-c, --chrome <path>`: Custom output path for `userChrome.css`.
+- `-u, --content <path>`: Custom output path for `userContent.css`.
+- `-f, --force`: Overwrite existing files.
+
+### Start Live Development Session
+
+Launch Firefox with hot stylesheet reloading:
+
+```bash
+npm run start
+```
+
+Options:
+
+- `-p, --profile <name>`: Designate a specific existing Firefox profile by name. If omitted, Firefox runs in an isolated temporary profile that is automatically created and deleted on exit.
+- `-c, --chrome <path>`: Custom path to `userChrome.css`.
+- `-u, --content <path>`: Custom path to `userContent.css`.
+- `--no-watch`: Disable file watching and live reloading.
+- `--headless`: Run Firefox in headless mode.
+- `--nova-ui`: Enable Firefox Nova UI redesign preferences.
+- `--binary <path>`: Path to custom Firefox executable binary.
+
+### Discover Available Profiles
+
+List all detected Firefox profiles:
+
+```bash
+npm run profiles
+```
+
+### Save Theme to Profile
+
+Compile and save stylesheets directly into a profile's `chrome/` directory:
+
+```bash
+npm run save -- --profile <name>
+```
+
+Options:
+
+- `-p, --profile <name>`: Target Firefox profile name (mandatory if multiple profiles exist).
+- `-c, --chrome <path>`: Custom path to `userChrome.css`.
+- `-u, --content <path>`: Custom path to `userContent.css`.
+- `-f, --force`: Overwrite without confirmation prompt.
+
+> [!WARNING]
+> This operation will overwrite existing CSS themes in the profile. A backup is advised.
+
+## CLI Usage
+
+You can also run commands on demand without local installation using `npx firefox-css-theme [command] [option]`.
+
+```
+Options:
+  -v, --version     Show version number
+  -h, --help        display help for command
+
+Commands:
+  create [options]  Scaffold starter userChrome.css and userContent.css files
+  start [options]   Launch Firefox with live stylesheet bundling and hot-reloading
+  profiles          List all detected Firefox profiles
+  save [options]    Save compiled stylesheets into a Firefox profile's chrome folder
+  mcp [options]     Start the Model Context Protocol (MCP) server
+  help [command]    display help for command
+```
+
+## 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](./assets/image.jpg)
+
+### 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 --nova-ui
+```
+
+#### Codex
+
+```bash
+codex mcp add firefox-css-theme -- npx -y firefox-css-theme mcp --nova-ui
+```
+
+#### IDE MCP Settings (`mcpServers`)
+
+Using `npx`:
+
+```json
+{
+	"mcpServers": {
+		"firefox-css-theme": {
+			"command": "npx",
+			"args": ["-y", "firefox-css-theme", "mcp", "--nova-ui"]
+		}
+	}
+}
+```
+
+Or using an absolute path to a local build:
+
+```json
+{
+	"mcpServers": {
+		"firefox-css-theme": {
+			"command": "node",
+			"args": [
+				"/absolute/path/to/firefox-css-theme-mcp/dist/cli.js",
+				"mcp",
+				"--nova-ui"
+			]
+		}
+	}
+}
+```
+
+## Available MCP Tools
+
+- `launch_browser`: Launches Firefox with chrome debugging capabilities enabled.
+- `close_browser`: Terminates the browser instance.
+- `customize_toolbar`: Activates or controls the Firefox "Customise Toolbar" mode.
+- `get_ui_tree`: Dumps the hierarchical DOM tree of the chrome window.
+- `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 stylesheets in the live UI (`target: "chrome" | "content"`).
+- `remove_theme_css`: Removes an injected stylesheet by id (`target: "chrome" | "content"`).
+- `list_theme_css`: Lists all currently injected custom stylesheets (`target: "chrome" | "content"`).
+- `take_ui_screenshot`: Captures a screenshot of the browser window or a specific UI component.
+- `execute_chrome_javascript`: Runs privileged JavaScript in the browser chrome window context.

package/dist/cli.js

@@ -0,0 +1,101 @@
+#!/usr/bin/env node
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { Command } from "commander";
+import { createCommand } from "./commands/create.js";
+import { startMcpServer } from "./commands/mcp.js";
+import { profilesCommand } from "./commands/profiles.js";
+import { saveCommand } from "./commands/save.js";
+import { startCommand } from "./commands/start.js";
+const packageJson = JSON.parse(readFileSync(new URL("../package.json", import.meta.url), "utf8"));
+const program = new Command();
+program
+    .name("firefox-css-theme")
+    .description(packageJson.description)
+    .version(packageJson.version, "-v, --version", "Show version number");
+program
+    .command("create")
+    .description("Scaffold starter userChrome.css and userContent.css files")
+    .option("-c, --chrome <path>", "Path to userChrome.css")
+    .option("-u, --content <path>", "Path to userContent.css")
+    .option("-f, --force", "Overwrite existing files without confirmation")
+    .action(async (options) => {
+    await createCommand({
+        chromePath: options.chrome,
+        contentPath: options.content,
+        force: options.force,
+    });
+});
+program
+    .command("start")
+    .description("Launch Firefox with live stylesheet bundling and hot-reloading")
+    .option("-p, --profile <name>", "Designate Firefox profile name")
+    .option("-c, --chrome <path>", "Path to userChrome.css (default: ./userChrome.css)")
+    .option("-u, --content <path>", "Path to userContent.css (default: ./userContent.css)")
+    .option("--no-watch", "Disable file watching in start mode")
+    .option("--headless", "Run Firefox in headless mode")
+    .option("--nova-ui", "Enable Firefox Nova UI preferences")
+    .option("--binary <path>", "Path to custom Firefox executable")
+    .action(async (options) => {
+    await startCommand({
+        binaryPath: options.binary,
+        chromePath: options.chrome,
+        contentPath: options.content,
+        headless: options.headless,
+        novaUi: options.novaUi,
+        profileName: options.profile,
+        watch: options.watch,
+    });
+});
+program
+    .command("profiles")
+    .description("List all detected Firefox profiles")
+    .action(async () => {
+    await profilesCommand();
+});
+program
+    .command("save")
+    .description("Save compiled stylesheets into a Firefox profile's chrome folder")
+    .option("-p, --profile <name>", "Target Firefox profile name")
+    .option("-c, --chrome <path>", "Path to userChrome.css")
+    .option("-u, --content <path>", "Path to userContent.css")
+    .option("-f, --force", "Overwrite existing files without confirmation")
+    .action(async (options) => {
+    await saveCommand({
+        chromePath: options.chrome,
+        contentPath: options.content,
+        force: options.force,
+        profileName: options.profile,
+    });
+});
+program
+    .command("mcp")
+    .description("Start the Model Context Protocol (MCP) server")
+    .option("--nova-ui", "Enable Firefox Nova UI preferences")
+    .option("--headless", "Run Firefox in headless mode")
+    .option("--binary <path>", "Path to custom Firefox executable")
+    .option("-p, --profile <name>", "Designate Firefox profile name")
+    .allowUnknownOption()
+    .action(async (options) => {
+    await startMcpServer({
+        binaryPath: options.binary,
+        headless: options.headless,
+        novaUi: options.novaUi,
+        profileName: options.profile,
+    });
+});
+async function main() {
+    const scriptBinaryName = path.basename(process.argv[1] || "");
+    if (scriptBinaryName === "firefox-css-theme-mcp" ||
+        scriptBinaryName === "firefox-css-theme-mcp.js") {
+        const isNovaUi = process.argv.includes("--nova-ui");
+        const isHeadless = process.argv.includes("--headless");
+        await startMcpServer({ headless: isHeadless, novaUi: isNovaUi });
+        return;
+    }
+    await program.parseAsync(process.argv);
+}
+main().catch((error) => {
+    console.error(error instanceof Error ? error.message : error);
+    process.exit(1);
+});

package/dist/commands/create.js

@@ -0,0 +1,34 @@
+import { existsSync, writeFileSync } from "node:fs";
+import path from "node:path";
+const DEFAULT_CHROME_CSS = `/* Firefox userChrome.css */
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+`;
+const DEFAULT_CONTENT_CSS = `/* Firefox userContent.css */
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+`;
+/**
+ * Scaffolds starter userChrome.css and userContent.css boilerplate files with
+ * namespace headers.
+ */
+export async function createCommand(options = {}) {
+    const chromePath = path.resolve(process.cwd(), options.chromePath || "userChrome.css");
+    const contentPath = path.resolve(process.cwd(), options.contentPath || "userContent.css");
+    if (existsSync(chromePath) && !options.force) {
+        console.warn(`\x1b[33m[skip]\x1b[0m ${chromePath} already exists. Use --force to overwrite.`);
+    }
+    else {
+        writeFileSync(chromePath, DEFAULT_CHROME_CSS, "utf8");
+        console.log(`\x1b[32m[created]\x1b[0m ${chromePath}`);
+    }
+    if (existsSync(contentPath) && !options.force) {
+        console.warn(`\x1b[33m[skip]\x1b[0m ${contentPath} already exists. Use --force to overwrite.`);
+    }
+    else {
+        writeFileSync(contentPath, DEFAULT_CONTENT_CSS, "utf8");
+        console.log(`\x1b[32m[created]\x1b[0m ${contentPath}`);
+    }
+}

package/dist/commands/mcp.js

@@ -0,0 +1,219 @@
+import { readFileSync } from "node:fs";
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { z } from "zod";
+import { firefoxManager } from "../firefox.js";
+import { compileCssString } from "../processor.js";
+/** Creates and starts the Model Context Protocol (MCP) server over standard I/O. */
+export async function startMcpServer(options = {}) {
+    const packageJson = JSON.parse(readFileSync(new URL("../../package.json", import.meta.url), "utf8"));
+    const server = new McpServer({
+        name: packageJson.name,
+        version: packageJson.version,
+    });
+    server.registerTool("launch_browser", {
+        description: "Launch a Firefox instance with chrome debugging capabilities enabled.",
+        inputSchema: {
+            binaryPath: z
+                .string()
+                .optional()
+                .describe("Optional path to Firefox executable binary."),
+            profileName: z
+                .string()
+                .optional()
+                .describe("Optional name of existing Firefox profile. If omitted, uses an isolated temporary profile."),
+            headless: z
+                .boolean()
+                .optional()
+                .describe("Optional flag to run Firefox in headless mode."),
+            novaUi: z
+                .boolean()
+                .optional()
+                .describe("Optional flag to enable Firefox Nova UI preferences."),
+        },
+    }, async (parameters) => {
+        const profileName = parameters.profileName ?? options.profileName;
+        await firefoxManager.initialiseBrowser(parameters.binaryPath ?? options.binaryPath, profileName, parameters.headless ?? options.headless, parameters.novaUi ?? options.novaUi);
+        return {
+            content: [
+                {
+                    type: "text",
+                    text: "Firefox launched successfully in chrome context.",
+                },
+            ],
+        };
+    });
+    server.registerTool("close_browser", { description: "Close the running Firefox instance." }, async () => {
+        await firefoxManager.terminateBrowser();
+        return {
+            content: [
+                { type: "text", text: "Firefox closed successfully." },
+            ],
+        };
+    });
+    server.registerTool("customize_toolbar", {
+        description: "Activate or manage the Firefox Customise Toolbar mode in the browser chrome.",
+        inputSchema: {
+            action: z
+                .enum(["enter", "exit"])
+                .default("enter")
+                .describe("Action to perform on customise toolbar mode ('enter' or 'exit'). Defaults to 'enter'."),
+        },
+    }, async (parameters) => {
+        const result = await firefoxManager.customiseToolbar(parameters.action);
+        return {
+            content: [
+                { type: "text", text: JSON.stringify(result, null, 2) },
+            ],
+        };
+    });
+    server.registerTool("get_ui_tree", {
+        description: "Retrieve the hierarchical DOM tree of the Firefox chrome user interface window.",
+        inputSchema: {
+            rootSelector: z
+                .string()
+                .default("window")
+                .describe("CSS selector for root element."),
+            maxDepth: z
+                .number()
+                .default(3)
+                .describe("Maximum recursive depth to traverse."),
+        },
+    }, async (parameters) => {
+        const treeData = await firefoxManager.getUiTree(parameters.rootSelector, parameters.maxDepth);
+        return {
+            content: [
+                { type: "text", text: JSON.stringify(treeData, null, 2) },
+            ],
+        };
+    });
+    server.registerTool("query_ui_elements", {
+        description: "Find elements in the Firefox UI chrome document matching a CSS selector.",
+        inputSchema: {
+            selector: z
+                .string()
+                .describe("CSS selector to query in chrome document (e.g. '#nav-bar', '#TabsToolbar')."),
+        },
+    }, async (parameters) => {
+        const elements = await firefoxManager.queryElements(parameters.selector);
+        return {
+            content: [
+                { type: "text", text: JSON.stringify(elements, null, 2) },
+            ],
+        };
+    });
+    server.registerTool("get_computed_styles", {
+        description: "Extract computed CSS properties for a Firefox UI chrome element.",
+        inputSchema: {
+            selector: z
+                .string()
+                .describe("CSS selector of the UI element (e.g. '#urlbar-background')."),
+            properties: z
+                .array(z.string())
+                .optional()
+                .describe("Optional list of specific CSS property names."),
+        },
+    }, async (parameters) => {
+        const styles = await firefoxManager.getComputedStyles(parameters.selector, parameters.properties);
+        return {
+            content: [
+                { type: "text", text: JSON.stringify(styles, null, 2) },
+            ],
+        };
+    });
+    server.registerTool("inject_theme_css", {
+        description: "Inject or replace a live stylesheet in the Firefox window.",
+        inputSchema: {
+            css: z.string().describe("CSS rules to inject."),
+            id: z
+                .string()
+                .default("mcp-injected-style")
+                .describe("Identifier for the style."),
+            target: z
+                .enum(["chrome", "content"])
+                .describe("Target scope: chrome for browser UI, or content for web pages."),
+        },
+    }, async (parameters) => {
+        const compiledCss = await compileCssString(parameters.css);
+        const result = parameters.target === "content"
+            ? await firefoxManager.injectContentStyle(compiledCss.css, parameters.id)
+            : await firefoxManager.injectChromeStyle(compiledCss.css, parameters.id);
+        return {
+            content: [
+                { type: "text", text: JSON.stringify(result, null, 2) },
+            ],
+        };
+    });
+    server.registerTool("remove_theme_css", {
+        description: "Remove an injected stylesheet from the Firefox window.",
+        inputSchema: {
+            id: z.string().describe("Identifier of the style to remove."),
+            target: z
+                .enum(["chrome", "content"])
+                .describe("Target scope of the style to remove: chrome or content."),
+        },
+    }, async (parameters) => {
+        const result = parameters.target === "content"
+            ? await firefoxManager.removeContentStyle(parameters.id)
+            : await firefoxManager.removeChromeStyle(parameters.id);
+        return {
+            content: [
+                { type: "text", text: JSON.stringify(result, null, 2) },
+            ],
+        };
+    });
+    server.registerTool("list_theme_css", {
+        description: "List all custom stylesheets currently injected in the Firefox window.",
+        inputSchema: {
+            target: z
+                .enum(["chrome", "content"])
+                .describe("Target scope to list: chrome or content."),
+        },
+    }, async (parameters) => {
+        const result = parameters.target === "content"
+            ? await firefoxManager.listContentStyles()
+            : await firefoxManager.listChromeStyles();
+        return {
+            content: [
+                { type: "text", text: JSON.stringify(result, null, 2) },
+            ],
+        };
+    });
+    server.registerTool("take_ui_screenshot", {
+        description: "Capture a PNG screenshot of the Firefox browser chrome window or a specific UI component.",
+        inputSchema: {
+            selector: z
+                .string()
+                .optional()
+                .describe("Optional CSS selector to screenshot a specific element."),
+        },
+    }, async (parameters) => {
+        const screenshot = await firefoxManager.getScreenshot(parameters.selector);
+        return {
+            content: [
+                {
+                    type: "image",
+                    data: screenshot.base64Image,
+                    mimeType: "image/png",
+                },
+            ],
+        };
+    });
+    server.registerTool("execute_chrome_javascript", {
+        description: "Execute privileged JavaScript code in the Firefox chrome window context.",
+        inputSchema: {
+            script: z
+                .string()
+                .describe("JavaScript code string to evaluate in chrome context."),
+        },
+    }, async (parameters) => {
+        const result = await firefoxManager.executeChromeScript(parameters.script);
+        return {
+            content: [
+                { type: "text", text: JSON.stringify(result, null, 2) },
+            ],
+        };
+    });
+    const transport = new StdioServerTransport();
+    await server.connect(transport);
+}

package/dist/commands/profiles.js

@@ -0,0 +1,17 @@
+import { listFirefoxProfiles } from "../profiles.js";
+/** Executes the 'profiles' CLI command to list all detected Firefox profiles. */
+export async function profilesCommand() {
+    const profiles = listFirefoxProfiles();
+    if (profiles.length === 0) {
+        console.log("No Firefox profiles detected in default configuration directory.");
+        return;
+    }
+    console.log("\nDetected Firefox Profiles:\n");
+    for (const profile of profiles) {
+        const defaultBadge = profile.isDefault
+            ? " \x1b[32m(default)\x1b[0m"
+            : "";
+        console.log(`  \x1b[1m${profile.name}\x1b[0m${defaultBadge}`);
+        console.log(`    \x1b[90m${profile.path}\x1b[0m\n`);
+    }
+}

package/dist/commands/save.js

@@ -0,0 +1,91 @@
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import path from "node:path";
+import readline from "node:readline/promises";
+import { compileCssString } from "../processor.js";
+import { listFirefoxProfiles, resolveProfileDirectoryByName, } from "../profiles.js";
+/**
+ * Saves and compiles theme stylesheets directly into the target Firefox
+ * profile's chrome folder.
+ */
+export async function saveCommand(options = {}) {
+    let profileName = options.profileName;
+    if (!profileName) {
+        const availableProfiles = listFirefoxProfiles();
+        if (availableProfiles.length === 0) {
+            throw new Error("No Firefox profile detected.");
+        }
+        else if (availableProfiles.length === 1) {
+            profileName = availableProfiles[0].name;
+        }
+        else {
+            const profileNames = availableProfiles
+                .map((profile) => profile.name)
+                .join(", ");
+            throw new Error(`Multiple Firefox profiles detected (${profileNames}). Specify target profile with -p, --profile <name>.`);
+        }
+    }
+    const profileDir = resolveProfileDirectoryByName(profileName);
+    const chromeDir = path.join(profileDir, "chrome");
+    if (!existsSync(chromeDir)) {
+        mkdirSync(chromeDir, { recursive: true });
+    }
+    const srcChromePath = options.chromePath
+        ? path.resolve(process.cwd(), options.chromePath)
+        : existsSync(path.resolve(process.cwd(), "userChrome.css"))
+            ? path.resolve(process.cwd(), "userChrome.css")
+            : undefined;
+    const srcContentPath = options.contentPath
+        ? path.resolve(process.cwd(), options.contentPath)
+        : existsSync(path.resolve(process.cwd(), "userContent.css"))
+            ? path.resolve(process.cwd(), "userContent.css")
+            : undefined;
+    if (!srcChromePath && !srcContentPath) {
+        console.warn("No stylesheet files found to save.");
+        return;
+    }
+    const destChromePath = path.join(chromeDir, "userChrome.css");
+    const destContentPath = path.join(chromeDir, "userContent.css");
+    const requiresConfirmation = !options.force &&
+        ((srcChromePath && existsSync(destChromePath)) ||
+            (srcContentPath && existsSync(destContentPath)));
+    if (requiresConfirmation) {
+        const readlineInterface = readline.createInterface({
+            input: process.stdin,
+            output: process.stdout,
+        });
+        const userResponse = await readlineInterface.question(`\x1b[33m[warning]\x1b[0m Existing theme files will be overwritten in profile "${profileName}". Proceed? (y/N) `);
+        readlineInterface.close();
+        if (userResponse.trim().toLowerCase() !== "y") {
+            console.log("Save operation cancelled.");
+            return;
+        }
+    }
+    if (srcChromePath) {
+        const sourceContent = readFileSync(srcChromePath, "utf8");
+        let mergedCss = sourceContent;
+        if (existsSync(destChromePath)) {
+            const existingDestinationContent = readFileSync(destChromePath, "utf8");
+            if (!existingDestinationContent.includes(sourceContent.trim()) &&
+                !sourceContent.includes(existingDestinationContent.trim())) {
+                mergedCss = `${existingDestinationContent}\n\n${sourceContent}`;
+            }
+        }
+        const compiledBundle = await compileCssString(mergedCss, srcChromePath);
+        writeFileSync(destChromePath, compiledBundle.css, "utf8");
+        console.log(`\x1b[32m[saved]\x1b[0m userChrome.css -> ${destChromePath}`);
+    }
+    if (srcContentPath) {
+        const sourceContent = readFileSync(srcContentPath, "utf8");
+        let mergedCss = sourceContent;
+        if (existsSync(destContentPath)) {
+            const existingDestinationContent = readFileSync(destContentPath, "utf8");
+            if (!existingDestinationContent.includes(sourceContent.trim()) &&
+                !sourceContent.includes(existingDestinationContent.trim())) {
+                mergedCss = `${existingDestinationContent}\n\n${sourceContent}`;
+            }
+        }
+        const compiledBundle = await compileCssString(mergedCss, srcContentPath);
+        writeFileSync(destContentPath, compiledBundle.css, "utf8");
+        console.log(`\x1b[32m[saved]\x1b[0m userContent.css -> ${destContentPath}`);
+    }
+}