Browser extension & web app

Feedback that stays on the thing it's about

Comments pinned to the exact element on any web page, with threads, statuses and team roles.

  • Chrome extension
  • React
  • TypeScript
  • Supabase
  • Shadow DOM
  • In use

The everyday problem

Every team that reviews software does the same dance. Someone spots an issue, takes a screenshot, draws a red arrow on it and pastes it into a chat. Someone else files a ticket that says “the button on the second tab, you know the one”. By the time a developer picks it up, half the context is gone: which button, which screen, which environment.

The off-the-shelf feedback tools we tried could not run on the apps that mattered most, the internal ones behind strict security policies and older sign-in systems.

What we built

A browser extension, paired with a small web app, that turns any page you can open into something you can comment on.

  1. Switch on comment mode. The cursor becomes a crosshair.
  2. Hover over the page. The element you are about to pin to gets a soft outline.
  3. Click, type, submit.

The pin stays on that element. Anyone on the team who opens the same page sees it in the same place. Each comment has a thread for replies and a status that moves from Pending to Under Review to Resolved, or Deferred for “not this round”.

Comments sit in the browser's side panel, next to the page, not on top of it. Click a pin and its comment scrolls into view. Click a comment and the page scrolls to its pin.

The web app covers the team side: projects that group pages by address pattern, a view of every comment across a whole project, and four roles (owner, admin, member and viewer). For people who don't want to install anything, a project owner can share a review link that opens the page with the commenting layer already on it.

The hard parts

Comments that survive a redesign. Storing a screen position is the easy way to place a pin, and it breaks the first time someone adds a margin. We anchor each pin to the page's structure and keep a snapshot of the element it was left on. If the page changes too much to find that element, the pin falls back to an approximate position and shows that its anchor is degraded, so it never quietly points at the wrong thing.

A layer that can't break the page. The commenting interface lives in its own sealed part of the page. The site's styles can't leak into it and its styles can't leak out, so it looks and behaves the same on a modern single-page app and on a fifteen-year-old server-rendered one.

One address, many screens. In older apps the address barely changes while the screen does. The extension recognises these apps and records which screen a comment was left on, so feedback on “Edit” doesn't turn up under “Create”.

Access decided by the database. There is no server in the middle to check permissions, so the database enforces them on every read and write. You only see comments on projects you belong to. Nobody can post as someone else. Deleted comments are hidden but kept, so the record of a review stays complete.

Choosing how to deliver it. Before building, we evaluated three other routes: a proxy that rewrites the site, a bookmarklet, and a script added to each app. Each one failed on at least one of the environments we needed, and we wrote the reasoning down. An extension was the only route that worked on all of them.

What it can't do

The review link loads the target page inside a frame, and some sites refuse to be framed. When that happens the reviewer sees a clear explanation, and the extension still works on that site.

What changed

Feedback lands on the exact element, in the exact environment, with a status attached. Nothing is retyped from a chat into a ticket, and nothing is lost between the review and the fix.