Preface¶

The hardest part of getting an AI agent to modify a webpage is often not writing CSS, but clearly describing the problem. Common phrases in conversations are “this button is off-center”, “the title color is wrong”, or “things are cramped together on mobile”. The model only sees text, and cannot tell which DOM node you are referring to, what the actual computed styles are, or what its role is in the accessibility tree. Even if you paste in a screenshot, all you get is pixels—you still have to dictate the selectors and layout data manually.

DeepSeek Harness (command name dsh) splits the agent runtime into composable plugins: models, tools, sessions, sandboxes, and interfaces can all be added or removed on the Cordis kernel. The official repository summarizes this as Everything is a plugin. As a result, a number of interface enhancement plugins have emerged in the community, specifically to fill the gap of “how humans pass visual information to agents”.

dsh-annotate does exactly this: it lets you click page elements in Chrome / Chromium, then compiles selectors, DOM facts, computed styles, accessibility data, comments, and a current viewport screenshot into a structured record that the agent can directly read in the next conversation round. It is maintained by BrambleXu, and is listed under “Interface Enhancements” in the community directory.

First, a clarification: the directory pages referenced below come from the independent community site DeepSeek Harness Plugin Library. The About page of this site clearly states that it has no official affiliation with DeepSeek / Hunyuan, and should not be treated as an official app store. The official repository is deepseek-ai/deepseek-harness. This article was cross-checked against the directory details page, GitHub README / package.json / src/ and the accompanying extension source code, with a verification date of 2026-08-18.

What It Is¶

dsh-annotate is a DeepSeek Harness browser element visual annotation plugin. Its positioning on both the directory page and the repository README is consistent: capture DOM, styles, accessibility data, comments, and viewport screenshots to organize page structure into visual records that agents can reference and annotate.

The repository is hosted at BrambleXu/dsh-annotate, with the MIT license (consistent across the directory page, GitHub license field, and the repository’s LICENSE file). The primary language is TypeScript. The version in package.json is 0.1.0, and it requires Node.js ^22.19.0 || >=24.0.0. As of 2026-08-18, GitHub shows 6 stars; the community directory page listed 5 stars at the time, so star counts should be referenced from the repository page.

This is not a standalone screenshot tool or a general-purpose web crawler. The plugin registers an /annotate command in the dsh process and opens a WebSocket on the local loopback. The accompanying Chrome extension must connect to this bridge before entering selection mode. The README states that the interaction was inspired by pi-annotate, but the implementation uses Harness’s human-command, attachment, and Agent API, with a small loopback WebSocket instead of a native-messaging host.

Core Features¶

Click to Select on the Page Instead of Describing Verbally¶

With the extension connected, run /annotate in the session, and the extension will enter selection mode on the currently active tab. Moving the mouse over an element will draw a highlight box; clicking will bring up a comment input field. You can select multiple elements in sequence, then click Submit to submit everything at once, or press Escape or Cancel to abort.

If you include a URL after the command, for example /annotate http://localhost:3000, the extension will first navigate the current tab to that address, wait for it to finish loading, then start selection. The source code validates the input with new URL(url), and will use the current page if the input is empty.

Each Element Comes with Verifiable Page Facts¶

The extension’s content.js and the plugin’s protocol.ts agree on a consistent set of fields. Each selected element will contribute:
- Selector: Uses #id if the element has an id, otherwise constructs a path of up to 4 ancestor layers in the format tag.class:nth-of-type
- DOM Facts: Tag name, id, class list, truncated text (up to ~500 characters), first 20 HTML attributes, and viewport rectangle position
- Computed Style Highlights: display, position, color, backgroundColor, font, margin, padding, border
- Accessibility Data: role (inferred from attributes or tag), name, whether it is focusable, whether it is disabled
- Comments: The description you entered when selecting the element

The entire submission will also include the page URL and viewport dimensions. The plugin renders this content into Markdown-style text, then sends it as a plugin followup notification to the current agent, with a summary similar to Captured N browser annotations.

Optional Visible Viewport Screenshot¶

The extension calls chrome.tabs.captureVisibleTab when submitting, in PNG format. When the default configuration includeScreenshot: true is enabled, the plugin will save the screenshot as an attachment dsh-annotate.png and deliver it to the model along with the text. The README limits this to the currently visible viewport, not a full-page long screenshot.

Local Bridge Instead of Exposing the Browser to the Public Network¶

The default bridge address is 127.0.0.1:43119. In apply(), if the host is not 127.0.0.1, ::1, or localhost, the plugin will throw an error and exit. The WebSocket’s verifyClient only accepts requests from chrome-extension:// origins; after connecting, the extension will first send hello (protocol version 1 + extension ID). When allowedExtensionId is empty, any locally installed extension is accepted; if filled, only that specific ID will be allowed. The default maximum payload size is 16 MiB, and the default request timeout is 300000 milliseconds.

Installation and Activation¶

