dev-browser

Dev Browser Skill

Browser automation that maintains page state across script executions. Write small, focused scripts to accomplish tasks incrementally. Once you've proven out part of a workflow and there is repeated work to be done, you can write a script to do the repeated work in a single execution.

Choosing Your Approach

• Local/source-available sites: Read the source code first to write selectors directly
• Unknown page layouts: Use getAISnapshot() to discover elements and selectSnapshotRef() to interact with them
• Visual feedback: Take screenshots to see what the user sees

Setup

IMPORTANT: Always use Standalone Mode for browser automation. Extension Mode is rarely needed.

Standalone Mode (Default)

Launches a Chromium browser with a persistent profile. Login sessions, cookies, and local storage persist across browser restarts.

Start the server:

~/.config/amp/skills/dev-browser/server.sh &

Wait for the Ready message before running scripts. Add --headless flag if user requests headless mode.

Key points:

• Profile stored at ~/.config/amp/skills/dev-browser/profiles/browser-data
• Once logged in, future sessions remain authenticated
• Use this mode for local dev testing with auth (localhost:3000, etc.)

Extension Mode (Rarely Used)

Connects to user's existing Chrome browser. Only use when explicitly requested - the user must install a browser extension.

cd ~/.config/amp/skills/dev-browser && npm i && npm run start-extension &

Download link: https://github.com/SawyerHood/dev-browser/releases

Writing Scripts

Run all scripts from the dev-browser directory. The @/ import alias requires this directory's config.

Execute scripts inline using heredocs:

cd ~/.config/amp/skills/dev-browser && npx tsx <<'EOF'
import { connect, waitForPageLoad } from "@/client.js";

const client = await connect();
const page = await client.page("example"); // descriptive name like "cnn-homepage"
await page.setViewportSize({ width: 1280, height: 800 });

await page.goto("https://example.com");
await waitForPageLoad(page);

console.log({ title: await page.title(), url: page.url() });
await client.disconnect();
EOF