claude-browser-bridge 4.0.0 → 4.0.2

package/bin/cli.js

@@ -44,14 +44,25 @@ Docs: https://github.com/HimanshuKanwar2001/claude-browser-bridge
 `);
 }
 
-function init() {
+async function init() {
   const extPath = args[args.indexOf("init") + 1] || null;
-  const tokenPath = join(SERVER_DIR, ".bridge-token");
   const token = randomBytes(24).toString("hex");
-
-  // Write server token
-  writeFileSync(tokenPath, token + "\n");
-  console.log(`✓ Token written to ${tokenPath}`);
+  const os = await import("node:os");
+  const home = os.homedir();
+
+  // Write to canonical path: ~/.claude/browser-bridge-token
+  const claudeDir = join(home, ".claude");
+  if (!existsSync(claudeDir)) mkdirSync(claudeDir, { recursive: true });
+  const canonicalPath = join(home, ".claude", "browser-bridge-token");
+  writeFileSync(canonicalPath, token + "\n");
+  console.log(`✓ Token written to ${canonicalPath}`);
+
+  // Also write to server/.bridge-token (legacy fallback)
+  try {
+    const legacyPath = join(SERVER_DIR, ".bridge-token");
+    writeFileSync(legacyPath, token + "\n");
+    console.log(`✓ Token written to ${legacyPath}`);
+  } catch {}
 
   // Write extension config if we can find the extension directory
   const searchPaths = [

package/gen-token.js

@@ -1,13 +1,51 @@
-// Generates the shared secret used to authenticate the extension to the
-// bridge: writes server/.bridge-token and extension/config.js.
+// Generates the shared secret used to authenticate the extension to the bridge.
+// Writes to THREE locations so the token works regardless of install method:
+//   1. ~/.claude/browser-bridge-token  (canonical — works with global npm install)
+//   2. server/.bridge-token            (legacy — works with cloned repo)
+//   3. extension/config.js             (embedded in the Chrome extension)
+
 import { randomBytes } from "node:crypto";
-import { writeFileSync } from "node:fs";
+import { writeFileSync, mkdirSync, existsSync } from "node:fs";
+import { join } from "node:path";
+import { homedir } from "node:os";
+import { fileURLToPath } from "node:url";
 
 const token = randomBytes(24).toString("hex");
-writeFileSync(new URL("./.bridge-token", import.meta.url), token + "\n");
-writeFileSync(
-  new URL("../extension/config.js", import.meta.url),
-  `// Generated by server/gen-token.js — keep out of version control.\nconst BRIDGE_TOKEN = ${JSON.stringify(token)};\n`
-);
-console.log("Wrote server/.bridge-token and extension/config.js");
-console.log("Reload the extension in chrome://extensions to pick up the new token.");
+
+// 1. Write to ~/.claude/browser-bridge-token (canonical path)
+const claudeDir = join(homedir(), ".claude");
+if (!existsSync(claudeDir)) mkdirSync(claudeDir, { recursive: true });
+const canonicalPath = join(claudeDir, "browser-bridge-token");
+writeFileSync(canonicalPath, token + "\n");
+console.log(`✓ Token written to ${canonicalPath}`);
+
+// 2. Write to server/.bridge-token (legacy, for local repo use)
+try {
+  writeFileSync(new URL("./.bridge-token", import.meta.url), token + "\n");
+  console.log("✓ Token written to server/.bridge-token");
+} catch {
+  // May fail if running from global install (read-only node_modules)
+}
+
+// 3. Write extension/config.js (search multiple locations)
+const searchPaths = [
+  new URL("../extension/config.js", import.meta.url).pathname,
+  join(process.cwd(), "extension", "config.js"),
+];
+let extensionWritten = false;
+for (const p of searchPaths) {
+  try {
+    if (existsSync(join(p, "..", "manifest.json"))) {
+      writeFileSync(p, `// Generated by gen-token.js — keep out of version control.\nconst BRIDGE_TOKEN = ${JSON.stringify(token)};\n`);
+      console.log(`✓ Extension config written to ${p}`);
+      extensionWritten = true;
+      break;
+    }
+  } catch {}
+}
+if (!extensionWritten) {
+  console.log(`⚠ Extension directory not found — create extension/config.js manually:`);
+  console.log(`  const BRIDGE_TOKEN = "${token}";`);
+}
+
+console.log("\n✓ Token generated. Reload the extension in chrome://extensions to apply.");

package/index.js

@@ -6,7 +6,9 @@
 // "owns" the bridge; later sessions detect EADDRINUSE and relay their tool
 // calls through the owner. If the owner exits, a relay takes over the port.
 
