dsh-element-context: Selecting UI elements in a conversation and injecting them into the model context

Introduction

When debugging or operating a browser page, if a model needs to understand the position, style, or structure of a specific control, the usual options are limited to taking a screenshot or describing it verbally. This approach is inefficient and prone to ambiguity.

DeepSeek Harness provides a plugin architecture. As a standard Cordis plugin, dsh-element-context solves this problem. It allows you to directly click and select UI elements during a conversation, and injects the selector, source location, box model, and computed styles into the model context in a structured way, eliminating the need for manual description.

Basic Information

This plugin is maintained by longhao666666 and is licensed under the MIT License. It does not require compilation, Tokens, or an API Key, and does not need any additional service. The pure JavaScript source is loaded directly.

Environment requirements:
- Windows operating system
- DeepSeek Harness desktop version is installed and has been launched at least once (development was verified based on 0.2.0-rc.2)

Core Features

  1. Mouse picking: Click “Pick Element” above the input box, then click the target control in the browser page on the right to associate it. Continuous picking is supported; press Esc to finish.
  2. Manual association: Fill in a CSS selector in the input box (for example, #submit-btn) or a source location (file:line), which is suitable for elements that only appear on hover.
  3. Structured injection: Associated elements enter the system prompt in the form of <target_ui_element> (single) or <target_ui_elements count=N> (multiple).
  4. Element profile: Includes source location (data-loc), selector, tag/ID/Class/Role, text content, page URL, viewport rectangle, box model, and key computed styles.
  5. Chip management: Associated elements are displayed as a “UI Context” chip list, supporting individual removal or clearing all at once. The limit is 32 elements (each element uses approximately 400 tokens per turn, so it is recommended to remove them after use).
  6. Sandbox-friendly: The picking probe is injected through executeJavaScript and does not affect the page’s own sandbox environment.

Installation and Activation

Install using the official one-click script. The script automatically detects DSH, creates the node_modules/@local link, and writes the configuration.

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

After installation, restart DeepSeek Harness and confirm that @local/dsh-element-context is enabled on the “Plugin Management” page.

Usage Steps

  1. Open a session with a sidebar browser page (using an “Action”-type preset is recommended).
  2. Click “Pick Element” above the input box. The status bar will display: “Click the target control in the browser page on the right; you can pick multiple items in sequence; press Esc to finish.”
  3. Click the target control in the page on the right. The element will immediately appear in the “UI Context” chip list.
  4. Send your message as usual. The model will receive the full context of these elements in every turn.
  5. When they are no longer needed, click the remove button on the chip or “Clear” to save tokens.

Notes

  • Token consumption: Each element uses approximately 400 tokens per turn. It is recommended to clean up the elements promptly before reaching the limit of 32.
  • Sandbox restrictions: Although the probe is injected through executeJavaScript, the page’s own sandbox isolation mechanism is not affected.
  • Permission level: The plugin runs with the permissions of the current DSH process. It is recommended to review the source code and license before installation.

Summary

By directly injecting structured information about UI elements into the context, this plugin enables the model to accurately understand page layout and control details. It is suitable for Web automation or debugging scenarios that require precise operations.

Plugin directory: https://www.skillhub.cn/plugins/longhao666666/dsh-element-context
Source code: https://github.com/longhao666666/dsh-element-context

羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

Xiaoye