claude-browser-bridge 4.1.0 → 5.0.0

package/index.js

@@ -317,8 +317,15 @@ Cross-Product Comparison:
 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
+## COMMON BUG PATTERNS (check these before investigating):
+- Stale session: clear with eval({code:"sessionStorage.clear();['session','cache','config'].forEach(p=>{for(let i=localStorage.length-1;i>=0;i--){const k=localStorage.key(i);if(k.includes(p))localStorage.removeItem(k)}})"}) + reload
+- React state unreadable (prod): don't rely on class names. Use get_styles, get_element_rect, eval with data-testid or global store
+- Login expired: get_network shows empty/{} responses → re-authenticate with the platform CLI
+- Visual change not visible: wait 3s for HMR, use inject_css to test live, get_styles to verify computed value
+- Font/asset mismatch: get_grouped_console → look for repeated warnings with API vs resolved values
+
+## ALL 66 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, observe_mode
 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
 Debugging: get_console, get_grouped_console, get_network, search_network_bodies, get_styles, get_cookies, get_storage, get_clipboard, watch_dom_changes, generate_selector
@@ -329,6 +336,8 @@ Testing: visual_diff, inject_css, mock_network, record_actions, replay_actions,
 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
+Visual Debugging: inspect_pixel, get_element_rect, compare_tabs, annotate, clear_annotations, capture_canvas
+Storage: set_storage
 `;
 
 const BATCH_TOOL = {
@@ -1014,10 +1023,45 @@ const TOOLS = [
       },
     },
   },
+  // =================== VIDEO UNDERSTANDING TOOLS ===================
+  {
+    name: "video_get_captions",
+    description: "Extract ALL captions/subtitles from the current YouTube video in one call — returns every line with start/end timestamps. Faster than watching the video. Use on any YouTube tab to get what the instructor is saying.",
+    inputSchema: { type: "object", properties: { ...TAB_ID } },
+  },
+  {
+    name: "video_control",
+    description: "Control video playback: play, pause, seek to a timestamp, change speed, or get current status. Use action='seek' with value=seconds to jump to a specific point. action='speed' with value=2 for 2x playback.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        action: { type: "string", enum: ["play", "pause", "seek", "status", "speed"], description: "What to do with the video" },
+        value: { type: "number", description: "Seek target in seconds, or playback speed multiplier" },
+        ...TAB_ID,
+      },
+      required: ["action"],
+    },
+  },
+  {
+    name: "video_capture_frame",
+    description: "Pause the video at a specific timestamp and screenshot what's on screen — lets Claude 'see' code, slides, diagrams shown in the video. Also returns the caption at that moment. Pass timestamp in seconds.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        timestamp: { type: "number", description: "Time in seconds to capture the frame at (e.g. 120 for 2:00)" },
+        ...TAB_ID,
+      },
+    },
+  },
+  {
+    name: "video_get_chapters",
+    description: "Extract chapter markers from a YouTube video (from the description or progress bar). Returns chapter titles with timestamps — use to navigate a tutorial by topic.",
+    inputSchema: { type: "object", properties: { ...TAB_ID } },
+  },
 ];
 
 const server = new Server(
-  { name: "browser-bridge", version: "4.0.0" },
+  { name: "browser-bridge", version: "5.0.0" },
   { capabilities: { tools: {} } }
 );
 
@@ -1062,6 +1106,17 @@ function formatResult(name, result) {
       ],
     };
   }
+  // Video frame capture: return the screenshot as an image
+  if (name === "video_capture_frame" && result?.dataUrl) {
+    const base64 = result.dataUrl.replace(/^data:image\/png;base64,/, "");
+    const { dataUrl, ...rest } = result;
+    return {
+      content: [
+        { type: "image", data: base64, mimeType: "image/png" },
+        { type: "text", text: JSON.stringify(rest, null, 2) },
+      ],
+    };
+  }
   // Observe mode: if the response includes an auto-captured screenshot, return it as an image
   if (result?.__screenshot) {
     const base64 = result.__screenshot.replace(/^data:image\/png;base64,/, "");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-browser-bridge",
-  "version": "4.1.0",
+  "version": "5.0.0",
   "description": "Connect your live Chrome tabs to Claude Code — 65 tools for debugging, performance, accessibility, visual inspection, and browser automation.",
   "type": "module",
   "bin": {