-import { readFileSync } from "node:fs";
+import { readFileSync, existsSync } from "node:fs";
+import { join } from "node:path";
+import { homedir } from "node:os";
 import { Server } from "@modelcontextprotocol/sdk/server/index.js";
 import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
 import {
@@ -17,20 +19,32 @@ import WebSocket, { WebSocketServer } from "ws";
 
 const PORT = Number(process.env.BRIDGE_PORT) || 8787;
 
-// F2 FIX: Re-read token on every auth attempt so `init` token regeneration
-// takes effect without restarting the server.
-const TOKEN_PATH = new URL("./.bridge-token", import.meta.url);
+// Token resolution: check multiple locations so it works whether the server
+// runs from a global npm install, npx, or the cloned repo.
+const TOKEN_LOCATIONS = [
+  process.env.BRIDGE_TOKEN_PATH,                              // explicit override
+  join(homedir(), ".claude", "browser-bridge-token"),          // canonical home path
+  new URL("./.bridge-token", import.meta.url).pathname,       // relative to server file (repo install)
+  join(process.cwd(), "server", ".bridge-token"),              // cwd/server/ (cloned repo)
+  join(process.cwd(), ".bridge-token"),                        // cwd root
+].filter(Boolean);
+
 function readToken() {
-  try {
-    return readFileSync(TOKEN_PATH, "utf8").trim();
-  } catch {
-    return null;
+  // Also check env var directly
+  if (process.env.BRIDGE_TOKEN) return process.env.BRIDGE_TOKEN;
+  for (const p of TOKEN_LOCATIONS) {
+    try {
+      const t = readFileSync(p, "utf8").trim();
+      if (t) return t;
+    } catch {}
   }
+  return null;
 }
 if (!readToken()) {
   console.error(
-    "[bridge] WARNING: server/.bridge-token is missing — run `claude-browser-bridge init` " +
-      "or `node gen-token.js`. Refusing all extension connections until then."
+    "[bridge] WARNING: auth token not found. Run `claude-browser-bridge init` " +
+      "or `node gen-token.js`. Searched:\n" +
+      TOKEN_LOCATIONS.map(p => "  - " + p).join("\n")
   );
 }
 
@@ -220,15 +234,17 @@ establish();
 const HELP_TOOL = {
   name: "browser_bridge_help",
   description:
-    "Returns the complete usage guide for all 57 browser-bridge tools. Call this ONCE at the start of any session where you need to use browser tools, to learn the optimal workflows and avoid slow anti-patterns.",
+    "Returns the complete usage guide for all 65 browser-bridge tools. Call this ONCE at the start of any session where you need to use browser tools, to learn the optimal workflows and avoid slow anti-patterns.",
   inputSchema: { type: "object", properties: {} },
 };
 
-const HELP_TEXT = `# Claude Browser Bridge — 58 Tools
+const HELP_TEXT = `# Claude Browser Bridge — 65 Tools
 
 ## WHICH TOOL FIRST? (decision tree)
 - Investigating a bug → diagnose (gives snapshot + errors + network + API responses in ONE call)
 - Fixing CSS/visual → batch([screenshot, get_styles({selector:".target"}), get_html({selector:".target"})])
+- Debugging image layers/z-index → batch([get_element_rect({selector:".container", include_children:true}), annotate({annotations:[...]})])
+- Checking pixel colors on images → inspect_pixel({selector:"img", x:50, y:50, percent:true})
 - Performance check → batch([performance_trace, get_load_timeline, heap_snapshot_summary])
 - Accessibility audit → batch([get_accessibility_tree, check_contrast({selector:".text"})])
 - Reading page content → eval (specific data) or get_page_text (all text)
@@ -274,7 +290,19 @@ Regression Testing:
 Before/After Comparison:
   screenshot (save dataUrl) → make changes → visual_diff({before_dataUrl:"..."})
 
-## ALL 58 TOOLS BY CATEGORY:
+Image/Layer Debugging:
+  annotate({annotations:[{selector:".base",label:"Base",color:"red"},{selector:".overlay",label:"Overlay",color:"blue"}]}) → screenshot → clear_annotations
+  inspect_pixel({selector:".garment-img", x:50, y:30, percent:true}) → check if transparent or opaque
+  get_element_rect({selector:".container", include_children:true}) → see all child positions + z-indexes
+  capture_canvas({selector:".composer"}) → flatten all stacked images into one PNG
+
+Cross-Product Comparison:
+  new_tab({url:"product-A"}) → new_tab({url:"product-B"}) → compare_tabs({tab_id_1:A, tab_id_2:B})
+
+State Management Testing:
+  set_storage({key:"cache", action:"remove"}) → reload → verify fresh state
+
+## ALL 65 TOOLS BY CATEGORY:
 Core: diagnose, batch, select_tab, snapshot, eval, screenshot, full_page_screenshot, get_page_text, get_html, get_page_info, browser_bridge_help
 Interaction: click, fill, hover, scroll, press_key, select_option, upload_file, highlight_element
 Navigation: navigate, new_tab, close_tab, go_back, go_forward, reload, list_tabs, wait_for
@@ -284,6 +312,8 @@ Accessibility: get_accessibility_tree, check_contrast
 Emulation: emulate_device, network_throttle, set_geolocation, toggle_dark_mode
 Testing: visual_diff, inject_css, mock_network, record_actions, replay_actions, handle_dialog
 Productivity: save_form_profile, load_form_profile, save_tab_session, restore_tab_session, edit_cookie, export_pdf
+Visual Debugging: inspect_pixel, get_element_rect, compare_tabs, annotate, clear_annotations, capture_canvas
+Storage: set_storage
 `;
 
 const BATCH_TOOL = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "claude-browser-bridge",
-  "version": "4.0.0",
-  "description": "Connect your live Chrome tabs to Claude Code — 57 tools for debugging, performance, accessibility, device emulation, and browser automation.",
+  "version": "4.0.2",
+  "description": "Connect your live Chrome tabs to Claude Code — 65 tools for debugging, performance, accessibility, visual inspection, and browser automation.",
   "type": "module",
   "bin": {
     "claude-browser-bridge": "./bin/cli.js"