@narumitw/pi-chrome-devtools 0.1.9 → 0.1.10
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 +40 -11
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,16 +1,29 @@
|
|
|
1
|
-
# pi-chrome-devtools
|
|
1
|
+
# 🌐 pi-chrome-devtools — Chrome DevTools Tools for Pi Agents
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/@narumitw/pi-chrome-devtools) [](https://pi.dev) [](./LICENSE)
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
`@narumitw/pi-chrome-devtools` is a native [Pi coding agent](https://pi.dev) extension that exposes Chrome DevTools Protocol (CDP) automation as Pi tools.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
Use it to let the Pi agent inspect browser tabs, navigate pages, evaluate JavaScript, and capture screenshots while debugging web apps or validating UI behavior.
|
|
8
|
+
|
|
9
|
+
This package is inspired by [`chrome-devtools-mcp`](https://github.com/ChromeDevTools/chrome-devtools-mcp), but it is implemented as native Pi tools instead of an MCP server.
|
|
10
|
+
|
|
11
|
+
## ✨ Features
|
|
12
|
+
|
|
13
|
+
- Lists inspectable Chrome tabs and pages.
|
|
14
|
+
- Selects an active Chrome page for later tool calls.
|
|
15
|
+
- Navigates Chrome to a target URL.
|
|
16
|
+
- Evaluates JavaScript in the selected page.
|
|
17
|
+
- Captures PNG screenshots, including optional full-page screenshots.
|
|
18
|
+
- Uses a local Chrome DevTools Protocol endpoint.
|
|
19
|
+
|
|
20
|
+
## 📦 Install
|
|
8
21
|
|
|
9
22
|
```bash
|
|
10
23
|
pi install npm:@narumitw/pi-chrome-devtools
|
|
11
24
|
```
|
|
12
25
|
|
|
13
|
-
Try without installing:
|
|
26
|
+
Try without installing permanently:
|
|
14
27
|
|
|
15
28
|
```bash
|
|
16
29
|
pi -e npm:@narumitw/pi-chrome-devtools
|
|
@@ -22,7 +35,7 @@ Try this package locally from the repository root:
|
|
|
22
35
|
pi -e ./extensions/pi-chrome-devtools
|
|
23
36
|
```
|
|
24
37
|
|
|
25
|
-
## Start Chrome with CDP enabled
|
|
38
|
+
## 🚀 Start Chrome with CDP enabled
|
|
26
39
|
|
|
27
40
|
The extension connects to `127.0.0.1:9222` by default.
|
|
28
41
|
|
|
@@ -44,7 +57,7 @@ Override the endpoint if needed:
|
|
|
44
57
|
PI_CHROME_DEVTOOLS_HOST=127.0.0.1 PI_CHROME_DEVTOOLS_PORT=9223 pi -e ./extensions/pi-chrome-devtools
|
|
45
58
|
```
|
|
46
59
|
|
|
47
|
-
##
|
|
60
|
+
## 🛠️ Pi tools
|
|
48
61
|
|
|
49
62
|
- `chrome_devtools_list_pages` — list inspectable Chrome tabs/pages.
|
|
50
63
|
- `chrome_devtools_select_page` — select the active page for later tool calls.
|
|
@@ -52,15 +65,23 @@ PI_CHROME_DEVTOOLS_HOST=127.0.0.1 PI_CHROME_DEVTOOLS_PORT=9223 pi -e ./extension
|
|
|
52
65
|
- `chrome_devtools_evaluate` — evaluate JavaScript in the selected page.
|
|
53
66
|
- `chrome_devtools_screenshot` — capture a PNG screenshot.
|
|
54
67
|
|
|
55
|
-
## Command
|
|
68
|
+
## 💬 Command
|
|
56
69
|
|
|
57
70
|
```text
|
|
58
71
|
/chrome-devtools
|
|
59
72
|
```
|
|
60
73
|
|
|
61
|
-
Shows the configured CDP endpoint and quick
|
|
74
|
+
Shows the configured CDP endpoint and a quick-start hint.
|
|
75
|
+
|
|
76
|
+
## 🧠 Use cases
|
|
62
77
|
|
|
63
|
-
|
|
78
|
+
- Debug front-end applications with an AI coding agent.
|
|
79
|
+
- Verify DOM state after code changes.
|
|
80
|
+
- Capture screenshots for visual inspection.
|
|
81
|
+
- Drive local browser workflows without a separate MCP server.
|
|
82
|
+
- Combine with Pi coding tools for end-to-end web app fixes.
|
|
83
|
+
|
|
84
|
+
## 🗂️ Package layout
|
|
64
85
|
|
|
65
86
|
```txt
|
|
66
87
|
extensions/pi-chrome-devtools/
|
|
@@ -72,7 +93,7 @@ extensions/pi-chrome-devtools/
|
|
|
72
93
|
└── package.json
|
|
73
94
|
```
|
|
74
95
|
|
|
75
|
-
The package exposes its extension through `package.json`:
|
|
96
|
+
The package exposes its Pi extension through `package.json`:
|
|
76
97
|
|
|
77
98
|
```json
|
|
78
99
|
{
|
|
@@ -81,3 +102,11 @@ The package exposes its extension through `package.json`:
|
|
|
81
102
|
}
|
|
82
103
|
}
|
|
83
104
|
```
|
|
105
|
+
|
|
106
|
+
## 🔎 Keywords
|
|
107
|
+
|
|
108
|
+
Pi extension, Pi coding agent, Chrome DevTools Protocol, CDP, browser automation, web debugging, JavaScript evaluation, screenshot automation, AI coding agent tools.
|
|
109
|
+
|
|
110
|
+
## 📄 License
|
|
111
|
+
|
|
112
|
+
MIT. See [`LICENSE`](./LICENSE).
|