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

Installation: See references/installation.md for detailed setup instructions including Windows support.

Two modes available. Ask the user if unclear which to use.

Standalone Mode (Default)

Launches a new Chromium browser for fresh automation sessions.

./skills/dev-browser/server.sh &

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

Extension Mode

Connects to user's existing Chrome browser. Use this when:

• The user is already logged into sites and wants you to do things behind an authed experience that isn't local dev.
• The user asks you to use the extension

Important: The core flow is still the same. You create named pages inside of their browser.

Start the relay server:

cd skills/dev-browser && npm i && npm run start-extension &

Wait for Waiting for extension to connect... followed by Extension connected in the console. To know that a client has connected and the browser is ready to be controlled. Workflow:

1. Scripts call client.page("name") just like the normal mode to create new pages / connect to existing ones.
2. Automation runs on the user's actual browser session