dsh-pickdom 怎么安装？

在已安装 dsh CLI 引擎的环境中，进入插件页复制安装命令一键执行即可；尚未跑自动兼容性验证，可查看页面内的依赖与入口分析。

dsh-pickdom 兼容性怎么样？

尚未跑自动兼容性验证，可查看页面内的依赖与入口分析。

dsh-pickdom 有中文文档吗？

已提供中文翻译 README（由 DeepSeek 最新模型翻译生成），本站可切换中英文对照阅读。

dsh-pickdom 还在维护吗？

GitHub 0 星。最近一次上游提交在 2026/8/23。

元素框选器 xiaobaiyg09/dsh-pickdom

DeepSeek Harness

xiaobaiyg0973 天前有提交已提供中文文档扫描：含敏感能力

在 GitHub 查看 ↗

在侧边栏点选网页元素，把结构化引用直接交给 Agent

26/100

综合分

GitHub 星标

—

npm 周下载

—/5

用户评分

数据截至 2026/10/3 · 周下载取自 npm 全网（含 CI / 镜像），非本站安装数；综合分由星标、活跃度与兼容性检查合成。

安装命令 · 需先装 dsh CLI 引擎

dsh plugin --profile web add xiaobaiyg09/dsh-pickdom

该包不可直接 npm 安装，改从 GitHub 源安装（明细见下方安装检查）

状态速览

判定依据：实装验证 · 静态安装检查 · 自动扫描 · 仓库维护状态

信任档位：待复验

是什么

dsh 原生插件 · ui

装得上吗

曾在 dsh 0.2.0-rc.2 下真实安装成功，但当前 dsh 已更新至 0.2.1-rc.5，本站尚未在新版下复验

L4 · 真实安装等级说明 →

安全吗

本站尚未对该插件做风险分级

暂未覆盖，不等同于无风险

还在维护吗

更新放缓：最近一次提交在 73 天前

档位由哪些信号合成

本站实装验证（真实安装 L4 覆盖全站；L5 为运行时冒烟或实机截图，覆盖范围小于 L4） · 验证所用 dsh 版本 · 静态安装检查 · 风险分级 · 仓库维护状态。下方各区块是它的证据明细。

验证判据与等级说明 →

社区实装还没有人打卡 · 装过的第一个就是你

安全扫描自动 · 静态分析源码

v2.7.0

🔵 扫描：含敏感能力尚无人工评估

展开查看扫描说明与证据 ↓

静态扫描发现插件具备触达本地系统的能力：执行外部命令、读写/删除本地文件、读取剪贴板或密钥类环境变量（至少其一）。这是能力清单，不是危险判定——具体能力项与证据见下方，安装前请自行判断是否需要。

读写/删除本地文件发起外部网络请求

查看扫描证据（共 15 处，展示前 12 条）

