前言¶

在调试或操作浏览器页面时，如果需要让模型理解某个具体控件的位置、样式或结构，通常只能截图或口头描述。这种方式效率低且容易产生歧义。

DeepSeek Harness 提供了插件化架构，dsh-element-context 作为一个常规 Cordis 插件，解决了这个问题。它允许在对话中直接点选 UI 元素，将选择器、源码位置、盒模型与计算样式结构化地注入模型上下文，省去了手动描述的步骤。

基础信息¶

该插件由 longhao666666 维护，采用 MIT 许可证。它不依赖编译、Token 或 API Key，也不需要额外服务，纯 JS 源码直接加载。

环境要求：
- Windows 系统
- 已安装 DeepSeek Harness 桌面版，且至少启动过一次（开发基于 0.2.0-rc.2 验证）

核心功能¶

1. 鼠标点选：点击输入框上方的「点选元素」，在右侧浏览器页面点击目标控件即可关联。支持连续拾取，按 Esc 结束。
2. 手动关联：在输入框填写 CSS 选择器（如 #submit-btn）或源码位置（文件:行号），适用于 hover 才出现的元素。
3. 结构化注入：关联元素以 <target_ui_element>（单个）或 <target_ui_elements count=N>（多个）的形式进入系统提示词。
4. 元素画像：包含源码位置（data-loc）、选择器、标签/ID/Class/Role、文本内容、页面 URL、视口矩形、盒模型及关键计算样式。
5. Chip 管理：已关联元素显示为「UI 上下文」chip 列表，支持单个移除或一键清空。上限 32 个（每个元素每轮约占 400 token，建议用完就删）。
6. 沙箱友好：点选探针通过 executeJavaScript 注入，不影响页面自身的沙箱环境。

安装与启用¶

使用官方提供的一键脚本安装。脚本会自动检测 DSH、建立 node_modules/@local 链接并写入配置。

git clone https://github.com/longhao666666/dsh-element-context.git
cd dsh-element-context
powershell -ExecutionPolicy Bypass -File .\install.ps1

安装完成后重启 DeepSeek Harness，在「插件管理」页确认 @local/dsh-element-context 已启用。

使用步骤¶

1. 打开一个带侧栏浏览器页面的会话（建议使用「操作」类预设）。
2. 点击输入框上方的「点选元素」，状态栏会提示「在右侧浏览器页面里点击目标控件，可连续拾取多个；Esc 结束」。
3. 在右侧页面上点击目标控件，元素随即出现在「UI 上下文」chip 列表中。
4. 正常发送消息，模型每轮都会收到这些元素的完整上下文。
5. 不再需要时，点 chip 上的移除按钮或「清空」，以节省 token。

注意事项¶

• Token 消耗：每个元素每轮约占 400 token，建议在用完 32 个上限前及时清理。
• 沙箱限制：虽然探针通过 executeJavaScript 注入，但页面自身的沙箱隔离机制不受影响。
• 权限运行：插件以当前 DSH 进程权限运行，安装前建议检查源码与许可证。

总结¶

通过直接将 UI 元素的结构化信息注入上下文，该插件让模型能够精准理解页面布局与控件细节，适用于需要精细操作的 Web 自动化或调试场景。

插件目录：https://www.skillhub.cn/plugins/longhao666666/dsh-element-context
源码地址：https://github.com/longhao666666/dsh-element-context