# playwright-cdp-attach

**Repository Path**: Darchrow-Mu/playwright-cdp-attach

## Basic Information

- **Project Name**: playwright-cdp-attach
- **Description**: Claude Code skill: 复用用户已登录 Chrome 的浏览器状态(cookie/session/localStorage),避免重新登录。基于 Python Playwright + connect_over_cdp。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-14
- **Last Updated**: 2026-06-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# playwright-cdp-attach

> Claude Code skill:复用用户已登录 Chrome 的浏览器状态(cookie / session / localStorage / extension 等),避免每次重新登录。

基于 Python Playwright + `connect_over_cdp`,attach 到用户已打开的 Chrome 复用所有浏览器状态。

## 适用场景

任何需要登录态的网页操作:

- 抓数据 / 抓邮件 / 抓 Notion
- 看后台 / 平台后台
- E2E 测试
- 对比账单 / 对比平台

## 不适用

- 需要全新 / 隔离 / 隐身 session
- 测试登录流程本身
- 无头 CI 环境

## 安装

### 1. 装到 Claude Code

把 `SKILL.md` 软链到 `~/.claude/skills/playwright-cdp-attach/SKILL.md`(或直接复制整个目录)。

### 2. Chrome 启 debug 模式

```bash
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222 \
  --user-data-dir=/Users/$USER/Library/Application\ Support/Google/Chrome \
  > /tmp/chrome-debug.log 2>&1 &
```

验证:

```bash
lsof -i :9222                                  # 应看到 LISTEN
curl -s http://localhost:9222/json/version     # 应返回 Chrome 版本
```

### 3. 用户在 Chrome 手动登录目标站

```bash
python3 scripts/cdp_browser.py list
```

应能看到目标站 tab(如 `platform.minimaxi.com`)。

### 4. 安装 Playwright

```bash
pip install playwright && python3 -m playwright install chromium
```

## 用法

### 方式 A — 直接 inline(自包含,无需 skill 目录)

参考 `SKILL.md` 的 "工作流程 → 4. 调用核心函数 → 方式 A"。

### 方式 B — 引用 skill 自带脚本

```python
import sys
sys.path.insert(0, "/path/to/playwright-cdp-attach/scripts")
from cdp_browser import with_attached_page

def get_text(page, browser):
    page.goto("https://example.com/dashboard", timeout=30000)
    page.wait_for_load_state("networkidle", timeout=15000)
    return page.locator("body").inner_text()

print(with_attached_page("example.com", get_text)[:2000])
```

## 为什么不直接用 Playwright MCP

`@playwright/mcp` 的 `--cdp-endpoint` 模式虽然连到用户 Chrome,但创建的 page 是**新 browsing context**(无 cookie 继承),结果 `browser_navigate` 经常被踢回登录页。

本 skill 用 Python `connect_over_cdp` + `browser.contexts[0].pages` 才能 attach 到**用户已有的 context**,cookie 自动共享。

## 评估

`skill-evaluator` 评分:**94/100**(全库第 1 名)

| 维度 | 分 |
|---|---|
| 触发精准度 | 15/15 |
| 解释质量 | 15/15 |
| 流程完备性 | 15/15 |
| 复用逻辑 | 10/10 |
| 泛化能力 | 10/10 |
| 输出可验证性 | 8/10 |
| 渐进式加载 | 9/10 |
| 文档完整性 | 12/15 |

## 目录结构

```
playwright-cdp-attach/
├── README.md           # 本文件
├── SKILL.md            # Claude Code skill 描述(主入口)
└── scripts/
    └── cdp_browser.py  # with_attached_page + list_tabs
```

## License

MIT