# Claude Code Chrome 教程：实测拖拽图片排序与刷新后顺序保留

## 身份和范围

本站原创 fixture 与人工参考；实际运行：真实拖拽事件与刷新后的 DOM/存储。目标代理模型、账号会话、付费 API、第三方 PR、推送和发布均未执行。公开包不含 .env；需要时仅在自己的临时练习目录从文本模板创建。

## 本地命令

```sh
python3 -m http.server 4384 --bind 127.0.0.1
```

## 七步原生操作

### 1. 打开六卡本地练习页

在解压目录运行 python3 -m http.server 4384 --bind 127.0.0.1，访问 app.html?mode=broken。六张 P1–P6 SVG 均为本站原创编号图；页面直接显示 DOM 顺序和 localStorage 中的顺序。

### 2. 核对 Chrome 原生集成门槛

Claude Code 的 Chrome 集成需要支持的 Chromium 浏览器与 Claude in Chrome 扩展，当前文档要求扩展至少 1.0.36 和直接订阅登录。API key、setup-token 或第三方供应商不等价，WSL 也不能假定可用。

### 3. 让原生浏览器执行一次真实拖拽

在已连接的 Claude Code Chrome 会话中要求把 P6 拖到 P2 前，读取卡片 data-id，而不是只看图片位置。让代理使用真实页面交互；若目标拖拽做不到，记录能力边界，不用注入 JS 直接改数组伪造操作。

### 4. 刷新并记录错误样稿丢失顺序

拖动后应该是 P1/P6/P2/P3/P4/P5。刷新 broken 模式，DOM 会回到初始顺序，而存储仍保留新顺序，说明错误发生在恢复阶段；保存刷新前后的真实浏览器截图。

### 5. 只修加载与稳定 ID 恢复

切到 app.html?mode=fixed，检查首次加载从 photo-order 回读稳定 ID，drop 时写入同一键。不要按数组下标替代 ID，也不要通过每次随机重排让截图看起来变化。

### 6. 重复拖拽并刷新验收

在 fixed 模式重新拖动 P6 到 P2 前，刷新后读取实际 DOM 与存储，两边都必须保留目标顺序。本站使用 Playwright 的真实拖拽事件运行参考页，并记录 dragstart/drop，而没有运行 Claude Chrome 会话。

### 7. 保留两类执行证据

把自己的 Claude 会话/GIF 与本站 browser-result.json 分开放；前者证明产品实际操作，后者只证明原创练习页和修复参考。不要以平台连接成功替代拖拽与持久化验收。

## 验收产物

真实浏览器拖拽、刷新、回读顺序的操作记录；修复前后卡片 ID 顺序证据与复现步骤；必要时记录浏览器能力边界

## 门槛

- Chrome/Edge 等 Chromium 浏览器及 Claude in Chrome 扩展 >=1.0.36；以实际文档支持为准。
- 当前直接集成要求 Claude 订阅账号 Pro/Max/Team/Enterprise 登录；API key、setup-token 或第三方供应商不等价，WSL 不支持。
- 只在本地虚构页面操作；若原生浏览器不能完成目标拖拽，明确记录失败，不通过注入 JS 伪造拖拽成功。

## 官方来源

- https://code.claude.com/docs/en/chrome

静态配图冻结于本次输入。修改输入需重新运行并自行重渲染；不把旧截图当新结果。

## 可重复的浏览器检查

需 Node >=24。运行 `npm ci`，若缺少 Chromium，再按 Playwright 提示安装浏览器，然后 `npm run check`。只启动本地练习 HTTP 服务，不连接任何模型或账号。PDF 页数/中文需结合包内原生 PDF 逐页人工看。