chromeflow 0.7.1 → 0.9.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +43 -148
- package/bin/chromeflow.mjs +25916 -0
- package/package.json +35 -20
- package/CLAUDE.md +0 -356
- package/dist/index.js +0 -92
- package/dist/setup.js +0 -392
- package/dist/tools/browser.js +0 -371
- package/dist/tools/capture.js +0 -216
- package/dist/tools/flow.js +0 -416
- package/dist/tools/highlight.js +0 -70
- package/dist/types.js +0 -0
- package/dist/ws-bridge.js +0 -116
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Andrew Robertson (NeoDrewX)
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,173 +1,68 @@
|
|
|
1
|
-
|
|
2
|
-
<img src="assets/icon.png" width="120" alt="Chromeflow" />
|
|
3
|
-
</p>
|
|
1
|
+
# chromeflow — MCP server
|
|
4
2
|
|
|
5
|
-
|
|
3
|
+
The standalone npm package for the [Chromeflow](https://chromeflow.run) MCP server. Lets Claude Code, Codex CLI, or any MCP-compatible agent drive your real Chrome browser with sessions intact — clicks, fills forms, captures API keys to `.env`, downloads authenticated files.
|
|
6
4
|
|
|
7
|
-
|
|
5
|
+
## Recommended install — the plugin
|
|
8
6
|
|
|
9
|
-
|
|
7
|
+
For **Claude Code**:
|
|
10
8
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
| | Chromeflow | Playwright / Browser Use |
|
|
16
|
-
|---|---|---|
|
|
17
|
-
| **Browser** | Your real Chrome (sessions intact) | Fresh instance, logged out of everything |
|
|
18
|
-
| **Auth / 2FA** | Already handled — pauses when needed | Can't handle — blocks completely |
|
|
19
|
-
| **Page understanding** | DOM queries (fast, cheap, reliable) | Screenshots + vision model (slow, expensive) |
|
|
20
|
-
| **Human-in-the-loop** | Highlights, pauses on sensitive input | Fully autonomous, no interaction |
|
|
21
|
-
| **Integration** | MCP server for Claude Code | Standalone, not Claude Code aware |
|
|
22
|
-
| **Credential capture** | Reads API keys → writes to `.env` | Not designed for this |
|
|
23
|
-
|
|
24
|
-
## How it works
|
|
25
|
-
|
|
26
|
-
Chromeflow is two things that work together:
|
|
27
|
-
|
|
28
|
-
- **MCP server** — gives Claude Code a set of browser tools (`open_page`, `click_element`, `fill_form`, `set_file_input`, `read_element`, `write_to_env`, etc.)
|
|
29
|
-
- **Chrome extension** — receives those commands and acts on the active tab (highlights, clicks, fills, uploads files, captures screenshots)
|
|
30
|
-
|
|
31
|
-
Claude drives the flow. You only touch the browser for things that genuinely need you — login, passwords, payment details, personal choices.
|
|
32
|
-
|
|
33
|
-
## Setup
|
|
34
|
-
|
|
35
|
-
**1. Run the setup wizard** from your project directory:
|
|
36
|
-
|
|
37
|
-
```bash
|
|
38
|
-
npx chromeflow setup
|
|
9
|
+
```
|
|
10
|
+
/plugin marketplace add https://gitlab.com/NeoDrew/chromeflow.git
|
|
11
|
+
/plugin install chromeflow
|
|
39
12
|
```
|
|
40
13
|
|
|
41
|
-
|
|
42
|
-
- Registers the MCP server in `~/.claude.json`
|
|
43
|
-
- Writes `CLAUDE.md` into your project so Claude knows when and how to use Chromeflow
|
|
44
|
-
- Adds a hint to `~/.claude/CLAUDE.md` so Claude will suggest `npx chromeflow setup` in any project that isn't yet configured
|
|
45
|
-
- Pre-approves Chromeflow tools in `.claude/settings.local.json` (no per-action prompts)
|
|
46
|
-
|
|
47
|
-
**2. Install the Chrome extension** (one time):
|
|
48
|
-
|
|
49
|
-
The setup wizard opens the Chrome Web Store for you — click **Add to Chrome**.
|
|
50
|
-
|
|
51
|
-
Or install directly: [chromewebstore.google.com/detail/chromeflow/lkdchdgkbkodliefobkkhiegjdiidime](https://chromewebstore.google.com/detail/chromeflow/lkdchdgkbkodliefobkkhiegjdiidime)
|
|
52
|
-
|
|
53
|
-
The extension persists across Chrome restarts. You only do this once.
|
|
54
|
-
|
|
55
|
-
**3. Restart Claude Code.**
|
|
56
|
-
|
|
57
|
-
That's it. Claude will automatically reach for Chromeflow whenever a task needs browser interaction.
|
|
58
|
-
|
|
59
|
-
## Usage
|
|
60
|
-
|
|
61
|
-
Just ask Claude normally:
|
|
62
|
-
|
|
63
|
-
> "Set up Stripe for this project — create a product with monthly and annual pricing, capture the price IDs into .env"
|
|
64
|
-
|
|
65
|
-
> "Go to Supabase and get my project's anon key and service role key"
|
|
66
|
-
|
|
67
|
-
> "Help me configure SendGrid webhooks for this app"
|
|
68
|
-
|
|
69
|
-
Claude will navigate, highlight steps, click what it can, pause for anything sensitive, and write values to your `.env` automatically.
|
|
70
|
-
|
|
71
|
-
## What Claude can do
|
|
72
|
-
|
|
73
|
-
| Capability | Tools |
|
|
74
|
-
|------------|-------|
|
|
75
|
-
| Navigate pages, open new tabs | `open_page`, `list_tabs`, `switch_to_tab` |
|
|
76
|
-
| Click buttons and links | `click_element` (with `nth` for duplicates) |
|
|
77
|
-
| Fill single fields | `fill_input` (with `nth` for duplicates) |
|
|
78
|
-
| Fill multiple fields in one call | `fill_form` |
|
|
79
|
-
| Upload files (even hidden inputs) | `set_file_input` |
|
|
80
|
-
| Read page content as text | `get_page_text` (with `selector` scoping) |
|
|
81
|
-
| Inspect all form fields | `get_form_fields` |
|
|
82
|
-
| Scroll to a known element | `scroll_to_element` |
|
|
83
|
-
| Highlight elements for the user | `highlight_region`, `find_and_highlight` |
|
|
84
|
-
| Wait for the user to click | `wait_for_click` |
|
|
85
|
-
| Wait for async changes | `wait_for_selector` |
|
|
86
|
-
| Run arbitrary JS | `execute_script` |
|
|
87
|
-
| Read browser console output | `get_console_logs` |
|
|
88
|
-
| Capture credentials to `.env` | `read_element`, `write_to_env` |
|
|
89
|
-
| Screenshot (Claude-only by default; pass `copy_to_clipboard` / `save_to` to share) | `take_screenshot` |
|
|
90
|
-
| Screenshot the terminal window | `capture_terminal` |
|
|
91
|
-
| Save/restore form state across tabs | `save_page_state`, `restore_page_state` |
|
|
92
|
-
|
|
93
|
-
### File uploads
|
|
94
|
-
|
|
95
|
-
`set_file_input` uses Chrome DevTools Protocol to bypass the browser's file-input script restriction — the same mechanism used by Playwright and Puppeteer. It works even when the `<input type=file>` is hidden behind a custom drag-and-drop zone.
|
|
14
|
+
For **Codex CLI**:
|
|
96
15
|
|
|
97
16
|
```
|
|
98
|
-
|
|
17
|
+
codex plugin marketplace add https://gitlab.com/NeoDrew/chromeflow.git
|
|
18
|
+
/plugins
|
|
99
19
|
```
|
|
100
20
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
`capture_terminal` screenshots the terminal window (Terminal, iTerm2, Warp, VS Code, Ghostty, etc.) and saves it as a PNG. Use this with `set_file_input` to upload terminal output to a web form.
|
|
104
|
-
|
|
105
|
-
### Dedicated Claude window
|
|
106
|
-
|
|
107
|
-
Click the Chromeflow extension icon and use **"Use this window for Claude"** to lock Claude's browser operations to a specific Chrome window. This lets you freely use other Chrome windows without Claude interfering.
|
|
108
|
-
|
|
109
|
-
### Running multiple Claude Code instances in parallel
|
|
110
|
-
|
|
111
|
-
Chromeflow supports up to 11 Claude Code sessions running in parallel, each automating a different Chrome window without touching the others.
|
|
112
|
-
|
|
113
|
-
**How it works:**
|
|
114
|
-
- Each CC session spawns its own Chromeflow MCP server, which auto-discovers a free port in the range `7878-7888` (first session gets 7878, second gets 7879, etc.).
|
|
115
|
-
- The Chrome extension maintains one WebSocket connection per port and tracks per-port window assignments.
|
|
116
|
-
- Every browser tool call is routed to the Chrome window assigned to the port the request came in on.
|
|
21
|
+
The plugin bundles the MCP server, the usage skill, permission allowlists, and the SessionStart hook in a single install. No npm dependency, no per-project setup.
|
|
117
22
|
|
|
118
|
-
|
|
119
|
-
1. Start your first Claude Code session as normal — its Chromeflow will claim port 7878.
|
|
120
|
-
2. Start a second CC session in another terminal — its Chromeflow auto-falls-back to 7879.
|
|
121
|
-
3. Click the Chromeflow extension icon. The popup now shows **one row per instance** (Port 7878, Port 7879, ...) each with a green dot when live.
|
|
122
|
-
4. In Chrome **window A**, open the popup and click **"Use this window"** next to Port 7878.
|
|
123
|
-
5. Switch to **window B**, open the popup, and click **"Use this window"** next to Port 7879.
|
|
23
|
+
## Manual install — this package
|
|
124
24
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
Single-instance usage is unchanged and fully backwards compatible — the old per-window assignment is auto-migrated on first load.
|
|
128
|
-
|
|
129
|
-
## Adding to another project
|
|
130
|
-
|
|
131
|
-
Run setup from the new project's directory — the MCP server is already registered globally, this just drops `CLAUDE.md` and tool permissions into the project:
|
|
25
|
+
For environments where the plugin isn't an option (custom MCP clients, hand-crafted `.mcp.json`, CI test harnesses), install this npm package and wire it manually.
|
|
132
26
|
|
|
133
27
|
```bash
|
|
134
|
-
|
|
28
|
+
npm install -g chromeflow
|
|
29
|
+
# or run on demand
|
|
30
|
+
npx -y chromeflow
|
|
135
31
|
```
|
|
136
32
|
|
|
137
|
-
|
|
33
|
+
Then add to your MCP-client config (`.mcp.json`, `mcp.config`, or wherever your agent looks):
|
|
34
|
+
|
|
35
|
+
```json
|
|
36
|
+
{
|
|
37
|
+
"mcpServers": {
|
|
38
|
+
"chromeflow": {
|
|
39
|
+
"command": "npx",
|
|
40
|
+
"args": ["-y", "chromeflow"]
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
```
|
|
138
45
|
|
|
139
|
-
|
|
140
|
-
|---------|-------------|
|
|
141
|
-
| `npx chromeflow setup` | Register MCP server, write project `CLAUDE.md`, pre-approve tools |
|
|
142
|
-
| `npx chromeflow update` | Refresh the project `CLAUDE.md` with the latest instructions |
|
|
143
|
-
| `npx chromeflow uninstall` | Remove all Chromeflow config (MCP entry, `CLAUDE.md` sections, tool permissions) |
|
|
46
|
+
You still need the [Chromeflow Chrome extension](https://chromewebstore.google.com/detail/chromeflow/lkdchdgkbkodliefobkkhiegjdiidime) installed — it's the part that actually drives Chrome. The MCP server is a stdio↔WebSocket bridge between your agent and the extension.
|
|
144
47
|
|
|
145
|
-
##
|
|
48
|
+
## What's in this package
|
|
146
49
|
|
|
147
|
-
|
|
148
|
-
git clone https://github.com/NeoDrew/chromeflow
|
|
149
|
-
cd chromeflow
|
|
150
|
-
npm install
|
|
151
|
-
npm run build
|
|
152
|
-
```
|
|
50
|
+
A single bundled file: `bin/chromeflow.mjs` (~890 KB ESM), built from `packages/mcp-server/src/` via esbuild. Reading source? See the [GitLab repository](https://gitlab.com/NeoDrew/chromeflow).
|
|
153
51
|
|
|
154
|
-
|
|
52
|
+
## Tools exposed (v0.9.5)
|
|
155
53
|
|
|
156
|
-
|
|
157
|
-
node packages/mcp-server/dist/index.js setup
|
|
158
|
-
```
|
|
159
|
-
|
|
160
|
-
To rebuild on changes:
|
|
54
|
+
28 MCP tools across navigation, reading, interaction, waiting, privileged network, highlight + handoff, and utility. The full catalogue lives in [CLAUDE.md](https://gitlab.com/NeoDrew/chromeflow/-/blob/main/CLAUDE.md) — read that before writing an agent that calls these tools.
|
|
161
55
|
|
|
162
|
-
|
|
163
|
-
npm run dev:mcp # watches mcp-server
|
|
164
|
-
npm run dev:ext # watches extension
|
|
165
|
-
```
|
|
56
|
+
## Links
|
|
166
57
|
|
|
167
|
-
|
|
58
|
+
- **Website**: https://chromeflow.run
|
|
59
|
+
- **Compare to Playwright / Browser Use / Puppeteer**: https://chromeflow.run/compare
|
|
60
|
+
- **Use cases** (Stripe, Canvas, OAuth, API keys): https://chromeflow.run/use-cases
|
|
61
|
+
- **FAQ**: https://chromeflow.run/faq
|
|
62
|
+
- **GitLab**: https://gitlab.com/NeoDrew/chromeflow
|
|
63
|
+
- **Chrome Web Store**: https://chromewebstore.google.com/detail/chromeflow/lkdchdgkbkodliefobkkhiegjdiidime
|
|
64
|
+
- **MCP Registry**: `run.chromeflow/chromeflow` (DNS-verified namespace via chromeflow.run)
|
|
168
65
|
|
|
169
|
-
##
|
|
66
|
+
## License
|
|
170
67
|
|
|
171
|
-
|
|
172
|
-
- Chrome (or any Chromium browser)
|
|
173
|
-
- Node.js 22+
|
|
68
|
+
MIT — see [LICENSE](https://gitlab.com/NeoDrew/chromeflow/-/blob/main/LICENSE).
|