Introduction

When DSH’s Agent modifies a front-end interface, the most time-consuming step is usually “pointing out exactly where to change”: screenshot annotations can be ambiguous, hand-written selectors require digging through DevTools, and pasting an entire page of HTML can cause context explosion. PickDOM compresses this process into a single click and passes structured references (selector, text, outerHTML, dimensions, and key styles) directly into the Agent conversation.

What Is This

PickDOM is a dual-engine Browser plugin for the DSH (DeepSeek Harness) sidebar, maintained by user xiaobaiyg09. It supports opening local HTML files and http/https Web Apps directly in the sidebar, using hover highlighting and click selection to give the Agent precise element references.

Core Features

  1. Selection and Highlighting
    Hover over a target element in local HTML or a Web App and click to select it. The toolbar provides back, forward, and refresh actions; it supports clicking to select safe visible elements and switching hierarchy levels using parent breadcrumbs.

  2. Agent References
    After selecting an element, its selector, text, outerHTML, dimensions, and key computed styles are immediately added to the Agent conversation. You can also send the current element to the Agent with one click from the floating toolbar.

  3. Editing and Operations
    - Multi-line editing: supports plain text, input, and textarea; click an element to edit it in a multi-line editor, save with Cmd/Ctrl+Enter, and cancel with Esc.
    - Element duplication: automatically rewrites common id, ARIA, form, and SVG references to reduce conflict risks.
    - Delete and undo: supports deleting elements and undo/redo operations.
    - Size adjustment: adjust width and height using right, bottom, and bottom-right handles; hold Shift to maintain proportions.

  4. Dual-Engine Support
    - File Engine: supports local .html/.htm files, correctly resolves relative-path resources, supports nested iframes, and can save back to the real file.
    - Web App Engine: supports http/https addresses, uses Electron WebContentsView, is not restricted by the target site’s X-Frame-Options, and supports CDP highlighting and selection.

Installation and Enablement

This plugin requires DSH version >=0.1.1-rc.1.

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

Typical Usage

  1. Open the page.
  2. Click the picker button in the toolbar to enter Picker mode.
  3. Hover over and click the target element in local HTML or a Web App.
  4. After the Agent receives the reference, continue by adding instructions (such as “change the layout” or “adjust the color”) and send them.
  5. Save when the modifications are complete.

Use Cases and Considerations

PickDOM is suitable for scenarios that require using an Agent to quickly locate and modify front-end interfaces. When using it, note the following limitations:

  • Web App Engine limitations: this engine only provides browsing and selection; it does not save runtime DOM. React/Vue pages need source code modifications through component source mapping and HMR, because runtime DOM cannot be serialized reliably.
  • Security and permissions: the preview page has no write permissions; file integrity (SHA-256) is verified before saving. If the file is modified by the Agent or another editor, a 409 error is returned.
  • Concurrency limit: a maximum of 3 Web App surfaces can be created simultaneously.
  • Security model: local file read and write operations are protected by short-lived capabilities; the preview page has no save API, preventing permission bypass.

Conclusion

By combining interface interaction with Agent instructions, PickDOM solves the context noise problem when an Agent redesigns front-end code. To learn more or contribute code, refer to its catalog page or GitHub repository.