Skip to main content
Chrome Extension + Embeddable Widget · loading...

ClawMark

Annotate any webpage. Highlight text, add comments, and route feedback to GitHub Issues, Lark, Telegram, Slack, or email — all in one click.

Key Features

🔍

Browser Extension

Chrome Extension (MV3) for in-page text highlighting and annotation. Select text, add thoughts, submit — done.

🔨

Embeddable Widget

Drop a single script tag into any site. Collect feedback from visitors without them installing anything.

🚀

Flexible Routing

Send annotations to GitHub, Lark, Telegram, Slack, email, Linear, Jira, HxA Connect, or custom webhooks. Rule-based routing with priority control.

🔓

Open Source

Self-host the server or use the official hosted service. Full control over your data and integrations.

Quick Start

Install
#

  1. Download the latest release from GitHub Releases
  2. Open chrome://extensions/, enable Developer Mode
  3. Click Load unpacked and select the extension folder
  4. Click the ClawMark icon in the toolbar and Sign in with Google

How to Use
#

  1. Select text on any webpage — a floating toolbar appears near your selection
  2. Click an action: Comment (add a note) or Issue (create a bug/task)
  3. Add context — type your comment, choose a label, or adjust the target
  4. Submit — ClawMark saves the annotation and dispatches it to your configured channels
  5. Track — open the Dashboard to view, search, resolve, or re-dispatch annotations

Data Flow
#

  Browser Extension          ClawMark Server              Delivery Targets
┌───────────────────┐     ┌──────────────────────┐     ┌──────────────────┐
│ 1. Select text    │     │ 4. Store annotation  │     │ GitHub Issues    │
│ 2. Add comment    │────▶│ 5. Resolve routing   │────▶│ GitLab Issues    │
│ 3. Submit         │     │    rules (priority)  │     │ Lark / Telegram  │
│                   │     │ 6. Dispatch to       │     │ Slack / Email    │
│ Captures:         │     │    matched channels  │     │ Linear / Jira    │
│ · selected text   │     │ 7. Log delivery      │     │ Webhook          │
│ · page URL        │     │    status            │     │ HxA Connect      │
│ · screenshot      │     └──────────────────────┘     └──────────────────┘
│ · DOM context     │               │
└───────────────────┘     ┌──────────────────────┐
                          │      Dashboard        │
                          │ View / search / resolve│
                          │ Manage rules & creds  │
                          └──────────────────────┘

Extension → Server: Annotations are sent via REST API (JWT-authenticated). Each annotation includes the selected text, page URL, optional screenshot, and DOM context.

Server → Targets: The server evaluates routing rules in priority order, formats the annotation for each matched channel, and dispatches. Delivery status is logged per channel.

Dashboard: Web UI for managing annotations (view, search, resolve, delete), configuring delivery rules, and storing credentials for third-party services.

Routing Rules
#

ClawMark decides where to send each annotation using this priority:

  1. URL pattern rules — you define patterns like *github.com/myorg/* → GitHub Issues
  2. Auto-detect — on GitHub pages, automatically creates issues in the detected repo
  3. Default target — your fallback delivery channel
  4. System default — server-configured catch-all

Manage rules, credentials, and view your annotations in the Dashboard (click the extension icon → Open Panel).

Public Server
#

The official hosted server is available at https://api.icoco.ai/clawmark — no setup required. Just install the extension and start annotating.

Self-Hosted Server
#

git clone https://github.com/coco-xyz/clawmark.git
cd clawmark
npm install
npm start

Point the extension to your server: Extension icon → Settings → Connection → enter your server URL.