65 lines
3.2 KiB
Markdown
65 lines
3.2 KiB
Markdown
|
# 元素路径拾取器 · 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/` 点本扩展卡片上的刷新（⟳）按钮，再刷新页面。不需要重新「加载已解压的扩展程序」。
|