The installation command given on the community directory page can be run in the DeepSeek Harness terminal:

dsh plugin add github:BrambleXu/dsh-annotate

For reproducible installations, the directory page recommends pinning a commit hash:

dsh plugin add github:BrambleXu/dsh-annotate#commit

Replace #commit with the actual commit SHA, do not use the literal string. The official CLI documentation states that dsh plugin forwards to pnpm for the current profile; when installing from a locally checked-out repository, the README uses:

dsh plugin --profile demo add ./dsh-annotate

The plugin only completes the Harness side setup. The accompanying extension must be manually loaded into Chrome or Chromium:
1. Open chrome://extensions
2. Enable Developer mode
3. Select Load unpacked, and point to the browser-extension directory in the repository (or installed package)
4. Open the extension popup, and keep the default bridge address ws://127.0.0.1:43119

The popup will display the current extension ID. If you want to restrict connections to only this extension, write this ID into the allowedExtensionId mentioned later.

There is a security warning on the directory page that must be understood before installation: The plugin runs with the permissions of the current dsh process, and may execute code during installation. Please check the source code repository and license before installing. The extension uses Manifest V3, and has requested permissions for activeTab, scripting, storage, tabs, and host permissions for <all_urls>—this is why it can inject selection layers and capture visible tabs on any page. You should review the source code before installing.

Typical Usage¶

After the extension is connected and the dsh process has loaded the plugin, run these commands in the session:

/annotate
/annotate http://localhost:3000

Then follow these steps in the browser:
1. Hover your mouse over the target element, confirm that the blue highlight box covers the node you want to reference
2. Click, and enter a comment in the popup prompt, for example “This main button and secondary button wrap on desktop widths”
3. Continue clicking other elements if needed
4. Click Submit on the toolbar; press Escape if you do not want to submit

After a successful submission, the command will return a prompt similar to Sent N browser annotations to the agent.; in the next round, the agent will read the page URL, viewport dimensions, each element’s selector / text / style / accessibility fields / comments, plus the default attached viewport PNG. A common use case is: run a local frontend on localhost, ask the agent to fix styles or layout, and use /annotate to pinpoint exactly “which part is wrong”, instead of relying on natural language descriptions that may misidentify nodes.

The default configuration comes from the repository’s cordis.patch.yml, and the configurable options given in the README are as follows (the allowedExtensionId example is a placeholder; replace it with the actual ID from the popup):

- id: dsh-annotate
  name: dsh-annotate
  config:
    host: 127.0.0.1
    port: 43119
    allowedExtensionId: abcdefghijklmnopqrstuvwxyzabcdef
    requestTimeoutMs: 300000
    maxPayloadBytes: 16777216
    includeScreenshot: true

If the extension is not connected, the command will throw The dsh-annotate browser extension is not connected. After modifying the extension files, you need to reload the unpacked extension at chrome://extensions. The repository’s development commands are pnpm install and pnpm run check (type checking, testing, building).

Applicable Scenarios and Notes¶

This tool is well-suited for these cases:
- Local frontend development, where the agent is responsible for modifying CSS / component structure, and the human points out nodes on the real page
- Verifying computed styles, whether a button is focusable, whether aria-disabled is working, and other facts that cannot be seen from a screenshot
- Submitting multiple elements at once, grouping several issues on the same screen into a single feedback round

The 0.1 version has clearly defined its scope: a local Chrome/Chromium, one active tab, and visible viewport screenshots. Remote browsers, full-page screenshots, recording edit processes, and draggable inline annotation cards are not yet supported. Do not expect to use it to annotate remote real devices, Firefox, or send full-page long images to the model.

Additional notes:
- Selectors are constructed heuristically and may not be unique on complex pages; comments are still useful, do not rely solely on selectors
- Text, attributes, and ancestor layer counts are truncated; extremely long nodes will not be fully included in the context
- The bridge only binds to the loopback address, and the extension defaults to connecting to ws://127.0.0.1:43119; when changing the port or host, both sides must be updated together
- Leaving allowedExtensionId empty means accepting any connection from a chrome-extension:// origin on the local machine; when multiple extensions coexist, it is recommended to set a precise ID
- The plugin runs with the same permissions as the current dsh process, and the extension can read the current tab and take screenshots. This is a community repository, not an official app store—review the source code and license before running the installation command

Summary¶

dsh-annotate brings “pointing at a page with your finger” into the DeepSeek Harness conversation loop: click, add a comment, submit, and the agent gets selectors, DOM data, styles, accessibility information, and a viewport screenshot, instead of a vague “there’s something wrong over there”. It is still a 0.1 version local Chrome solution, requiring both the Harness plugin and an unpacked extension to be installed, with security boundaries clearly stated on the directory page.

Directory page: https://deepseek-harness-plugin.com/en-US/plugins/dsh-annotate/

GitHub: https://github.com/BrambleXu/dsh-annotate

Using dsh-annotate to mark browser elements for DeepSeek Harness