# 元素路径拾取器 · Chrome 扩展

在每个网页上点选元素，把它的 CSS 选择器和页面地址复制到剪贴板 —— 粘进 AI 对话框里就能精确改样式。

拾取器会**自动注入到所有页面**（默认不激活，页面右下角有一个半透明小胶囊），所以打开新页面就能直接用，不用先点扩展图标。

## 安装

1、在 Chrome 地址栏输入 `chrome://extensions/` 回车。

2、打开右上角的「开发者模式」开关。

3、点左上角「加载已解压的扩展程序」，选中本目录（`chrome-extension`），确定。

装完工具栏上会出现一个扩展图标（灰块，因为没配图标）。要固定到工具栏：点浏览器右上角的拼图图标 → 在本扩展右侧点图钉。

## 用法

1、打开任意网页，页面右下角会有一个半透明的小胶囊（鼠标移上去变清晰）—— 这就是拾取器，已经在了。

2、按 `Z` 键，或点那个胶囊上的「开启」，或点扩展图标，或按 `Alt+Shift+Z` —— 任选一种进入拾取模式，胶囊上的圆点变绿、文字变「拾取中」。

3、鼠标划过元素出现蓝框、框上方显示路径；点一下要改的元素，弹出确认窗。

4、确认窗里有三行信息：元素标签、选择器、网页（下面还有一行元素文本，只给你核对点对没有，不进剪贴板）。

5、点「确认」—— 剪贴板里就是两行：

```
选择器：main#view > section.detail-card > button.primary:nth-of-type(2)
网页：短视频工作台
```

粘进对话框，再补一句要改成什么即可。想连着点几处就一直点，「确认」之后窗自己关，拾取模式仍然开着。

## 关闭

- 按 `Esc`：有弹窗先关弹窗，没弹窗就退出拾取模式。
- 也可以再按一次 `Z`，或点胶囊上的「关闭」，或再点一次扩展图标。

## 改快捷键

`chrome://extensions/shortcuts` 里找到本扩展，给「进/出元素拾取模式」换一个顺手的组合键。

## 可选：本地存档服务

每次点「确认」时，扩展会顺带把一条完整上下文（选择器、祖先路径、class、属性、尺寸、关键计算样式、HTML 片段）POST 到 `http://127.0.0.1:8890/mark`，落到本工具目录下的 `marks/_ui-marks.json`。

这个服务是上一层目录里的 `ui-picker-server.js`，起法（在本目录下执行）：

```
node ../ui-picker-server.js 8890
```

没起也不影响使用 —— 复制功能完全独立，只是少一份存档。

## 已知边界

- `chrome://` 开头、Chrome 应用商店、以及其它浏览器内部页面不允许扩展注入，在这些页面上按 `Z` 不会有反应。
- 因为要注入到每个页面，安装/更新后 Chrome 会提示本扩展可以「读取和更改您在所有网站上的数据」—— 它只在本地读写一个 shadow DOM 浮层与剪贴板，不上传任何内容。
- 复制走系统剪贴板接口，失败时自动退到备用方式；若两条都失败，弹窗里会直接把内容显示出来，手动选中复制即可。

## 改了代码怎么生效

改完本目录里的文件后：在 `chrome://extensions/` 点本扩展卡片上的刷新（⟳）按钮，再刷新页面。不需要重新「加载已解压的扩展程序」。