dsh-visual-annotator: Let DeepSeek Harness Understand the Web Elements You See

What Does It Do?

It is a DSH plugin for DeepSeek Harness that lets you pick, annotate, comment on and screenshot elements of a real Chrome/Edge page, then hand the element locators plus your comments and screenshots to the agent. It solves the problem of the agent not seeing the page you are actually looking at: you point at a target element and write your change request, and the agent edits the frontend against the page as you see it. Maintained by ZhongqiXiao under the MIT license, written in JavaScript and last updated on 2026-11-05.

Core Features

• Element picking layer: hover highlighting and click-to-pick, injected into the page via Shadow DOM so page styles stay untouched.
• Element-level capture: a unique CSS selector per element plus page URL, viewport coordinates and size, text excerpt and element screenshot.
• Comments and reference chips: attach a comment to each picked element and insert a real composer chip ("标注 #pN") into the DSH GUI input; on submit it expands into a full locator block with selector, URL, coordinates, comment and screenshot path, falling back to plain text when the chip pipeline is unavailable.
• Browser takeover: launches Chrome/Edge with a dedicated profile and takes over an existing instance instead of opening a duplicate window, with a live tab list for switching tabs in the same window.
• Screenshot pipeline: element screenshots are stored locally and inserted as real image attachments in the composer.
• Agent-side read tool: registers a tool with the agent that returns one annotation by id or all current annotations with full details.

How to Use This Plugin?

After enabling it in DSH Desktop, open the element annotation panel in the right sidebar of the GUI, enter an address and start debugging in Chrome; the plugin opens a real Chrome window or takes over an existing instance. Turn on picking mode, hover to highlight and click to pick an element, write a comment and insert the reference, and a reference chip plus the element screenshot attachment appear in the input box. Submit the conversation as usual; the agent receives the "标注 #pN" reference, calls the read tool for the full locator context and then edits the frontend code against the page. Running it requires Node.js 22 or newer, the web client platform of DSH Desktop, and Chrome or Edge installed locally.

How to Troubleshoot This Plugin?

If the element annotation panel does not appear in the right sidebar after enabling, the plugin is not active; follow the official instructions to confirm it is in the profile's enabled list, then restart DSH Desktop. If the reference chip does not show up, the chip pipeline is usually unavailable and the plugin falls back to plain-text insertion, so the annotation can still be submitted normally.