browser-cdp 0.2.0 → 0.3.0

package/README.md

@@ -1,6 +1,6 @@
 # browser-cdp
 
-Browser automation via Chrome DevTools Protocol. Control Chrome, Brave, Comet, or Edge using your real browser - same fingerprint, real cookies, no automation detection.
+Browser automation via Chrome DevTools Protocol. Control Chrome, Brave, or Edge using your real browser - same fingerprint, real cookies, no automation detection.
 
 ## Install
 
@@ -25,6 +25,12 @@ browser-cdp screenshot
 
 # Interactive element picker
 browser-cdp pick '<message>'
+
+# Stream browser console output
+browser-cdp console [--duration=SECONDS]
+
+# Show page performance metrics
+browser-cdp insights [--json]
 ```
 
 ## Environment Variables
@@ -32,7 +38,7 @@ browser-cdp pick '<message>'
 | Variable | Description | Default |
 |----------|-------------|---------|
 | `DEBUG_PORT` | CDP debugging port | `9222` |
-| `BROWSER` | Browser to use (chrome, brave, comet, edge) | `chrome` |
+| `BROWSER` | Browser to use (chrome, brave, edge) | `chrome` |
 | `BROWSER_PATH` | Custom browser executable path | (auto-detect) |
 
 ## Examples
@@ -54,6 +60,16 @@ browser-cdp screenshot
 
 # Pick elements interactively
 browser-cdp pick "Select the login button"
+
+# Stream console output for 10 seconds
+browser-cdp console --duration=10
+
+# Get page performance insights
+browser-cdp insights
+# Returns: TTFB, First Paint, FCP, DOM loaded, resources, memory
+
+# Get insights as JSON
+browser-cdp insights --json
 ```
 
 ## Pre-started Browser
@@ -78,7 +94,6 @@ browser-cdp nav https://example.com
 |---------|---------|
 | Chrome | `chrome` (default) |
 | Brave | `brave` |
-| Comet | `comet` |
 | Edge | `edge` |
 
 ## Platform Support

package/cli.js

@@ -1,5 +1,12 @@
 #!/usr/bin/env node
 
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { dirname, join } from "node:path";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const pkg = JSON.parse(readFileSync(join(__dirname, "package.json"), "utf8"));
+
 const command = process.argv[2];
 const args = process.argv.slice(3);
 