写入本地文件
lib/index.js:260
await writeFile(temporary, content, { encoding: 'utf8', mode })
写入本地文件
lib/index.js:261
await rename(temporary, path)
删除本地文件
lib/index.js:263
try { await unlink(temporary) } catch {}
读取本地文件
lib/index.js:294
const bridgeSource = () => (bridgeCache ??= readFile(BRIDGE_PATH, 'utf8'))
读取本地文件
lib/index.js:295
const editorJsSource = () => (editorJsCache ??= readFile(EDITOR_JS_PATH, 'utf8'))
读取本地文件
lib/index.js:296
const editorCssSource = () => (editorCssCache ??= readFile(EDITOR_CSS_PATH, 'utf8'))
读取本地文件
lib/index.js:424
try { [disk, fileInfo] = await Promise.all([readFile(filePath), stat(filePath)]) }
读取本地文件
lib/index.js:424
try { [disk, fileInfo] = await Promise.all([readFile(filePath), stat(filePath)]) }
读取本地文件
lib/index.js:455
try { entryInfo = await stat(entryPath) } catch { writeJson(res, 404, { ok: false, error: { code: 'not-found', message: 'entry path not found' } }); r
发起网络请求
lib/client.js:97
const response = await fetch("/html-picker/api/browser/" + path, { credentials: "same-origin", cache: "no-store", ...(options || {}) });
发起网络请求
lib/client.js:385
fetch(TOKEN_ROUTE, { method: "POST", credentials: "same-origin", cache: "no-store", headers: { "content-type": "application/json" }, body: JSON.string
发起网络请求
lib/client.js:450
fetch("/html-picker/api/save", { method: "POST", credentials: "same-origin", headers: { "content-type": "application/json" }, body: JSON.stringify({ s

扫描于 2026/11/4（0 天前） · 范围入口闭包 + 发布文件清单 · 来源 GitHub 仓库

静态扫描只反映源码中出现的调用，不构成安全背书；人工评估与自动扫描相互独立、互不覆盖。

给这个插件打分还没有人投票↓

用户评分

还没有人投票，来当第一个

广告精选好物

飞利浦 TAH6519 主动降噪耳机 ¥299

头戴式无线 anc 主动降噪，蓝牙连接，久戴舒适向。

·anc 主动降噪 · 头戴式无线
·价格与库存以商品页实时为准

去淘宝看看→

广告MCP 兼容手册

装完插件，给 AI 接上 MCP

Cursor、Claude Code、VS Code 逐个核对：能不能装、配置怎么写、装不上是什么原因。

·按客户端逐格核对
·结论标注依据与风险等级

查 MCP 兼容性→

功能亮点

侧边栏点选网页元素

PickDOM - 在 DSH 中框选本地 HTML 与 Web 页面元素，并将结构化引用交给 Agent

README

由 DeepSeek 最新模型翻译生成

PickDOM 像 Cursor 一样框选元素：你点哪里，Agent 就改哪里。 PickDOM 是 DSH（DeepSeek Harness）侧边栏的双引擎 Browser 插件。本地 HTML 文件与 http/https Web App 都能在侧边栏直接打开，悬停高亮、点击框选，元素的 selector、文字、outerHTML、尺寸与关键样式即刻进入 Agent 对话。给 Agent「指」一个界面元素，从此只需要一次点击。打开页面 → 点框选 → 点元素 → Agent 收到引用 → 改完保存仓库名 dsh-pickdom；npm 包名保持为 dsh-html-picker-preview，安装命令以包名为准。 PickDOM 框选本地 HTML 元素它解决什么问题让 Agent 改前端界面，最贵的环节从来不是写代码，而是「指清楚改哪里」： - 截图标注：Agent 猜位置，猜错一轮重来 - 手写 selector：你得先在 DevTools 里翻半天 DOM - 整页 HTML 粘贴：上下文爆炸，Agent 在噪音里捞针 PickDOM 把「指」压缩成一次点击，而且交给 Agent 的是结构化引用（selector、文字、outerHTML、尺寸、关键样式），不是一张需要猜的图片。

展开完整文档（README 剩余 1 节）

PickDOM

像 Cursor 一样框选元素：你点哪里，Agent 就改哪里。

PickDOM 是 DSH（DeepSeek Harness）侧边栏的双引擎 Browser 插件。本地 HTML 文件与 http/https Web App 都能在侧边栏直接打开，悬停高亮、点击框选，元素的 selector、文字、outerHTML、尺寸与关键样式即刻进入 Agent 对话。给 Agent「指」一个界面元素，从此只需要一次点击。

打开页面 → 点框选 → 点元素 → Agent 收到引用 → 改完保存

仓库名 dsh-pickdom；npm 包名保持为 dsh-html-picker-preview，安装命令以包名为准。

PickDOM 框选本地 HTML 元素

它解决什么问题

让 Agent 改前端界面，最贵的环节从来不是写代码，而是「指清楚改哪里」：

- 截图标注：Agent 猜位置，猜错一轮重来
- 手写 selector：你得先在 DevTools 里翻半天 DOM
- 整页 HTML 粘贴：上下文爆炸，Agent 在噪音里捞针

PickDOM 把「指」压缩成一次点击，而且交给 Agent 的是结构化引用（selector、文字、outerHTML、尺寸、关键样式），不是一张需要猜的图片。

功能演示

像 Cursor 一样框选并发送给 Agent

点击工具栏中的框选按钮进入 Picker 模式，在本地 HTML 或 Web App 中悬停并点击目标元素。

PickDOM 进入类似 Cursor 的元素框选模式

选中后，元素引用会直接进入 Agent 输入框。你可以继续补充「改下布局」、「调整颜色」等要求，再把带有精确 DOM 上下文的指令发送给 Agent。

PickDOM 将框选元素直接发送给 Agent

直接编辑元素文字

进入编辑模式后，点击页面元素即可定位到对应 DOM，并在多行编辑器中修改内容。

PickDOM 编辑元素文字

复制页面元素

选中元素后点击「复制」，PickDOM 会创建副本，并自动重写常见 id、ARIA、表单与 SVG 引用，降低引用冲突风险。

PickDOM 复制元素操作

复制后的元素仍可继续调整尺寸、编辑文字、删除或发送给 Agent。

PickDOM 复制元素结果

双引擎

File Engine · 本地 HTML

在侧边栏打开 .html/.htm 文件，相对路径的 CSS、JS、图片、字体与嵌套 iframe 全部正常解析。除了框选，还能直接改：

- Cursor 风格工具栏：后退、前进、刷新、file:// 地址栏
- 点击选中安全可见元素，父级面包屑切换层级
- 多行文字编辑：普通文本、input、textarea，Cmd/Ctrl+Enter 保存、Esc 取消
- 复制元素：自动重写常见 id、ARIA、表单与 SVG 引用，避免冲突
- 删除元素，支持撤销 / 重做（Cmd/Ctrl+Z、Cmd/Ctrl+Shift+Z）
- 右、下、右下手柄调整宽高，Shift 保持比例
- 从浮动工具栏一键把当前元素发给 Agent
- 保存写回真实 HTML 文件（含嵌套 iframe 对应的文件）
- 离开编辑模式、导航或刷新前检查未保存修改
- 最近打开记录保存在 GUI localStorage

Web App Engine · http/https 地址

地址栏输入 http://localhost:5173、localhost:5173 或 https://example.com 即可打开 Web App。它使用 Electron WebContentsView（原生 Chromium），而不是 iframe 或反向代理：

- 不受目标站点 X-Frame-Options / frame-ancestors 限制
- 页面滚动、输入法、拖拽、WebSocket、Vite HMR 都是原生 Chromium 行为
- 通过 CDP Overlay.setInspectMode 高亮与选择元素
- 元素引用包含 URL、selector、文字、outerHTML、尺寸与关键 computed styles
- 支持连续框选，Esc 或再次点击框选按钮退出
- 独立非持久 partition：DSH 退出后清除该引擎的 Cookie / Storage
- 摄像头、麦克风、定位等权限默认拒绝

快速开始

要求 DSH >=0.1.1-rc.1。

dsh plugin --profile <name> add dsh-html-picker-preview

或手动在 ~/.dsh/profiles/desktop/cordis.patch.yml 追加：

- insert:
- id: html-picker-preview
name: 'dsh-html-picker-preview'
config:
mediaLimit: 33554432
allowOutsideCwd: false
injectBridge: true

更新 Node 宿主路由后需重启 DSH Desktop；仅 client 变化时刷新 GUI 即可。

三种模式

工具栏上三个互斥模式，覆盖「看、指、改」完整链路：

| 模式 | 用途 | 行为 |
| 浏览 | 正常使用页面 | 链接、按钮、表单全部可交互 |
| 框选 | 给 Agent 指元素 | 悬停描边，点击插入引用；保持框选可连续选择，Esc 退出 |
| 编辑 | 直接改本地 HTML | 点击元素出现选择框、面包屑与浮动操作栏 |

安全模型

本地文件读写走短生命周期 capability，而不是裸路径：

- GUI 与预览分源：GUI 在 127.0.0.1 时预览使用 localhost，反之亦然
- 每次打开独立 token：宿主验证会话与 cwd 后签发高熵 token，绑定 session、入口目录、GUI authority 与 preview authority
- 保存 capability：每个 HTML 响应携带 HMAC，绑定 token、session、文件路径与 baseHash；保存时同时校验 capability 与签发它的 GUI authority
- 目录围栏：token 只能读取入口 HTML 所在目录树，借 token 读不到同一 cwd 的其他目录
- 预览页无写权限：预览 origin 不能申请 token，也不能调用保存 API；页面脚本即使看到 path/hash/capability 也无法绕过
- 乐观锁：保存前用 SHA-256 校验磁盘文件，被 Agent 或其他编辑器改动后返回 409，不静默覆盖，也没有 force:true 绕过
- 原子写入：临时文件 + rename 覆盖，保留原文件权限；保存成功返回新的 hash/capability，支持连续保存
- 外部 framing 防护：CSP frame-ancestors 只允许当前 preview origin 与对应 DSH GUI origin

预览使用 allow-same-origin，以兼容复杂本地原型的 localStorage 与同源嵌套 iframe；安全边界由独立回环主机、作用域 token、GUI authority、HMAC 保存 capability、CSP 与路径围栏共同提供。

已知限制

诚实比演示重要，这些是当前版本的真实边界：

- Web App Engine 只提供浏览与框选，不保存运行时 DOM。React/Vue 页面需要后续通过组件源码映射与 HMR 修改源码，运行时 DOM 无法可靠序列化回 JSX/SFC
- WebContentsView 位于 DSH renderer DOM 之上，覆盖页面区域的 DSH 全局弹窗可能被原生网页遮挡；切换 File Engine、关闭 Tab 或卸载插件时会立即隐藏并销毁 surface
- 最多同时创建 3 个 Web App surface
- DOM 序列化保存可能规范化 HTML 格式、实体、标签结构与 doctype；复杂 React/Vue 页面建议先保存静态快照再编辑
- 保存前会明确确认：页面脚本运行后产生的动态 DOM 状态也可能被序列化进文件
- 编辑模式为 MVP：暂无自由拖动、Frame、组件面板、多选对齐、响应式双断点
- 自动锁定 html/head/body/script/style/link/meta/template/noscript；SVG 内部节点只选择完整 SVG，Canvas 只能选择 Canvas 元素；跨域 iframe 只作为 iframe 元素处理，由预览 capability 加载的本地嵌套页面可继续选择和编辑

配置

| 键 | 默认值 | 说明 |
| mediaLimit | 33554432 | 单文件读取与保存上限（字节，默认 32MB） |
| allowOutsideCwd | false | 是否允许访问会话 cwd 外的路径；放开后任何本地文件都可被回环请求读取，属自担选项 |
| injectBridge | true | 是否向 HTML 响应注入 picker/editor 运行时 |

架构

dsh-pickdom/
├── package.json
├── cordis.patch.yml
├── lib/
│ ├── index.js # Node：作用域 token、文件资源、保存 API、Browser API │ ├── browser-surface.js # Electron WebContentsView + CDP Inspect │ ├── bridge.js # picker 与嵌套 iframe 消息桥 │ ├── editor-runtime.js # 选择、文字、复制、尺寸、undo/redo、序列化 │ ├── editor-runtime.css # 选择框、浮动工具栏、尺寸手柄 │ └── client.js # Browser UI、三模式、Agent 引用、保存协调 └── README.md

Browser 通过 dsh-better-sidebar 注册 Tab 和 HTML 文件查看器。Agent 引用使用 DSH inputTriggers / reference codec；不可用时回退为结构化草稿文本。

License

MIT