chromeflow 0.1.31 → 0.1.32

package/CLAUDE.md

@@ -41,8 +41,9 @@ Do NOT ask "should I open the browser?" — just do it. The user expects seamles
    a. Claude acts directly:
         click_element("Save")               — press buttons/links Claude can press
         get_page_text() or wait_for_selector(".success") — ALWAYS confirm after click; click_element returns after 600ms regardless of outcome
-        fill_input("Product name", "Pro")   — fill fields Claude knows the answer to (works on React, CodeMirror, and contenteditable)
-        clear_overlays()                    — call this immediately after fill_input succeeds
+        fill_form([{label, value}, ...])    — fill multiple fields in one call; prefer over repeated fill_input
+        fill_input("Product name", "Pro")   — fill a single field (works on React, CodeMirror, and contenteditable)
+        clear_overlays()                    — call this immediately after fill_input/fill_form succeeds
         scroll_to_element("label text")     — jump directly to a known field; prefer this over scroll_page when the target is known
         scroll_page("down")                 — reveal off-screen content when target location is unknown
    b. Check results with text, not vision:
@@ -51,8 +52,9 @@ Do NOT ask "should I open the browser?" — just do it. The user expects seamles
         execute_script("document.title")    — query DOM state programmatically
    c. When an element can't be found or clicked:
         scroll_page("down") and retry      — always try this first
-        get_elements()                      — get EXACT DOM coords, use these in highlight_region
-        highlight_region(x,y,w,h,msg)       — use exact coords from get_elements
+        get_elements()                      — get EXACT DOM coords when needed
+        highlight_region(selector,msg)      — highlight by CSS selector (preferred; scrolls element into view automatically)
+        highlight_region(x,y,w,h,msg)       — highlight by coords only if no selector available (coords go stale on scroll)
         [absolute last resort] take_screenshot() — only if you genuinely can't identify the element from DOM
    d. Pause for the user when needed:
         find_and_highlight(text, msg)        — show the user what to do
@@ -102,9 +104,14 @@ use `take_and_copy_screenshot()` — it saves a PNG to ~/Downloads and copies it
 - `get_form_fields()` includes `[type=file]` fields even when they are visually hidden behind
   custom drag-and-drop zones. File fields are marked "manual only" — highlight them and ask
   the user to select the file; they cannot be filled programmatically.
-- `fill_input` works on React-controlled inputs, contenteditable (Stripe, Notion), and
-  **CodeMirror 6 editors** — it auto-detects all three. No `execute_script` workaround needed.
-  After filling, `fill_input` reads back the value and warns if React did not accept it.
+- For forms with multiple fields, use `fill_form([{label, value}, ...])` to fill them all
+  in a single call. It returns a per-field success/failure report so you can immediately see
+  which fields weren't found. Use `fill_input` only for a single field.
+- `fill_input` and `fill_form` work on React-controlled inputs, contenteditable (Stripe,
+  Notion), and **CodeMirror 6 editors** — auto-detected. After filling, the value is read
+  back and a warning is shown if React did not accept it.
+- After any radio/checkbox click that reveals new fields, call `get_form_fields()` again —
+  the inventory will include the new fields and warn if more hidden ones still exist.
 - If a form has collapsible sections, expand them all before calling `get_form_fields()` so
   the field list is complete. Use the `[under: "section name"]` context in each field's entry
   to identify fields by section rather than by index — indices shift when sections expand.

package/dist/setup.js