@@ -9,10 +16,12 @@ const commands = {
   eval: "./eval.js",
   screenshot: "./screenshot.js",
   pick: "./pick.js",
+  console: "./console.js",
+  insights: "./insights.js",
 };
 
 function printUsage() {
-  console.log("browser-cdp - Browser automation via Chrome DevTools Protocol");
+  console.log(`browser-cdp v${pkg.version} - Browser automation via Chrome DevTools Protocol`);
   console.log("");
   console.log("Usage: browser-cdp <command> [options]");
   console.log("");
@@ -22,17 +31,25 @@ function printUsage() {
   console.log("  eval '<code>'       Evaluate JavaScript in page");
   console.log("  screenshot          Take screenshot of current page");
   console.log("  pick '<message>'    Interactive element picker");
+  console.log("  console             Stream browser console output");
+  console.log("  insights            Show page performance metrics");
   console.log("");
   console.log("Environment:");
   console.log("  DEBUG_PORT          CDP port (default: 9222)");
-  console.log("  BROWSER             Browser to use (chrome, brave, comet, edge)");
+  console.log("  BROWSER             Browser to use (chrome, brave, edge)");
   console.log("  BROWSER_PATH        Custom browser executable path");
   console.log("");
   console.log("Examples:");
   console.log("  browser-cdp start brave");
   console.log("  browser-cdp nav https://google.com");
   console.log("  browser-cdp eval 'document.title'");
-  console.log("  browser-cdp screenshot");
+  console.log("  browser-cdp console --duration=10");
+  console.log("  browser-cdp insights --json");
+  process.exit(0);
+}
+
+if (command === "--version" || command === "-v") {
+  console.log(pkg.version);
   process.exit(0);
 }
 

package/console.js

@@ -0,0 +1,77 @@
+#!/usr/bin/env node
+
+import { chromium } from "playwright";
+
+const DEFAULT_PORT = process.env.DEBUG_PORT || 9222;
+
+const args = process.argv.slice(2);
+const duration = args.find((a) => a.startsWith("--duration="));
+const durationMs = duration ? parseInt(duration.split("=")[1]) * 1000 : null;
+const showHelp = args.includes("--help") || args.includes("-h");
+
+if (showHelp) {
+  console.log("Usage: console.js [--duration=SECONDS]");
+  console.log("\nCapture browser console output in real-time.");
+  console.log("\nOptions:");
+  console.log("  --duration=N  Stop after N seconds (default: run until Ctrl+C)");
+  console.log("\nExamples:");
+  console.log("  console.js              # Stream console logs until Ctrl+C");
+  console.log("  console.js --duration=5 # Capture for 5 seconds");
+  process.exit(0);
+}
+
+const browser = await chromium.connectOverCDP(`http://localhost:${DEFAULT_PORT}`);
+const contexts = browser.contexts();
+const context = contexts[0];
+
+if (!context) {
+  console.error("No browser context found");
+  process.exit(1);
+}
+
+const pages = context.pages();
+const page = pages[pages.length - 1];
+
+if (!page) {
+  console.error("No active tab found");
+  process.exit(1);
+}
+
+const formatTime = () => new Date().toISOString().split("T")[1].slice(0, 12);
+
+const typeColors = {
+  log: "\x1b[0m",      // default
+  info: "\x1b[36m",    // cyan
+  warn: "\x1b[33m",    // yellow
+  error: "\x1b[31m",   // red
+  debug: "\x1b[90m",   // gray
+};
+const reset = "\x1b[0m";
+
+page.on("console", (msg) => {
+  const type = msg.type();
+  const color = typeColors[type] || typeColors.log;
+  const text = msg.text();
+  console.log(`${color}[${formatTime()}] [${type.toUpperCase()}] ${text}${reset}`);
+});
+
+page.on("pageerror", (error) => {
+  console.log(`\x1b[31m[${formatTime()}] [PAGE ERROR] ${error.message}${reset}`);
+});
+
+console.error(`Listening for console output... (Ctrl+C to stop)`);
+
+if (durationMs) {
+  await new Promise((r) => setTimeout(r, durationMs));
+  await browser.close();
+} else {
+  // Keep running until interrupted
+  process.on("SIGINT", async () => {
+    console.error("\nStopping...");
+    await browser.close();
+    process.exit(0);
+  });
+
+  // Keep the process alive
+  await new Promise(() => {});
+}

package/insights.js

@@ -0,0 +1,133 @@
+#!/usr/bin/env node
+
+import { chromium } from "playwright";
+
+const DEFAULT_PORT = process.env.DEBUG_PORT || 9222;
+
+const args = process.argv.slice(2);
+const showHelp = args.includes("--help") || args.includes("-h");
+const jsonOutput = args.includes("--json");
+
+if (showHelp) {
+  console.log("Usage: insights.js [--json]");
+  console.log("\nCollect page performance insights and Web Vitals.");
+  console.log("\nOptions:");
+  console.log("  --json    Output as JSON");
+  console.log("\nMetrics collected:");
+  console.log("  - Page load timing (DOM, load, first paint)");
+  console.log("  - Web Vitals (LCP, FID, CLS, FCP, TTFB)");
+  console.log("  - Resource counts and sizes");
+  console.log("  - JavaScript heap usage");
+  process.exit(0);
+}
+
+const browser = await chromium.connectOverCDP(`http://localhost:${DEFAULT_PORT}`);
+const contexts = browser.contexts();
+const context = contexts[0];
+
+if (!context) {
+  console.error("No browser context found");
+  process.exit(1);
+}
+
+const pages = context.pages();
+const page = pages[pages.length - 1];
+
+if (!page) {
+  console.error("No active tab found");
+  process.exit(1);
+}
+
+// Collect performance metrics
+const metrics = await page.evaluate(() => {
+  const perf = performance;
+  const timing = perf.timing || {};
+  const navigation = perf.getEntriesByType("navigation")[0] || {};
+  const paint = perf.getEntriesByType("paint") || [];
+  const resources = perf.getEntriesByType("resource") || [];
+
+  // Calculate timing metrics
+  const navStart = timing.navigationStart || navigation.startTime || 0;
+  const domContentLoaded = (timing.domContentLoadedEventEnd || navigation.domContentLoadedEventEnd || 0) - navStart;
+  const loadComplete = (timing.loadEventEnd || navigation.loadEventEnd || 0) - navStart;
+  const firstPaint = paint.find((p) => p.name === "first-paint")?.startTime || 0;
+  const firstContentfulPaint = paint.find((p) => p.name === "first-contentful-paint")?.startTime || 0;
+  const ttfb = (timing.responseStart || navigation.responseStart || 0) - navStart;
+
+  // Resource breakdown
+  const resourceStats = resources.reduce(
+    (acc, r) => {
+      acc.count++;
+      acc.totalSize += r.transferSize || 0;
+      const type = r.initiatorType || "other";
+      acc.byType[type] = (acc.byType[type] || 0) + 1;
+      return acc;
+    },
+    { count: 0, totalSize: 0, byType: {} }
+  );
+
+  // Try to get LCP (requires PerformanceObserver to have recorded it)
+  let lcp = null;
+  try {
+    const lcpEntries = perf.getEntriesByType("largest-contentful-paint");
+    if (lcpEntries.length > 0) {
+      lcp = lcpEntries[lcpEntries.length - 1].startTime;
+    }
+  } catch (e) {}
+
+  // Memory info (Chrome only)
+  let memory = null;
+  if (perf.memory) {
+    memory = {
+      usedJSHeapSize: Math.round(perf.memory.usedJSHeapSize / 1024 / 1024),
+      totalJSHeapSize: Math.round(perf.memory.totalJSHeapSize / 1024 / 1024),
+    };
+  }
+
+  return {
+    url: location.href,
+    timing: {
+      ttfb: Math.round(ttfb),
+      firstPaint: Math.round(firstPaint),
+      firstContentfulPaint: Math.round(firstContentfulPaint),
+      domContentLoaded: Math.round(domContentLoaded),
+      loadComplete: Math.round(loadComplete),
+      lcp: lcp ? Math.round(lcp) : null,
+    },
+    resources: {
+      count: resourceStats.count,
+      totalSizeKB: Math.round(resourceStats.totalSize / 1024),
+      byType: resourceStats.byType,
+    },
+    memory,
+  };
+});
+
+if (jsonOutput) {
+  console.log(JSON.stringify(metrics, null, 2));
+} else {
+  console.log(`Page Insights: ${metrics.url}\n`);
+
+  console.log("Timing:");
+  console.log(`  TTFB:                  ${metrics.timing.ttfb}ms`);
+  console.log(`  First Paint:           ${metrics.timing.firstPaint}ms`);
+  console.log(`  First Contentful Paint: ${metrics.timing.firstContentfulPaint}ms`);
+  console.log(`  DOM Content Loaded:    ${metrics.timing.domContentLoaded}ms`);
+  console.log(`  Load Complete:         ${metrics.timing.loadComplete}ms`);
+  if (metrics.timing.lcp) {
+    console.log(`  Largest Contentful Paint: ${metrics.timing.lcp}ms`);
+  }
+
+  console.log("\nResources:");
+  console.log(`  Total:     ${metrics.resources.count} requests`);
+  console.log(`  Size:      ${metrics.resources.totalSizeKB} KB`);
+  console.log(`  Breakdown: ${Object.entries(metrics.resources.byType).map(([k, v]) => `${k}(${v})`).join(", ")}`);
+
+  if (metrics.memory) {
+    console.log("\nMemory:");
+    console.log(`  JS Heap Used:  ${metrics.memory.usedJSHeapSize} MB`);
+    console.log(`  JS Heap Total: ${metrics.memory.totalJSHeapSize} MB`);
+  }
+}
+
+await browser.close();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "browser-cdp",
-  "version": "0.2.0",
-  "description": "Browser automation via Chrome DevTools Protocol - control Chrome, Brave, Comet, Edge with real browser profiles",
+  "version": "0.3.0",
+  "description": "Browser automation via Chrome DevTools Protocol - control Chrome, Brave, Edge with real browser profiles",
   "type": "module",
   "bin": {
     "browser-cdp": "./cli.js"
@@ -16,6 +16,8 @@
     "eval.js",
     "screenshot.js",
     "pick.js",
+    "console.js",
+    "insights.js",
     "README.md",
     "LICENSE"
   ],

package/start.js

@@ -30,12 +30,6 @@ const BROWSERS = {
       ? `${process.env.HOME}/Library/Application Support/BraveSoftware/Brave-Browser/`
       : `${process.env.HOME}/.config/BraveSoftware/Brave-Browser/`,
   },
-  comet: {
-    name: "Comet",
-    path: isMac ? "/Applications/Comet.app/Contents/MacOS/Comet" : "/usr/bin/comet",
-    process: "Comet",
-    profileSource: null,
-  },
   edge: {
     name: "Microsoft Edge",
     path: isMac
@@ -55,19 +49,18 @@ function printUsage() {
   console.log("\nBrowsers:");
   console.log("  chrome  - Google Chrome (default)");
   console.log("  brave   - Brave Browser");
-  console.log("  comet   - Comet Browser");
   console.log("  edge    - Microsoft Edge");
   console.log("\nOptions:");
   console.log("  --isolated  Use isolated profile (default: real profile)");
   console.log("  --port=N    Use custom debugging port (default: 9222)");
   console.log("\nEnvironment variables:");
-  console.log("  BROWSER       Default browser (chrome, brave, comet, edge)");
+  console.log("  BROWSER       Default browser (chrome, brave, edge)");
   console.log("  BROWSER_PATH  Custom browser executable path");
   console.log("  DEBUG_PORT    Custom debugging port");
   console.log("\nExamples:");
   console.log("  start.js                    # Start Chrome with real profile");
   console.log("  start.js brave              # Start Brave with real profile");
-  console.log("  start.js comet --isolated   # Start Comet with isolated profile");
+  console.log("  start.js edge --isolated    # Start Edge with isolated profile");
   console.log("  start.js --port=9333        # Start Chrome on port 9333");
   process.exit(1);
 }
@@ -137,6 +130,30 @@ try {
   }
 }
 
+// Check if browser is already running without CDP (only matters for real profile)
+if (!isolated && browserConfig.process) {
+  try {
+    const pgrepArgs = isMac
+      ? ["-x", browserConfig.process]
+      : ["-f", browserConfig.path];
+    const result = execFileSync("pgrep", pgrepArgs, { encoding: "utf8" }).trim();
+    if (result) {
+      console.error(`Error: ${browserConfig.name} is already running without CDP enabled.`);
+      console.error("");
+      console.error("When a browser is already open, launching it again just opens a new");
+      console.error("window in the existing process - the CDP flag is ignored.");
+      console.error("");
+      console.error("Options:");
+      console.error(`  1. Quit ${browserConfig.name} and run this command again`);
+      console.error(`  2. Use --isolated flag: browser-cdp start ${browserName} --isolated`);
+      console.error("     (creates separate instance, but without your cookies/logins)");
+      process.exit(1);
+    }
+  } catch {
+    // pgrep returns non-zero if no match - browser not running, proceed
+  }
+}
+
 // Build browser arguments
 const browserArgs = [`--remote-debugging-port=${port}`];