BrambleXu/dsh-annotate

Visual browser element annotation for DeepSeek Harness, capturing DOM, styles, accessibility data, comments, a

dsh-annotate lets you point at browser elements and send structured facts to the DSH agent. Invoke /annotate or /annotate <url>, click elements in Chrome/Chromium through the companion extension, and each selection sends the agent a package of CSS selector, DOM properties, computed styles, accessibility data, your comment, and an optional viewport screenshot — precise context instead of vague text descriptions.

Web UI Enhancements ★ 6 updated 2026-08-14 ⚠️ needs adapt
View on GitHub ↗

Install

git clone https://github.com/BrambleXu/dsh-annotate && dsh plugin --profile demo add ./dsh-annotate

No npm package — install from a local clone: git clone https://github.com/BrambleXu/dsh-annotate then dsh plugin --profile demo add ./dsh-annotate. Also install the companion Chrome extension: open chrome://extensions, enable Developer mode, click Load unpacked, and select the browser-extension directory. For tighter authorization, copy the extension ID from the popup into allowedExtensionId in a Harness patch layer. Requires Node.js ^22.19 or >=24, TypeScript 5.9 build toolchain.

Compatibility

DeepSeek Harness web profile (any recent 0.1.x). Requires Chrome or Chromium with the companion browser extension installed. Node.js ^22.19 || >=24. Communication via local loopback WebSocket bridge; optional extension-ID allowlist for security.

Details

Recent updates

The current README documents: /annotate and /annotate <url> commands, Chrome/Chromium companion extension setup, loopback WebSocket bridge, optional extension-ID security check, TypeScript 5.9 build stack, Vitest tests, and MIT license.

FAQ

Do I need the browser extension to use dsh-annotate?
Yes — the DSH plugin runs the server side (host plugin), and the companion Chrome/Chromium extension drives element selection. Both must be installed. The extension communicates over a local loopback WebSocket so no network traffic leaves your machine.
What data does /annotate send to the agent?
For each element you click, the plugin sends: the CSS selector, DOM property snapshot, computed-style highlights, accessibility tree data, your comment, and optionally a full viewport screenshot. You can submit multiple selected elements in one annotation batch.
Can I restrict which browser connections are allowed?
Yes — copy the extension ID shown in the browser extension popup into allowedExtensionId in a Harness patch layer. The plugin also enforces loopback-host and origin checks by default.

Alternatives

omdsh-dev/dsh-open-in-vscode · leemancheung/dsh-task-dag

More plugins in Web UI Enhancements

Browse more in Web UI Enhancements

Guides for Web UI Enhancements plugins