@@ -165,7 +165,9 @@ const CHROMEFLOW_TOOLS = [
   "save_page_state",
   "restore_page_state",
   // v0.1.25+
-  "take_and_copy_screenshot"
+  "take_and_copy_screenshot",
+  // v0.1.32+
+  "fill_form"
 ].map((t) => `mcp__chromeflow__${t}`);
 function patchSettingsLocalJson(cwd) {
   const claudeDir = join(cwd, ".claude");

package/dist/tools/browser.js

@@ -153,9 +153,10 @@ Unlike get_elements, this includes ALL fields (even far below the fold) and is n
     async () => {
       const response = await bridge.request({ type: "get_form_fields" });
       if (response.type !== "form_fields_response") throw new Error("Unexpected response");
-      const fields = response.fields;
+      const r = response;
+      const fields = r.fields;
       if (fields.length === 0) {
-        return { content: [{ type: "text", text: "No form fields found on page." }] };
+        return { content: [{ type: "text", text: "No form fields found on page." + (r.warning ?? "") }] };
       }
       const lines = fields.map((f) => {
         const val = f.value ? ` [currently: "${f.value}"]` : "";
@@ -164,7 +165,7 @@ Unlike get_elements, this includes ALL fields (even far below the fold) and is n
       });
       return {
         content: [{ type: "text", text: `Form fields (${fields.length} total, sorted top-to-bottom):
-${lines.join("\n")}` }]
+${lines.join("\n")}${r.warning ?? ""}` }]
       };
     }
   );

package/dist/tools/flow.js

@@ -104,8 +104,36 @@ Examples: scroll_to_element("#submit-btn"), scroll_to_element("Billing address")
       query: z.string().describe("CSS selector (e.g. '#my-input', '.section-header') or visible text / label to search for")
     },
     async ({ query }) => {
-      await bridge.request({ type: "scroll_to_element", query });
-      return { content: [{ type: "text", text: `Scrolled to element matching "${query}".` }] };
+      const response = await bridge.request({ type: "scroll_to_element", query });
+      const msg = response.message ?? `Scrolled to element matching "${query}".`;
+      return { content: [{ type: "text", text: msg }] };
+    }
+  );
+  server.tool(
+    "fill_form",
+    `Fill multiple form fields in a single call by targeting each field by its label text.
+Use this instead of calling fill_input repeatedly \u2014 it fills all fields in one round trip and returns a per-field success report.
+Ideal for forms with many textareas or inputs where each fill would otherwise require a separate tool call.
+fields is an array of {label, value} pairs. label should match the field's visible label, placeholder, or aria-label.`,
+    {
+      fields: z.array(
+        z.object({
+          label: z.string().describe("Visible label, placeholder, or aria-label of the field"),
+          value: z.string().describe("Value to fill in")
+        })
+      ).describe("List of fields to fill")
+    },
+    async ({ fields }) => {
+      const response = await bridge.request({ type: "fill_form", fields });
+      const r = response;
+      const lines = r.results.map((f) => `${f.success ? "\u2713" : "\u2717"} "${f.label}": ${f.message}`);
+      return {
+        content: [{
+          type: "text",
+          text: `Filled ${r.succeeded}/${r.total} fields:
+${lines.join("\n")}`
+        }]
+      };
     }
   );
   server.tool(

package/dist/tools/highlight.js

@@ -36,12 +36,15 @@ function registerHighlightTools(server, bridge) {
   );
   server.tool(
     "highlight_region",
-    "Highlight a specific pixel region on the page with an instructional callout. Use the exact coordinates returned by get_elements \u2014 do not estimate positions. Only use take_screenshot first if get_elements cannot identify the element.",
+    `Highlight a region on the page with an instructional callout.
+Prefer passing a CSS selector \u2014 the extension will find the element, scroll it into view, and highlight its exact bounds automatically. This is more robust than pixel coordinates, which go stale if the user scrolls.
+Only pass x/y/width/height when you have no selector and already have fresh coordinates from get_elements.`,
     {
-      x: z.number().describe("Left edge of the region in CSS pixels"),
-      y: z.number().describe("Top edge of the region in CSS pixels"),
-      width: z.number().describe("Width of the region in CSS pixels"),
-      height: z.number().describe("Height of the region in CSS pixels"),
+      selector: z.string().optional().describe("CSS selector of the element to highlight (e.g. '#upload-zone', '.drop-area'). Preferred over raw coordinates."),
+      x: z.number().optional().describe("Left edge in CSS pixels \u2014 only needed if no selector"),
+      y: z.number().optional().describe("Top edge in CSS pixels \u2014 only needed if no selector"),
+      width: z.number().optional().describe("Width in CSS pixels \u2014 only needed if no selector"),
+      height: z.number().optional().describe("Height in CSS pixels \u2014 only needed if no selector"),
       message: z.string().describe(
         "Instruction to show the user in the callout. When the user needs to type something, use a short instruction like 'Type this in the field:' and pass the text as valueToType."
       ),
@@ -49,13 +52,13 @@ function registerHighlightTools(server, bridge) {
         `Only use when the user must personally type the value (password, email, personal data). Do NOT use when Claude will auto-fill after the click \u2014 in that case, omit this and use message: "Click here \u2014 I'll fill it in".`
       )
     },
-    async ({ x, y, width, height, message, valueToType }) => {
-      await bridge.request({ type: "highlight_region", x, y, width, height, message, valueToType });
+    async ({ selector, x, y, width, height, message, valueToType }) => {
+      await bridge.request({ type: "highlight_region", selector, x, y, width, height, message, valueToType });
       return {
         content: [
           {
             type: "text",
-            text: `Region highlighted at (${x}, ${y}) ${width}\xD7${height}.`
+            text: selector ? `Highlighted element matching "${selector}".` : `Region highlighted at (${x ?? 0}, ${y ?? 0}) ${width ?? 0}\xD7${height ?? 0}.`
           }
         ]
       };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chromeflow",
-  "version": "0.1.31",
+  "version": "0.1.32",
   "description": "Browser guidance MCP server for Claude Code — highlights, clicks, fills, and captures from the web so you don't have to.",
   "type": "module",
   "bin": {