chromex-mcp 1.7.0 → 1.8.0
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/README.md +116 -16
- package/docs/advanced.md +301 -0
- package/docs/architecture.md +176 -0
- package/docs/data.md +235 -0
- package/docs/emulation.md +179 -0
- package/docs/forms.md +220 -0
- package/docs/getting-started.md +196 -0
- package/docs/inspect.md +346 -0
- package/docs/navigate.md +330 -0
- package/docs/network.md +218 -0
- package/docs/security.md +178 -0
- package/docs/troubleshooting.md +113 -0
- package/package.json +3 -2
- package/plugins/chromex/skills/chromex/scripts/chromex.mjs +131 -37
- package/plugins/chromex/skills/chromex/scripts/lib/artifacts.mjs +1 -1
- package/plugins/chromex/skills/chromex/scripts/lib/browser-pipe-broker.mjs +203 -0
- package/plugins/chromex/skills/chromex/scripts/lib/browser.mjs +209 -19
- package/plugins/chromex/skills/chromex/scripts/lib/client.mjs +138 -20
- package/plugins/chromex/skills/chromex/scripts/lib/commands/app.mjs +6 -3
- package/plugins/chromex/skills/chromex/scripts/lib/commands/console.mjs +61 -16
- package/plugins/chromex/skills/chromex/scripts/lib/commands/diagnose.mjs +72 -0
- package/plugins/chromex/skills/chromex/scripts/lib/commands/dialog.mjs +2 -1
- package/plugins/chromex/skills/chromex/scripts/lib/commands/doctor.mjs +8 -9
- package/plugins/chromex/skills/chromex/scripts/lib/commands/evaluate.mjs +1 -1
- package/plugins/chromex/skills/chromex/scripts/lib/commands/evidence.mjs +22 -21
- package/plugins/chromex/skills/chromex/scripts/lib/commands/extensions.mjs +182 -0
- package/plugins/chromex/skills/chromex/scripts/lib/commands/har.mjs +12 -8
- package/plugins/chromex/skills/chromex/scripts/lib/commands/heap.mjs +77 -16
- package/plugins/chromex/skills/chromex/scripts/lib/commands/inspect.mjs +96 -0
- package/plugins/chromex/skills/chromex/scripts/lib/commands/intercept.mjs +2 -1
- package/plugins/chromex/skills/chromex/scripts/lib/commands/issues.mjs +78 -0
- package/plugins/chromex/skills/chromex/scripts/lib/commands/network.mjs +122 -25
- package/plugins/chromex/skills/chromex/scripts/lib/commands/pdf.mjs +1 -1
- package/plugins/chromex/skills/chromex/scripts/lib/commands/perf.mjs +157 -86
- package/plugins/chromex/skills/chromex/scripts/lib/commands/screencast.mjs +167 -0
- package/plugins/chromex/skills/chromex/scripts/lib/commands/screenshot.mjs +1 -1
- package/plugins/chromex/skills/chromex/scripts/lib/commands/show.mjs +2 -2
- package/plugins/chromex/skills/chromex/scripts/lib/commands/stats.mjs +4 -3
- package/plugins/chromex/skills/chromex/scripts/lib/commands/third-party.mjs +128 -0
- package/plugins/chromex/skills/chromex/scripts/lib/commands/trace.mjs +109 -46
- package/plugins/chromex/skills/chromex/scripts/lib/commands/wait.mjs +2 -1
- package/plugins/chromex/skills/chromex/scripts/lib/commands/webmcp.mjs +150 -0
- package/plugins/chromex/skills/chromex/scripts/lib/config.mjs +14 -2
- package/plugins/chromex/skills/chromex/scripts/lib/daemon.mjs +139 -23
- package/plugins/chromex/skills/chromex/scripts/lib/heap-analysis.mjs +434 -0
- package/plugins/chromex/skills/chromex/scripts/lib/heap-worker.mjs +12 -0
- package/plugins/chromex/skills/chromex/scripts/lib/ipc.mjs +6 -0
- package/plugins/chromex/skills/chromex/scripts/lib/json-schema.mjs +39 -0
- package/plugins/chromex/skills/chromex/scripts/lib/launcher.mjs +143 -12
- package/plugins/chromex/skills/chromex/scripts/lib/redaction.mjs +75 -0
- package/plugins/chromex/skills/chromex/scripts/lib/security.mjs +5 -3
- package/plugins/chromex/skills/chromex/scripts/lib/sessions.mjs +1 -1
- package/plugins/chromex/skills/chromex/scripts/mcp-server.mjs +319 -40
package/README.md
CHANGED
|
@@ -4,14 +4,26 @@
|
|
|
4
4
|
[](https://nodejs.org/)
|
|
5
5
|
[](LICENSE)
|
|
6
6
|
|
|
7
|
-
Chromex is
|
|
7
|
+
Chromex is an agent-first browser automation and DevTools toolkit that connects directly to Chrome, Brave, Edge, Chromium, and Vivaldi through CDP. It exposes the complete capability set through a token-efficient CLI and 85 typed MCP tools, with zero runtime dependencies.
|
|
8
8
|
|
|
9
|
-
Use Chromex when an agent needs to
|
|
9
|
+
Use Chromex when an agent needs to automate a real logged-in browser, inspect page and Application state, debug console/network failures, profile performance or memory, test extensions and WebMCP, or collect reproducible evidence without pulling in a heavy browser automation runtime.
|
|
10
|
+
|
|
11
|
+
## Quick Start
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install -g chromex-mcp
|
|
15
|
+
chromex --version
|
|
16
|
+
chromex launch --pipe --url https://example.com
|
|
17
|
+
chromex list
|
|
18
|
+
chromex snap <target> --refs
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
`launch --pipe` is the recommended path for repeatable AI sessions: it starts an isolated Chromex profile and avoids Chrome's recurring debugging approval prompt. Use the normal WebSocket mode only when access to an already-running personal browser is intentional.
|
|
10
22
|
|
|
11
23
|
## Why Chromex
|
|
12
24
|
|
|
13
25
|
- **CLI-first for lower token usage**: terminal commands return compact plain text and avoid MCP tool-schema overhead.
|
|
14
|
-
- **Optional MCP server**:
|
|
26
|
+
- **Optional MCP server**: 85 typed tools in the full set, plus focused `core` and `devtools` toolsets for sessions where schema cost matters.
|
|
15
27
|
- **No runtime dependencies**: Node.js 22+ built-ins only, including native WebSocket support.
|
|
16
28
|
- **Agent-friendly page model**: accessibility snapshots, `@eN` refs, incremental diffs, query filters, auto-snapshots, and contextual hints.
|
|
17
29
|
- **Persistent per-tab daemons**: one CDP session per tab, held open through an authenticated Unix socket.
|
|
@@ -28,11 +40,23 @@ Use Chromex when an agent needs to inspect pages, take screenshots, navigate, cl
|
|
|
28
40
|
- Debug production behavior with console history, network request details, response bodies, HAR export, request blocking, API mocking, throttling, and offline mode.
|
|
29
41
|
- Test browser conditions with device presets, viewport resizing, DPR, geolocation, timezone, locale, CPU throttling, incognito contexts, proxies, and custom Chrome flags.
|
|
30
42
|
- Diagnose performance and quality with Core Web Vitals, transfer size, DOM/memory counters, Lighthouse audits, JS/CSS coverage, Chrome traces, and heap snapshots.
|
|
43
|
+
- Inspect Browser Issues, computed and matched CSS, event listeners, box models, prioritized runtime diagnoses, CPU profiles, heap retaining paths, duplicate strings, and trace insights.
|
|
44
|
+
- Capture bounded screencasts with a local replay, manage extensions in trusted pipe mode, and discover or execute WebMCP and page-exposed developer tools.
|
|
31
45
|
- Build evidence packs with screenshots, snapshots, HTML, console, network timeline, action timeline, and replay HTML.
|
|
32
46
|
- Validate modern browser flows such as passkey/WebAuthn registration and login, downloads, cookies, portable storage state, PDF export, and isolated profiles.
|
|
33
47
|
- Inspect Application panel state from the terminal: origin quota, storage usage breakdown, Cache Storage entries/bodies, IndexedDB schemas/rows, and Service Worker registrations.
|
|
34
48
|
- Turn `@eN` refs into locators and optional `chromex-test` action code.
|
|
35
49
|
|
|
50
|
+
The CLI and the default MCP `full` toolset expose the same capability families. CLI commands group related operations into subcommands, while MCP presents 85 individually typed tools.
|
|
51
|
+
|
|
52
|
+
| Capability | CLI | MCP `full` |
|
|
53
|
+
|------------|-----|------------|
|
|
54
|
+
| Input, navigation, forms, uploads, dialogs, and emulation | Yes | Yes |
|
|
55
|
+
| Console, network, Application state, interception, HAR, and audits | Yes | Yes |
|
|
56
|
+
| Browser Issues, CSS/listener/box inspection, and runtime diagnosis | Yes | Yes |
|
|
57
|
+
| Web Vitals, CPU profiles, heap sampling, traces, and heap analysis | Yes | Yes |
|
|
58
|
+
| Screencasts, extensions, page developer tools, and WebMCP | Yes | Yes |
|
|
59
|
+
|
|
36
60
|
## Positioning
|
|
37
61
|
|
|
38
62
|
Chromex is a direct CDP layer for coding agents. It sits between raw Chrome DevTools Protocol and heavier browser automation frameworks.
|
|
@@ -77,11 +101,16 @@ chromex launch --browser brave --url https://example.com
|
|
|
77
101
|
chromex launch --profile testing --url https://example.com
|
|
78
102
|
chromex launch --incognito --browser chrome
|
|
79
103
|
chromex launch --headless --url https://example.com
|
|
104
|
+
chromex launch --pipe --url https://example.com
|
|
105
|
+
chromex launch --extension-tools --url about:blank
|
|
106
|
+
chromex launch --webmcp --url https://example.com
|
|
80
107
|
chromex launch --browser-path "/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary"
|
|
81
108
|
```
|
|
82
109
|
|
|
83
110
|
Named profiles are stored under `~/.chromex/profiles/` and keep test sessions isolated from your daily browser profile.
|
|
84
111
|
|
|
112
|
+
`chromex launch --pipe` is the preferred mode for repeated AI sessions. It uses one permission-protected local Unix-socket broker over Chrome's remote-debugging pipe, avoids approval modals, and lets CLI and MCP clients share the same browser connection. `--extension-tools` implies pipe mode because Chrome restricts extension lifecycle APIs to trusted debugging sessions. WebMCP requires a visible supported Chrome build, so do not combine `--webmcp` with `--headless` when the page tools must execute.
|
|
113
|
+
|
|
85
114
|
Chrome for Testing also works well with Chromex. Download it manually from Google's official Chrome for Testing channel, then point Chromex at the executable with `--browser-path` or `CHROMEX_BROWSER_PATH`. Chromex does not download or bundle a browser.
|
|
86
115
|
|
|
87
116
|
### Option B: Connect to an Already-Running Browser
|
|
@@ -101,7 +130,9 @@ Important notes:
|
|
|
101
130
|
|
|
102
131
|
- Without remote debugging enabled, Chromex cannot discover or control your open tabs.
|
|
103
132
|
- The browser setting is usually persistent across restarts.
|
|
104
|
-
-
|
|
133
|
+
- Chrome may show an "Allow debugging" prompt for each new DevTools WebSocket connection to a normal browser profile. This is browser security behavior, so reconnecting from a new CLI or agent process can show it again.
|
|
134
|
+
- Per-tab daemons and the persistent MCP connection reduce reconnections, but they do not bypass Chrome's protection for a personal browser profile.
|
|
135
|
+
- Use `chromex launch --pipe` with a Chromex-managed isolated profile when a modal-free persistent AI connection is required.
|
|
105
136
|
|
|
106
137
|
If your browser uses a custom profile or a non-standard `DevToolsActivePort` location, set:
|
|
107
138
|
|
|
@@ -133,6 +164,15 @@ npm install -g chromex-mcp
|
|
|
133
164
|
bun add -g chromex-mcp
|
|
134
165
|
```
|
|
135
166
|
|
|
167
|
+
Verify which installation every terminal and agent session will use:
|
|
168
|
+
|
|
169
|
+
```bash
|
|
170
|
+
command -v chromex
|
|
171
|
+
chromex --version
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
Cloning the repository does not replace an existing global installation. To test the current checkout directly, run `node bin/chromex.mjs`. To deliberately install the current checkout globally, run `npm install -g .` from the repository root and verify the path and version again.
|
|
175
|
+
|
|
136
176
|
The package installs three binaries:
|
|
137
177
|
|
|
138
178
|
| Binary | Purpose |
|
|
@@ -221,26 +261,49 @@ Global, available in all projects:
|
|
|
221
261
|
|
|
222
262
|
```bash
|
|
223
263
|
# npm
|
|
224
|
-
claude mcp add chromex
|
|
264
|
+
claude mcp add chromex --scope user -- npx -y chromex-mcp@latest
|
|
225
265
|
|
|
226
266
|
# Bun
|
|
227
|
-
claude mcp add chromex
|
|
267
|
+
claude mcp add chromex --scope user -- bunx chromex-mcp@latest
|
|
228
268
|
```
|
|
229
269
|
|
|
230
270
|
Project-only:
|
|
231
271
|
|
|
232
272
|
```bash
|
|
233
273
|
# npm
|
|
234
|
-
claude mcp add chromex npx chromex-mcp@latest
|
|
274
|
+
claude mcp add chromex -- npx -y chromex-mcp@latest
|
|
235
275
|
|
|
236
276
|
# Bun
|
|
237
|
-
claude mcp add chromex bunx chromex-mcp@latest
|
|
277
|
+
claude mcp add chromex -- bunx chromex-mcp@latest
|
|
278
|
+
```
|
|
279
|
+
|
|
280
|
+
For MCP clients that accept a standard stdio configuration, point the client at the installed binary:
|
|
281
|
+
|
|
282
|
+
```json
|
|
283
|
+
{
|
|
284
|
+
"mcpServers": {
|
|
285
|
+
"chromex": {
|
|
286
|
+
"command": "chromex-mcp",
|
|
287
|
+
"args": []
|
|
288
|
+
}
|
|
289
|
+
}
|
|
290
|
+
}
|
|
238
291
|
```
|
|
239
292
|
|
|
240
|
-
After setup, the MCP client can call tools such as `chromex_list`, `chromex_snapshot`, `chromex_click`, `chromex_fill`, `
|
|
293
|
+
After setup, the MCP client can call tools such as `chromex_list`, `chromex_snapshot`, `chromex_click`, `chromex_fill`, `chromex_network`, `chromex_issues`, `chromex_inspect`, `chromex_diagnose`, `chromex_perf`, `chromex_trace`, `chromex_heap`, `chromex_screencast`, `chromex_extensions`, `chromex_third_party`, `chromex_webmcp`, `chromex_app_summary`, `chromex_cache_entries`, `chromex_indexeddb_rows`, and `chromex_evidence`.
|
|
241
294
|
|
|
242
295
|
Tools that produce machine-readable data or artifacts also include MCP `structuredContent`, so agents can read paths and metadata without parsing the human text block.
|
|
243
296
|
|
|
297
|
+
The default `full` toolset exposes all 85 tools. Use a focused toolset when the MCP client sends every schema into the model context:
|
|
298
|
+
|
|
299
|
+
```bash
|
|
300
|
+
chromex-mcp --toolset=core
|
|
301
|
+
chromex-mcp --toolset=devtools
|
|
302
|
+
CHROMEX_TOOLSET=full chromex-mcp
|
|
303
|
+
```
|
|
304
|
+
|
|
305
|
+
`core` exposes 24 navigation, inspection, input, form, and emulation tools. `devtools` exposes 26 browser-diagnostics, performance, trace, heap, Application, and audit tools. This selection changes discovery only; the complete CLI and the default MCP toolset retain every capability.
|
|
306
|
+
|
|
244
307
|
### Claude Code Auto-Approve
|
|
245
308
|
|
|
246
309
|
To approve all Chromex MCP tools at once, add this to `~/.claude/settings.json`:
|
|
@@ -294,6 +357,7 @@ claude mcp remove chromex
|
|
|
294
357
|
|
|
295
358
|
```bash
|
|
296
359
|
chromex list
|
|
360
|
+
chromex list --include-sensitive
|
|
297
361
|
chromex open "https://example.com"
|
|
298
362
|
chromex -s auth open "https://example.com/login"
|
|
299
363
|
chromex -s auth snap --refs
|
|
@@ -304,6 +368,9 @@ chromex focus <target>
|
|
|
304
368
|
chromex launch --url https://example.com
|
|
305
369
|
chromex launch --browser brave --incognito
|
|
306
370
|
chromex launch --headless --url https://example.com
|
|
371
|
+
chromex launch --pipe --url https://example.com
|
|
372
|
+
chromex launch --extension-tools --url about:blank
|
|
373
|
+
chromex launch --webmcp --url https://example.com
|
|
307
374
|
chromex launch --browser-path /path/to/chrome --url https://example.com
|
|
308
375
|
chromex doctor
|
|
309
376
|
chromex incognito https://example.com
|
|
@@ -322,8 +389,14 @@ chromex shot <target> ~/.chromex/screenshots/full.png --full
|
|
|
322
389
|
chromex shot <target> @e5
|
|
323
390
|
chromex console <target> list
|
|
324
391
|
chromex net <target>
|
|
392
|
+
chromex net <target> <requestId> --include-sensitive
|
|
393
|
+
chromex net <target> <requestId> --body-limit=100000
|
|
325
394
|
chromex perf <target>
|
|
326
395
|
chromex domsnapshot <target> --styles
|
|
396
|
+
chromex issues <target> enable
|
|
397
|
+
chromex issues <target> list
|
|
398
|
+
chromex inspect <target> all "#checkout"
|
|
399
|
+
chromex diagnose <target>
|
|
327
400
|
chromex evidence <target> start checkout-flow
|
|
328
401
|
chromex evidence <target> mark "after login"
|
|
329
402
|
chromex evidence <target> stop
|
|
@@ -415,7 +488,13 @@ chromex inject <target> "window.DEBUG=true"
|
|
|
415
488
|
chromex download <target> allow ~/.chromex/downloads
|
|
416
489
|
chromex coverage <target> start
|
|
417
490
|
chromex trace <target> start
|
|
491
|
+
chromex trace <target> insights
|
|
418
492
|
chromex heap <target> snapshot ~/.chromex/heap/heap.heapsnapshot
|
|
493
|
+
chromex heap <target> summary
|
|
494
|
+
chromex screencast <target> start --max-frames=120
|
|
495
|
+
chromex extensions <target> list
|
|
496
|
+
chromex third-party <target> list
|
|
497
|
+
chromex webmcp <target> list
|
|
419
498
|
chromex webauthn <target> enable
|
|
420
499
|
```
|
|
421
500
|
|
|
@@ -498,7 +577,7 @@ chromex -s auth click @e3
|
|
|
498
577
|
chromex sessions
|
|
499
578
|
chromex show --annotate
|
|
500
579
|
chromex close-all
|
|
501
|
-
chromex delete-data
|
|
580
|
+
chromex delete-data auth
|
|
502
581
|
```
|
|
503
582
|
|
|
504
583
|
`CHROMEX_SESSION=auth` can replace `-s auth` for shell scripts.
|
|
@@ -583,7 +662,24 @@ Chromex creates `~/.chromex/config.json` on first run:
|
|
|
583
662
|
"idleTimeout": 1200000,
|
|
584
663
|
"allowedDomains": [],
|
|
585
664
|
"blockedDomains": [],
|
|
586
|
-
"blockedCdpMethods": [
|
|
665
|
+
"blockedCdpMethods": [
|
|
666
|
+
"Network.enable",
|
|
667
|
+
"Network.setRequestInterception",
|
|
668
|
+
"Network.setCacheDisabled",
|
|
669
|
+
"Page.setDocumentContent",
|
|
670
|
+
"Security.disable",
|
|
671
|
+
"Security.setIgnoreCertificateErrors",
|
|
672
|
+
"Fetch.enable",
|
|
673
|
+
"Fetch.fulfillRequest",
|
|
674
|
+
"Fetch.continueRequest",
|
|
675
|
+
"Browser.close",
|
|
676
|
+
"Browser.crashGpuProcess",
|
|
677
|
+
"Target.disposeBrowserContext",
|
|
678
|
+
"SystemInfo.getProcessInfo",
|
|
679
|
+
"Storage.clearDataForOrigin",
|
|
680
|
+
"Storage.getCookies",
|
|
681
|
+
"IndexedDB.requestData"
|
|
682
|
+
],
|
|
587
683
|
"auditLog": true,
|
|
588
684
|
"socketAuth": true
|
|
589
685
|
}
|
|
@@ -597,18 +693,21 @@ Recommended security practices:
|
|
|
597
693
|
- Keep `auditLog` enabled and review `~/.chromex/audit.log` when needed.
|
|
598
694
|
- Prefer `chromex launch --profile testing` for isolated browser state.
|
|
599
695
|
|
|
696
|
+
Page URLs, network, console, extension-storage, third-party, and WebMCP outputs redact secret-shaped headers and fields by default. The browser still sends and receives the original values. Use CLI `--include-sensitive` or MCP `includeSensitive: true` only on the specific live call that needs exact values. Audit logs, page caches, stats, HAR, and structured evidence timelines, network data, and console data remain redacted even when a live response is revealed. Screenshots, screencasts, snapshots, HTML, traces, heap snapshots, and raw page content can still contain sensitive information and should be handled accordingly.
|
|
697
|
+
|
|
600
698
|
See [docs/security.md](docs/security.md) for the full security model.
|
|
601
699
|
|
|
602
700
|
## How It Works
|
|
603
701
|
|
|
604
702
|
```text
|
|
605
703
|
CLI or MCP client -> authenticated Unix socket -> per-tab daemon -> CDP WebSocket -> browser
|
|
704
|
+
\-> pipe broker -> Chrome debugging pipe
|
|
606
705
|
```
|
|
607
706
|
|
|
608
|
-
1. Chromex finds
|
|
707
|
+
1. Chromex finds a browser DevTools endpoint or a Chromex pipe-broker marker.
|
|
609
708
|
2. The first tab command starts a detached daemon for that tab.
|
|
610
709
|
3. The daemon attaches once through CDP and keeps the session open.
|
|
611
|
-
4. CLI and MCP commands talk to the daemon through an authenticated Unix socket.
|
|
710
|
+
4. CLI and MCP commands talk to the daemon through an authenticated Unix socket; pipe mode multiplexes CDP through a second local socket restricted to the current OS user.
|
|
612
711
|
5. Daemons exit after the configured idle timeout.
|
|
613
712
|
|
|
614
713
|
See [docs/architecture.md](docs/architecture.md) for implementation details.
|
|
@@ -618,15 +717,16 @@ See [docs/architecture.md](docs/architecture.md) for implementation details.
|
|
|
618
717
|
| Guide | Description |
|
|
619
718
|
|-------|-------------|
|
|
620
719
|
| [Getting Started](docs/getting-started.md) | Installation, browser setup, first commands. |
|
|
621
|
-
| [Inspect and Debug](docs/inspect.md) | Screenshots, accessibility tree, refs,
|
|
720
|
+
| [Inspect and Debug](docs/inspect.md) | Screenshots, accessibility tree, refs, Browser Issues, CSS/listener inspection, diagnostics, performance, and console. |
|
|
622
721
|
| [Navigate and Interact](docs/navigate.md) | Navigation, clicking, typing, scrolling, drag and drop, touch, dialogs. |
|
|
623
722
|
| [Form Filling](docs/forms.md) | Fill, clear, select, check, upload, batch form examples. |
|
|
624
723
|
| [Data Access](docs/data.md) | Cookies, localStorage, sessionStorage, Application state, Cache Storage, IndexedDB, Service Workers, PDF export. |
|
|
625
|
-
| [Network Control](docs/network.md) |
|
|
724
|
+
| [Network Control](docs/network.md) | Live request history and bodies, filtering, redaction, throttling, interception, mocking, and HAR. |
|
|
626
725
|
| [Device Emulation](docs/emulation.md) | Responsive testing, geolocation, timezone, CPU throttling. |
|
|
627
726
|
| [Security](docs/security.md) | Domain filtering, CDP blocklist, audit log, best practices. |
|
|
628
|
-
| [Advanced](docs/advanced.md) |
|
|
727
|
+
| [Advanced](docs/advanced.md) | CPU and heap profiles, trace insights, heap graph analysis, screencasts, extensions, page tools, WebMCP, and WebAuthn. |
|
|
629
728
|
| [Architecture](docs/architecture.md) | Daemon model, connection modes, and file layout. |
|
|
729
|
+
| [Troubleshooting](docs/troubleshooting.md) | Installation drift, connection failures, debugging prompts, Node warnings, extensions, and WebMCP. |
|
|
630
730
|
|
|
631
731
|
## Development
|
|
632
732
|
|
package/docs/advanced.md
ADDED
|
@@ -0,0 +1,301 @@
|
|
|
1
|
+
# Advanced Features
|
|
2
|
+
|
|
3
|
+
Power-user commands for script injection, code coverage, performance and memory profiling, trace insights, heap graph analysis, screencasts, Chrome extensions, page-exposed tools, WebMCP, and WebAuthn testing.
|
|
4
|
+
|
|
5
|
+
## Script Injection
|
|
6
|
+
|
|
7
|
+
Inject JavaScript that runs **before** any page scripts on every navigation. Useful for polyfills, monitoring, API overrides, or anti-detection.
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
# Inject inline script
|
|
11
|
+
chromex inject <target> "window.__TESTING = true"
|
|
12
|
+
|
|
13
|
+
# Inject from file
|
|
14
|
+
chromex inject <target> --file /tmp/preload.js
|
|
15
|
+
|
|
16
|
+
# List injected scripts
|
|
17
|
+
chromex inject <target> --list
|
|
18
|
+
# Output:
|
|
19
|
+
# 1 window.__TESTING = true
|
|
20
|
+
# 2 (function() { // contents of preload.js... })()
|
|
21
|
+
|
|
22
|
+
# Remove a specific injection
|
|
23
|
+
chromex inject <target> --remove 1
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
### Use Cases
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
# Override navigator properties (anti-detection)
|
|
30
|
+
chromex inject <target> "Object.defineProperty(navigator, 'webdriver', {get: () => false})"
|
|
31
|
+
|
|
32
|
+
# Add performance monitoring
|
|
33
|
+
chromex inject <target> --file /tmp/monitor.js
|
|
34
|
+
|
|
35
|
+
# Mock browser APIs
|
|
36
|
+
chromex inject <target> "window.confirm = () => true; window.alert = () => {}"
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
Scripts persist across navigations within the same daemon session. They're removed when the daemon stops or when explicitly removed with `--remove`.
|
|
40
|
+
|
|
41
|
+
## Download Control
|
|
42
|
+
|
|
43
|
+
Control how the browser handles file downloads.
|
|
44
|
+
|
|
45
|
+
```bash
|
|
46
|
+
# Auto-accept downloads to a specific directory
|
|
47
|
+
chromex download <target> allow ~/.chromex/downloads
|
|
48
|
+
|
|
49
|
+
# Block all downloads
|
|
50
|
+
chromex download <target> deny
|
|
51
|
+
|
|
52
|
+
# Reset to default behavior
|
|
53
|
+
chromex download <target> reset
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## Code Coverage
|
|
57
|
+
|
|
58
|
+
Measure how much of the loaded JavaScript and CSS is actually used.
|
|
59
|
+
|
|
60
|
+
```bash
|
|
61
|
+
# Start collecting coverage
|
|
62
|
+
chromex coverage <target> start
|
|
63
|
+
|
|
64
|
+
# Navigate and interact with the page
|
|
65
|
+
chromex nav <target> "https://example.com"
|
|
66
|
+
chromex click <target> ".menu-toggle"
|
|
67
|
+
chromex waitfor <target> ".dropdown-open"
|
|
68
|
+
|
|
69
|
+
# Stop and get report
|
|
70
|
+
chromex coverage <target> stop
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
**Output:**
|
|
74
|
+
```
|
|
75
|
+
## JavaScript Coverage
|
|
76
|
+
Total: 1.2MB, Used: 340.5KB (28%)
|
|
77
|
+
|
|
78
|
+
Files with <50% usage:
|
|
79
|
+
12% 245.3KB https://example.com/vendor.js
|
|
80
|
+
23% 189.1KB https://example.com/analytics.js
|
|
81
|
+
45% 98.7KB https://example.com/app.js
|
|
82
|
+
|
|
83
|
+
## CSS Coverage
|
|
84
|
+
Rules: 1523 total, 412 used (27%)
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
### Use Cases
|
|
88
|
+
|
|
89
|
+
```bash
|
|
90
|
+
# Identify dead code in production
|
|
91
|
+
chromex coverage <target> start
|
|
92
|
+
chromex nav <target> "https://example.com"
|
|
93
|
+
chromex wait <target> networkidle
|
|
94
|
+
chromex coverage <target> stop
|
|
95
|
+
|
|
96
|
+
# Measure coverage for a specific user flow
|
|
97
|
+
chromex coverage <target> start
|
|
98
|
+
chromex nav <target> "https://app.example.com/login"
|
|
99
|
+
chromex fill <target> "#email" "user@test.com"
|
|
100
|
+
chromex fill <target> "#password" "secret"
|
|
101
|
+
chromex click <target> "button[type=submit]"
|
|
102
|
+
chromex waitfor <target> ".dashboard"
|
|
103
|
+
chromex coverage <target> stop
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
## Performance and Allocation Profiles
|
|
107
|
+
|
|
108
|
+
The performance summary reports LCP, INP, FCP, CLS, TTFB, long tasks, long animation frames, layout shifts, navigation timing, transfer size, heap counters, DOM nodes, documents, frames, and listeners.
|
|
109
|
+
|
|
110
|
+
```bash
|
|
111
|
+
chromex perf <target> summary
|
|
112
|
+
chromex perf <target> start
|
|
113
|
+
chromex perf <target> stop
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
Use an explicit collection window when the metric depends on an interaction. CPU and allocation profiles are written under `~/.chromex/artifacts/<workspace>/profiles/` unless a path is provided.
|
|
117
|
+
|
|
118
|
+
```bash
|
|
119
|
+
chromex perf <target> cpu-start
|
|
120
|
+
chromex click <target> "#expensive-action"
|
|
121
|
+
chromex perf <target> cpu-stop
|
|
122
|
+
|
|
123
|
+
chromex perf <target> heap-sampling-start
|
|
124
|
+
chromex click <target> "#allocate"
|
|
125
|
+
chromex perf <target> heap-sampling-stop
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
CPU profiles use the `.cpuprofile` format. Heap allocation sampling uses `.heapprofile`; both can be loaded into compatible Chrome DevTools panels.
|
|
129
|
+
|
|
130
|
+
## Performance Tracing
|
|
131
|
+
|
|
132
|
+
Capture a full Chrome performance trace and analyze common bottlenecks without loading the complete trace into the agent context.
|
|
133
|
+
|
|
134
|
+
```bash
|
|
135
|
+
chromex trace <target> start
|
|
136
|
+
chromex nav <target> "https://example.com"
|
|
137
|
+
chromex scroll <target> bottom
|
|
138
|
+
chromex click <target> ".load-more"
|
|
139
|
+
chromex trace <target> stop
|
|
140
|
+
chromex trace <target> insights
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
The default artifact path is `~/.chromex/artifacts/<workspace>/traces/trace-<timestamp>.json`. The capture streams through CDP instead of retaining the complete trace in memory.
|
|
144
|
+
|
|
145
|
+
Use custom categories or inspect one finding type:
|
|
146
|
+
|
|
147
|
+
```bash
|
|
148
|
+
chromex trace <target> start "devtools.timeline,v8.execute,blink.user_timing"
|
|
149
|
+
chromex trace <target> stop ~/.chromex/custom/checkout-trace.json
|
|
150
|
+
chromex trace <target> insight long-task ~/.chromex/custom/checkout-trace.json
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
Available insight families depend on the trace and include long tasks, expensive layouts, GC pauses, and layout shifts. Full trace files can also be loaded into [Perfetto UI](https://ui.perfetto.dev/).
|
|
154
|
+
|
|
155
|
+
## Heap Snapshots and Graph Analysis
|
|
156
|
+
|
|
157
|
+
Heap snapshots default to `~/.chromex/artifacts/<workspace>/heap/`. Chromex analyzes them in a worker so the CLI and MCP server remain responsive.
|
|
158
|
+
|
|
159
|
+
```bash
|
|
160
|
+
chromex heap <target> snapshot
|
|
161
|
+
chromex heap <target> summary
|
|
162
|
+
chromex heap <target> duplicate-strings
|
|
163
|
+
chromex heap <target> class-nodes <snapshot> HTMLDivElement 50
|
|
164
|
+
chromex heap <target> dominators <snapshot> <nodeId> 50
|
|
165
|
+
chromex heap <target> retainers <snapshot> <nodeId> 50
|
|
166
|
+
chromex heap <target> retaining-paths <snapshot> <nodeId> 20 8
|
|
167
|
+
chromex heap <target> edges <snapshot> <nodeId> 100
|
|
168
|
+
chromex heap <target> details <snapshot> <nodeId>
|
|
169
|
+
chromex heap <target> close <snapshot>
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
`summary` and other analysis commands reuse the most recent snapshot when the file is omitted. `close` releases its parsed graph from the analysis worker.
|
|
173
|
+
|
|
174
|
+
### Memory Leak Workflow
|
|
175
|
+
|
|
176
|
+
```bash
|
|
177
|
+
chromex heap <target> snapshot ~/.chromex/heap/before.heapsnapshot
|
|
178
|
+
|
|
179
|
+
for i in $(seq 1 10); do
|
|
180
|
+
chromex click <target> ".open-modal"
|
|
181
|
+
chromex click <target> ".close-modal"
|
|
182
|
+
done
|
|
183
|
+
|
|
184
|
+
chromex heap <target> snapshot ~/.chromex/heap/after.heapsnapshot
|
|
185
|
+
chromex heap <target> compare ~/.chromex/heap/before.heapsnapshot ~/.chromex/heap/after.heapsnapshot 50
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
Snapshots can still be loaded into the Chrome DevTools Memory panel for manual exploration. They may contain strings and object data from the page and should be treated as sensitive artifacts.
|
|
189
|
+
|
|
190
|
+
## Bounded Screencasts
|
|
191
|
+
|
|
192
|
+
Screencasts capture individual frames, a manifest, and a local replay instead of producing an opaque video file.
|
|
193
|
+
|
|
194
|
+
```bash
|
|
195
|
+
chromex screencast <target> start --format=jpeg --quality=80 --max-frames=300
|
|
196
|
+
chromex screencast <target> status
|
|
197
|
+
chromex screencast <target> stop
|
|
198
|
+
chromex screencast <target> replay
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
Useful bounds include `--max-width`, `--max-height`, `--every-nth-frame`, and `--max-frames`. The default root is `~/.chromex/artifacts/<workspace>/screencasts/`.
|
|
202
|
+
|
|
203
|
+
## Chrome Extension Tooling
|
|
204
|
+
|
|
205
|
+
Extension lifecycle APIs require a dedicated browser launched with trusted pipe transport:
|
|
206
|
+
|
|
207
|
+
```bash
|
|
208
|
+
chromex launch --extension-tools --profile extensions --url about:blank
|
|
209
|
+
chromex list
|
|
210
|
+
chromex extensions <target> install /path/to/unpacked-extension
|
|
211
|
+
chromex extensions <target> list
|
|
212
|
+
chromex extensions <target> targets <extensionId>
|
|
213
|
+
chromex extensions <target> action <extensionId>
|
|
214
|
+
chromex extensions <target> reload <extensionId>
|
|
215
|
+
chromex extensions <target> uninstall <extensionId>
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
Extension storage supports `session`, `local`, `sync`, and `managed` areas:
|
|
219
|
+
|
|
220
|
+
```bash
|
|
221
|
+
chromex extensions <target> storage-get <extensionId> local
|
|
222
|
+
chromex extensions <target> storage-get <extensionId> local '["featureFlag"]' --include-sensitive
|
|
223
|
+
chromex extensions <target> storage-set <extensionId> local '{"featureFlag":true}'
|
|
224
|
+
chromex extensions <target> storage-remove <extensionId> local featureFlag
|
|
225
|
+
chromex extensions <target> storage-clear <extensionId> local
|
|
226
|
+
```
|
|
227
|
+
|
|
228
|
+
Runtime install accepts an unpacked extension directory. Storage output is redacted by default.
|
|
229
|
+
|
|
230
|
+
## Page-Exposed Developer Tools
|
|
231
|
+
|
|
232
|
+
Pages can expose developer-tool groups through the `devtoolstooldiscovery` event. Chromex discovers their JSON schemas, validates inputs, executes the selected tool, and marks the result as untrusted page output.
|
|
233
|
+
|
|
234
|
+
```bash
|
|
235
|
+
chromex third-party <target> list
|
|
236
|
+
chromex third-party <target> execute inspectState '{"scope":"checkout"}'
|
|
237
|
+
chromex third-party <target> execute inspectState '{"scope":"checkout"}' app-tools --include-sensitive
|
|
238
|
+
```
|
|
239
|
+
|
|
240
|
+
Tool names registered by multiple groups require the group name. Page-provided output must never be treated as trusted instructions.
|
|
241
|
+
|
|
242
|
+
## WebMCP
|
|
243
|
+
|
|
244
|
+
WebMCP requires a compatible visible Chrome build and an isolated browser launched with the feature enabled:
|
|
245
|
+
|
|
246
|
+
```bash
|
|
247
|
+
chromex launch --webmcp --profile webmcp --url https://example.com
|
|
248
|
+
chromex webmcp <target> list
|
|
249
|
+
chromex webmcp <target> execute <toolName> '{"input":"value"}'
|
|
250
|
+
chromex webmcp <target> status
|
|
251
|
+
chromex webmcp <target> cancel <invocationId>
|
|
252
|
+
chromex webmcp <target> disable
|
|
253
|
+
```
|
|
254
|
+
|
|
255
|
+
Use `--frame=<frameId>` when a tool name is registered in more than one frame and `--timeout=<milliseconds>` for long-running calls. Chromex validates the input schema, bounds the timeout, marks the result as untrusted, and redacts secret-shaped output unless `--include-sensitive` is explicit. WebMCP is not supported in headless mode.
|
|
256
|
+
|
|
257
|
+
## WebAuthn / Passkey Testing
|
|
258
|
+
|
|
259
|
+
Create virtual FIDO2 authenticators for testing passkey flows without physical hardware.
|
|
260
|
+
|
|
261
|
+
```bash
|
|
262
|
+
# Enable virtual authenticator
|
|
263
|
+
chromex webauthn <target> enable
|
|
264
|
+
# Output: Virtual authenticator created (id: abc123...). Passkey flows will work automatically.
|
|
265
|
+
|
|
266
|
+
# Navigate to a site with passkey support
|
|
267
|
+
chromex nav <target> "https://webauthn.io"
|
|
268
|
+
|
|
269
|
+
# After registration, list stored credentials
|
|
270
|
+
chromex webauthn <target> creds
|
|
271
|
+
# Output:
|
|
272
|
+
# 1. a3f1c920deadbeef rpId=webauthn.io userHandle=user123
|
|
273
|
+
|
|
274
|
+
# Disable authenticator
|
|
275
|
+
chromex webauthn <target> disable
|
|
276
|
+
```
|
|
277
|
+
|
|
278
|
+
### Features
|
|
279
|
+
|
|
280
|
+
- CTAP2 protocol with internal transport
|
|
281
|
+
- Resident key support (discoverable credentials)
|
|
282
|
+
- User verification automatically simulated
|
|
283
|
+
- Automatic presence simulation (no user interaction needed)
|
|
284
|
+
|
|
285
|
+
### Use Cases
|
|
286
|
+
|
|
287
|
+
```bash
|
|
288
|
+
# Test passkey registration flow
|
|
289
|
+
chromex webauthn <target> enable
|
|
290
|
+
chromex nav <target> "https://example.com/settings/security"
|
|
291
|
+
chromex click <target> ".add-passkey"
|
|
292
|
+
chromex waitfor <target> ".passkey-success"
|
|
293
|
+
chromex webauthn <target> creds
|
|
294
|
+
|
|
295
|
+
# Test passkey login flow
|
|
296
|
+
chromex webauthn <target> enable
|
|
297
|
+
chromex nav <target> "https://example.com/login"
|
|
298
|
+
chromex click <target> ".login-with-passkey"
|
|
299
|
+
chromex waitfor <target> ".dashboard"
|
|
300
|
+
chromex webauthn <target> disable
|
|
301
|
+
```
|