mirror of
https://github.com/garrytan/gstack.git
synced 2026-05-16 09:12:13 +08:00
803bee9cfe
New skill that runs $B connect, verifies the connection, guides the user to open the Side Panel, and demos the live activity feed. Extension auto-loads via --load-extension so no manual chrome://extensions install needed. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
123 lines
3.8 KiB
Cheetah
123 lines
3.8 KiB
Cheetah
---
|
|
name: connect-chrome
|
|
version: 0.1.0
|
|
description: |
|
|
Launch real Chrome controlled by gstack with the Side Panel extension auto-loaded.
|
|
One command: connects Claude to a visible Chrome window where you can watch every
|
|
action in real time. The extension shows a live activity feed in the Side Panel.
|
|
Use when asked to "connect chrome", "open chrome", "real browser", "launch chrome",
|
|
"side panel", or "control my browser".
|
|
allowed-tools:
|
|
- Bash
|
|
- Read
|
|
- AskUserQuestion
|
|
|
|
---
|
|
|
|
{{PREAMBLE}}
|
|
|
|
# /connect-chrome — Launch Real Chrome with Side Panel
|
|
|
|
Connect Claude to a visible Chrome window with the gstack extension auto-loaded.
|
|
You see every click, every navigation, every action in real time.
|
|
|
|
{{BROWSE_SETUP}}
|
|
|
|
## Step 1: Connect
|
|
|
|
```bash
|
|
$B connect
|
|
```
|
|
|
|
This launches your system Chrome via Playwright with:
|
|
- A visible window (headed mode, not headless)
|
|
- The gstack Chrome extension pre-loaded
|
|
- A green shimmer line + "gstack" pill so you know which window is controlled
|
|
|
|
If Chrome is already running, the server restarts in headed mode with a fresh
|
|
Chrome instance. Your regular Chrome stays untouched.
|
|
|
|
After connecting, print the output to the user.
|
|
|
|
## Step 2: Verify
|
|
|
|
```bash
|
|
$B status
|
|
```
|
|
|
|
Confirm the output shows `Mode: cdp`. Print the port number — the user may need
|
|
it for the Side Panel.
|
|
|
|
## Step 3: Guide the user to the Side Panel
|
|
|
|
Use AskUserQuestion:
|
|
|
|
> Chrome is launched with gstack control. You should see a green shimmer line at the
|
|
> top of the Chrome window and a small "gstack" pill in the bottom-right corner.
|
|
>
|
|
> The Side Panel extension is pre-loaded. To open it:
|
|
> 1. Look for the **puzzle piece icon** (Extensions) in Chrome's toolbar
|
|
> 2. Click it → find **gstack browse** → click the **pin icon** to pin it
|
|
> 3. Click the **gstack icon** in the toolbar
|
|
> 4. Click **Open Side Panel**
|
|
>
|
|
> The Side Panel shows a live feed of every browse command in real time.
|
|
>
|
|
> **Port:** The browse server is on port {PORT} — the extension auto-detects it
|
|
> if you're using the Playwright-controlled Chrome. If the badge stays gray, click
|
|
> the gstack icon and enter port {PORT} manually.
|
|
|
|
Options:
|
|
- A) I can see the Side Panel — let's go!
|
|
- B) I can see Chrome but can't find the extension
|
|
- C) Something went wrong
|
|
|
|
If B: Tell the user:
|
|
> The extension should be auto-loaded, but Chrome sometimes doesn't show it
|
|
> immediately. Try:
|
|
> 1. Type `chrome://extensions` in the address bar
|
|
> 2. Look for "gstack browse" — it should be listed and enabled
|
|
> 3. If not listed, click "Load unpacked" → navigate to the extension folder
|
|
> (press Cmd+Shift+G in the file picker, paste this path):
|
|
> `{EXTENSION_PATH}`
|
|
>
|
|
> Then pin it from the puzzle piece icon and open the Side Panel.
|
|
|
|
If C: Run `$B status` and show the output. Check if the server is healthy.
|
|
|
|
## Step 4: Demo
|
|
|
|
After the user confirms the Side Panel is working, run a quick demo so they
|
|
can see the activity feed in action:
|
|
|
|
```bash
|
|
$B goto https://news.ycombinator.com
|
|
```
|
|
|
|
Wait 2 seconds, then:
|
|
|
|
```bash
|
|
$B snapshot -i
|
|
```
|
|
|
|
Tell the user: "Check the Side Panel — you should see the `goto` and `snapshot`
|
|
commands appear in the activity feed. Every command Claude runs will show up here
|
|
in real time."
|
|
|
|
## Step 5: What's next
|
|
|
|
Tell the user:
|
|
|
|
> You're all set! Chrome is under Claude's control with the Side Panel showing
|
|
> live activity. Here's what you can do:
|
|
>
|
|
> - **Run any browse command** — `$B goto`, `$B click`, `$B snapshot` — and
|
|
> watch it happen in Chrome + the Side Panel
|
|
> - **Use /qa or /design-review** — they'll run in the visible Chrome window
|
|
> instead of headless. No cookie import needed.
|
|
> - **`$B focus`** — bring Chrome to the foreground anytime
|
|
> - **`$B disconnect`** — return to headless mode when done
|
|
|
|
Then proceed with whatever the user asked to do. If they didn't specify a task,
|
|
ask what they'd like to test or browse.
|