@vercel/next-browser 0.4.1 → 0.5.1

package/dist/browser.js

@@ -10,7 +10,7 @@
  *
  * Module-level state: one browser context, one page, one PPR lock.
  */
-import { readFileSync, mkdirSync, writeFileSync } from "node:fs";
+import { readFileSync, mkdirSync, writeFileSync, unlinkSync } from "node:fs";
 import { join, resolve } from "node:path";
 import { tmpdir } from "node:os";
 import { chromium } from "playwright";
@@ -568,21 +568,99 @@ async function refreshScreenshotLog() {
 function escapeHtml(s) {
     return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
+/** Max screenshot dimension in pixels — keeps images under the 2000px limit
+ *  that multi-image LLM requests impose. */
+const SCREENSHOT_MAX_DIM = 1280;
 /** Screenshot saved to a temp file. Opens the Screenshot Log window in headed mode.
- *  Returns the file path. */
+ *  Returns the file path for a single image, or a directory path when the
+ *  image is sliced into multiple chunks (full-page on long pages). */
 export async function screenshot(opts) {
     if (!page)
         throw new Error("browser not open");
     await hideDevOverlay();
-    const { join } = await import("node:path");
-    const { tmpdir } = await import("node:os");
     const path = join(tmpdir(), `next-browser-${Date.now()}.png`);
-    await page.screenshot({ path, fullPage: opts?.fullPage });
-    const imgData = readFileSync(path).toString("base64");
+    // scale: 'css' prevents Retina 2x doubling (1440x900 stays 1440x900).
+    await page.screenshot({ path, fullPage: opts?.fullPage, scale: "css" });
+    const result = await sliceIfNeeded(path, SCREENSHOT_MAX_DIM);
     const timestamp = new Date().toLocaleTimeString();
-    screenshotEntries.unshift({ caption: opts?.caption, imgData, timestamp });
+    if (typeof result === "string") {
+        // Single file — fits within limits.
+        const imgData = readFileSync(result).toString("base64");
+        screenshotEntries.unshift({ caption: opts?.caption, imgData, timestamp });
+    }
+    else {
+        // Multiple chunks — add each to the screenshot log.
+        for (const chunk of result.files) {
+            const imgData = readFileSync(chunk).toString("base64");
+            const label = opts?.caption
+                ? `${opts.caption} (${result.files.indexOf(chunk) + 1}/${result.files.length})`
+                : `chunk ${result.files.indexOf(chunk) + 1}/${result.files.length}`;
+            screenshotEntries.unshift({ caption: label, imgData, timestamp });
+        }
+    }
     await refreshScreenshotLog();
-    return path;
+    return typeof result === "string" ? result : result.dir;
+}
+/** If the screenshot fits within `maxDim`, scale it in-place and return the
+ *  path. Otherwise slice it into ≤maxDim chunks inside a temp directory and
+ *  return `{ dir, files }`. */
+async function sliceIfNeeded(filePath, maxDim) {
+    const buf = readFileSync(filePath);
+    if (buf.length < 24)
+        return filePath;
+    const w = buf.readUInt32BE(16);
+    const h = buf.readUInt32BE(20);
+    if (w <= maxDim && h <= maxDim)
+        return filePath;
+    if (!page)
+        return filePath;
+    const b64 = buf.toString("base64");
+    const wScale = Math.min(maxDim / w, 1);
+    const scaledW = Math.round(w * wScale);
+    const scaledH = Math.round(h * wScale);
+    if (scaledH <= maxDim) {
+        // Fits after width scaling — single resized file.
+        const resized = await page.evaluate(async ({ src, nw, nh }) => {
+            const img = new Image();
+            await new Promise((r, e) => { img.onload = () => r(); img.onerror = () => e(); img.src = `data:image/png;base64,${src}`; });
+            const c = document.createElement("canvas");
+            c.width = nw;
+            c.height = nh;
+            c.getContext("2d").drawImage(img, 0, 0, nw, nh);
+            return c.toDataURL("image/png").split(",")[1];
+        }, { src: b64, nw: scaledW, nh: scaledH });
+        writeFileSync(filePath, Buffer.from(resized, "base64"));
+        return filePath;
+    }
+    // Slice into chunks of maxDim height (in scaled pixels).
+    const chunkCount = Math.ceil(scaledH / maxDim);
+    const chunks = await page.evaluate(async ({ src, nw, totalH, max, count }) => {
+        const img = new Image();
+        await new Promise((r, e) => { img.onload = () => r(); img.onerror = () => e(); img.src = `data:image/png;base64,${src}`; });
+        const results = [];
+        for (let i = 0; i < count; i++) {
+            const sy = (i * max) / (totalH / img.height);
+            const sh = Math.min(max, totalH - i * max) / (totalH / img.height);
+            const dh = Math.min(max, totalH - i * max);
+            const c = document.createElement("canvas");
+            c.width = nw;
+            c.height = dh;
+            c.getContext("2d").drawImage(img, 0, sy, img.width, sh, 0, 0, nw, dh);
+            results.push(c.toDataURL("image/png").split(",")[1]);
+        }
+        return results;
+    }, { src: b64, nw: scaledW, totalH: scaledH, max: maxDim, count: chunkCount });
+    const dir = join(tmpdir(), `next-browser-screenshots-${Date.now()}`);
+    mkdirSync(dir, { recursive: true });
+    const files = [];
+    for (let i = 0; i < chunks.length; i++) {
+        const p = join(dir, `${String(i + 1).padStart(3, "0")}.png`);
+        writeFileSync(p, Buffer.from(chunks[i], "base64"));
+        files.push(p);
+    }
+    // Clean up the original full file.
+    unlinkSync(filePath);
+    return { dir, files };
 }
 /** Remove Next.js devtools overlay from the page before screenshots. */
 async function hideDevOverlay() {

package/dist/cli.js

@@ -3,6 +3,7 @@ import { readFileSync, writeFileSync } from "node:fs";
 import { tmpdir } from "node:os";
 import { join } from "node:path";
 import { send } from "./client.js";
+import { parseCookies } from "./cookies.js";
 const args = process.argv.slice(2);
 const cmd = args[0];
 const arg = args[1];
@@ -17,18 +18,29 @@ if (cmd === "--version" || cmd === "-v") {
 }
 if (cmd === "open") {
     if (!arg) {
-        console.error("usage: next-browser open <url> [--cookies-json <file>]");
+        console.error("usage: next-browser open <url> [--cookies <file>]");
         process.exit(1);
     }
     const url = /^https?:\/\//.test(arg) ? arg : `http://${arg}`;
-    const cookieIdx = args.indexOf("--cookies-json");
+    const cookieIdx = (() => {
+        const i = args.indexOf("--cookies");
+        if (i >= 0)
+            return i;
+        return args.indexOf("--cookies-json"); // back-compat alias
+    })();
     const cookieFile = cookieIdx >= 0 ? args[cookieIdx + 1] : undefined;
     if (cookieFile) {
         const res = await send("open");
         if (!res.ok)
             exit(res, "");
-        const raw = readFileSync(cookieFile, "utf-8");
-        const cookies = JSON.parse(raw);
+        let cookies;
+        try {
+            cookies = parseCookies(readFileSync(cookieFile, "utf-8"));
+        }
+        catch (e) {
+            console.error(`cookies: ${e.message}`);
+            process.exit(1);
+        }
         const domain = new URL(url).hostname;
         const cRes = await send("cookies", { cookies, domain });
         if (!cRes.ok)
@@ -428,7 +440,7 @@ function pick(items) {
 function printUsage() {
     console.error("usage: next-browser <command> [args]\n" +
         "\n" +
-        "  open <url> [--cookies-json <file>]  launch browser and navigate\n" +
+        "  open <url> [--cookies <file>]  launch browser and navigate\n" +
         "  close              close browser and daemon\n" +
         "\n" +
         "  goto <url>         full-page navigation (new document load)\n" +

package/dist/cookies.js

@@ -0,0 +1,63 @@
+/**
+ * Parse cookie input in one of three formats, auto-detected from the first
+ * non-whitespace character:
+ *
+ *   1. JSON array — Playwright-style `[{"name": "x", "value": "y"}, ...]`.
+ *   2. cURL command — as produced by DevTools → Network → Copy as cURL.
+ *      The Cookie header is extracted from the `-H 'cookie: …'` argument.
+ *   3. Bare cookie header — `name=v; name=v; ...` (e.g. the value of the
+ *      Cookie row in DevTools → Network → Request Headers).
+ *
+ * The parser deliberately never echoes the secret value back in an error
+ * message — error text mentions the format, not the contents.
+ */
+export function parseCookies(raw) {
+    const trimmed = raw.trim();
+    if (!trimmed)
+        throw new Error("cookies file is empty");
+    if (trimmed[0] === "[") {
+        const arr = JSON.parse(trimmed);
+        if (!Array.isArray(arr))
+            throw new Error("cookies JSON must be an array");
+        return arr.map((c, i) => {
+            if (!c ||
+                typeof c.name !== "string" ||
+                typeof c.value !== "string") {
+                throw new Error(`cookies[${i}] must have string name and value`);
+            }
+            const { name, value } = c;
+            return { name, value };
+        });
+    }
+    if (/^curl[\s'"]/i.test(trimmed)) {
+        const header = extractCookieHeaderFromCurl(trimmed);
+        if (!header) {
+            throw new Error("no Cookie header found in this cURL — right-click an authenticated request in DevTools → Network → Copy → Copy as cURL");
+        }
+        return parseCookieHeader(header);
+    }
+    return parseCookieHeader(trimmed);
+}
+function extractCookieHeaderFromCurl(curl) {
+    // Strip bash (`\`) and cmd (`^`) line continuations so the -H arg is on one line.
+    const joined = curl.replace(/\\\r?\n\s*/g, " ").replace(/\^\r?\n\s*/g, " ");
+    // -H 'cookie: …' (bash) or -H "cookie: …" (cmd). Chrome/Firefox use one
+    // or the other depending on which Copy-as-cURL variant the user picked.
+    const m = joined.match(/-H\s+(['"])\s*cookie\s*:\s*([\s\S]*?)\1/i);
+    return m ? m[2] : null;
+}
+function parseCookieHeader(header) {
+    const pairs = [];
+    for (const piece of header.split(/;\s*/)) {
+        const eq = piece.indexOf("=");
+        if (eq < 0)
+            continue;
+        const name = piece.slice(0, eq).trim();
+        const value = piece.slice(eq + 1).trim();
+        if (name)
+            pairs.push({ name, value });
+    }
+    if (pairs.length === 0)
+        throw new Error("no cookies found in input");
+    return pairs;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vercel/next-browser",
-  "version": "0.4.1",
+  "version": "0.5.1",
   "description": "Headed Playwright browser with React DevTools pre-loaded",
   "license": "MIT",
   "repository": {