A Chrome extension enabling reviewers to click anywhere on a live webpage, leave a comment, capture a contextual screenshot, and sync feedback to a shared dashboard in real time.
The problem
Design review workflows are stuck. The typical cycle: take a screenshot, mark it up in Preview or Figma, paste it into Slack with comments — then the designer goes hunting for the original element. Repeat for every feedback item.
The solution needed to let reviewers give feedback directly within the page itself: click the problem area, type a note, capture the surrounding context, and sync it to a shared dashboard. That removes app-switching for the reviewer and investigation work for the designer.
What we built
1. Pin-anywhere overlay
The extension injects an overlay onto any open page. Click anywhere to place a pin at that exact location and open a comment box. Pin position is stored relative to the DOM element beneath it, surviving most layout changes.
- Click-to-place pins anywhere on the page
- Pin position stored relative to its DOM element
- Contextual screenshot captured automatically per pin
- Comment box with rich text and attachment support
2. Real-time sync to a shared dashboard
Every pin syncs to a web dashboard the moment it's created. Team members see new pins appear without refreshing; triage happens on the dashboard, and status changes flow back to the extension.
- Realtime sync between extension and web dashboard
- Triage view with a status flow per pin
- Filter by page, status, assignee
- Notification when a pin you raised is resolved
3. Keyboard shortcuts and capture flow
Reviewers stay off the mouse with hotkeys for opening the panel, capturing, and submitting. The capture flow takes about two seconds from idea to logged feedback.
- Keyboard shortcut to open the floating panel
- Hotkey to capture and submit without leaving the keyboard
- Inline preview of the screenshot before submit
Tech stack, and why
Browser extensions live within tight constraints — bundle size, CSP, storage limits.
- Manifest V3 — the new permissions model and service-worker architecture is the only forward path; V2 is deprecated.
- esbuild — faster than webpack with smaller output, which matters since the bundle loads on every page.
- Sharp — auto-generates the icon set from a single SVG source.
- Supabase — auth, Postgres, storage, and realtime channels; row-level security handles per-team access without custom endpoints.
- Next.js — the server-rendered triage dashboard is the heavy surface; the extension stays minimal.
- Framer Motion — pins surface with smooth animation; status transitions feel like state changes, not page reloads.
- Lucide icons — consistent stroke weight, lightweight bundle.
Outcome
The extension is live across multiple teams. The screenshot-and-paste workflow is gone where the extension has been adopted.
Frequently asked questions
What if the page layout changes after a pin is left?
Pins anchor to the DOM element they were placed on, not the absolute pixel position, so small layout changes survive cleanly. A major rewrite breaks the anchor; the pin then falls back to the preserved screenshot.
Does this work on authenticated pages?
Yes. The extension runs in the same session as the user, so any visible page can be pinned. Screenshots are stored privately, scoped to the team, not the page origin.
Why a Chrome extension and not a hosted overlay?
Hosted overlays need a script tag on the customer's site, so they only work on controlled properties. The extension works on any URL the reviewer visits — staging environments, third-party tools, and production sites under audit.