dembrandt 0.5.1 → 0.6.0

package/README.md

@@ -42,10 +42,35 @@ dembrandt bmw.de --dark-mode       # Extract colors from dark mode variant
 dembrandt bmw.de --mobile          # Use mobile viewport (390x844, iPhone 12/13/14/15) for responsive analysis
 dembrandt bmw.de --slow            # 3x longer timeouts (24s hydration) for JavaScript-heavy sites
 dembrandt bmw.de --no-sandbox      # Disable Chromium sandbox (required for Docker/CI)
+dembrandt bmw.de --browser=firefox # Use Firefox instead of Chromium (better for Cloudflare bypass)
 ```
 
 Default: formatted terminal display only. Use `--save-output` to persist results as JSON files. Browser automatically retries in visible mode if headless extraction fails.
 
+### Browser Selection
+
+By default, dembrandt uses Chromium. If you encounter bot detection or timeouts (especially on sites behind Cloudflare), try Firefox which is often more successful at bypassing these protections:
+
+```bash
+# Use Firefox instead of Chromium
+dembrandt bmw.de --browser=firefox
+
+# Combine with other flags
+dembrandt bmw.de --browser=firefox --save-output --dtcg
+```
+
+**When to use Firefox:**
+- Sites behind Cloudflare or other bot detection systems
+- Timeout issues on heavily protected sites
+- WSL environments where headless Chromium may struggle
+
+**Installation:**
+Firefox browser is installed automatically with `npm install`. If you need to install manually:
+
+```bash
+npx playwright install firefox
+```
+
 ### W3C Design Tokens (DTCG) Format
 
 Use `--dtcg` to export in the standardized [W3C Design Tokens Community Group](https://www.designtokens.org/) format:
@@ -70,7 +95,7 @@ Uses Playwright to render the page, extracts computed styles from the DOM, analy
 
 ### Extraction Process
 
-1. Browser Launch - Launches Chromium with stealth configuration
+1. Browser Launch - Launches browser (Chromium by default, Firefox optional) with stealth configuration
 2. Anti-Detection - Injects scripts to bypass bot detection
 3. Navigation - Navigates to target URL with retry logic
 4. Hydration - Waits for SPAs to fully load (8s initial + 4s stabilization)

package/index.js

@@ -10,7 +10,7 @@
 import { program } from "commander";
 import chalk from "chalk";
 import ora from "ora";
-import { chromium } from "playwright-core";
+import { chromium, firefox } from "playwright-core";
 import { extractBranding } from "./lib/extractors.js";
 import { displayResults } from "./lib/display.js";
 import { toW3CFormat } from "./lib/w3c-exporter.js";
@@ -20,8 +20,9 @@ import { join } from "path";
 program
   .name("dembrandt")
   .description("Extract design tokens from any website")
-  .version("0.5.0")
+  .version("0.6.0")
   .argument("<url>")
+  .option("--browser <type>", "Browser to use (chromium|firefox)", "chromium")
   .option("--json-only", "Output raw JSON")
   .option("--save-output", "Save JSON file to output folder")
   .option("--dtcg", "Export in W3C Design Tokens (DTCG) format")
@@ -43,13 +44,20 @@ program
       let result;
 
       while (true) {
+        // Select browser type based on --browser flag
+        const browserType = opts.browser === 'firefox' ? firefox : chromium;
+
         spinner.text = `Launching browser (${useHeaded ? "visible" : "headless"
           } mode)`;
-        const launchArgs = ["--disable-blink-features=AutomationControlled"];
-        if (opts.noSandbox) {
+        // Firefox-specific launch args (Firefox doesn't support Chromium flags)
+        const launchArgs = opts.browser === 'firefox'
+          ? [] // Firefox has different flags
+          : ["--disable-blink-features=AutomationControlled"];
+
+        if (opts.noSandbox && opts.browser === 'chromium') {
           launchArgs.push("--no-sandbox", "--disable-setuid-sandbox");
         }
-        browser = await chromium.launch({
+        browser = await browserType.launch({
           headless: !useHeaded,
           args: launchArgs,
         });

package/lib/extractors.js

@@ -29,13 +29,19 @@ export async function extractBranding(
   const timeouts = [];
 
   spinner.text = "Creating browser context with stealth mode...";
-  const context = await browser.newContext({
+  const contextOptions = {
     viewport: { width: 1920, height: 1080 },
     userAgent:
       "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36",
     locale: "en-US",
-    permissions: ["clipboard-read", "clipboard-write"],
-  });
+  };
+
+  // Only add clipboard permissions for Chromium (Firefox doesn't support them)
+  if (browser.browserType().name() === 'chromium') {
+    contextOptions.permissions = ["clipboard-read", "clipboard-write"];
+  }
+
+  const context = await browser.newContext(contextOptions);
 
   // Full stealth — kills 99% of Cloudflare bot detection
   spinner.text = "Injecting anti-detection scripts...";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dembrandt",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "Extract design tokens and brand assets from any website",
   "main": "index.js",
   "type": "module",
@@ -15,7 +15,7 @@
     "start": "node index.js",
     "brand-challenge": "node run-no-login-challenge.mjs",
     "brand-challenge:report": "node run-no-login-challenge.mjs || true",
-    "install-browser": "npx playwright install chromium || echo 'Playwright browser installation failed. You may need to install system dependencies manually.'"
+    "install-browser": "npx playwright install chromium firefox || echo 'Playwright browser installation failed. You may need to install system dependencies manually.'"
   },
   "keywords": [
     "design-tokens",
@@ -38,6 +38,7 @@
   "license": "MIT",
   "dependencies": {
     "@playwright/browser-chromium": "^1.57.0",
+    "@playwright/browser-firefox": "^1.57.0",
     "chalk": "^5.3.0",
     "commander": "^11.1.0",
     "ora": "^7.0.1",