Skip to content

BrowserZap 0.5 is out on npm for Windows · Chrome Web Store listing in review · Get started

BrowserZap

Docs

Comment mode

Next release. This is built and tested, and ships in the next version. Version 0.5.0 on npm does not have it yet; this page will drop the note when it does.

Review a page the way you would review a design: click what is wrong, write a note, and send every note to your agent in one go. Your agent gets each element, the component and source file behind it on a development build, and a screenshot. It works on any site, with nothing installed in your app, and the same agent can then fix the code and check the result in the same tab.

Use it

  1. Open the page, then in the side panel press Comments → Comment on this page.
  2. Hover to see what you would pick (the element is outlined with its role and name). Click it: a small card opens next to it. The page itself does not receive that click.
  3. Write what should change and press Save (or Ctrl+Enter). A numbered pin marks the element. Esc closes the card; Esc again finishes.
  4. In the side panel, each note shows its number, the element and component, an editable text box and a screenshot. Add up to three images per note with Add image, or paste one straight into the text box.
  5. Press Send N comments to agent. Then tell your agent: "Apply my BrowserZap feedback" (the side panel copies that for you).

Your notes survive a page reload or a full navigation; the pins are drawn again. A batch holds up to 30 notes.

What your agent gets

feedback_get returns the newest batch you have not had read yet (and marks it read), with the screenshots inline. For each note:

  • your text, and the page URL and title;
  • the element: role, name, a BrowserZap target it can act on, a short DOM path, its test id, id and classes, and its position;
  • the component and source file on development builds: React (component chain and src/…tsx:line), Vue, Svelte and Angular;
  • a screenshot of the element, and any images you added.
"text": "Header is too tall on mobile",
"element": { "role": "banner", "testId": "site-header", "domPath": "header#site-header" },
"component": { "framework": "react", "component": "SiteHeader",
               "source": { "file": "src/components/SiteHeader.tsx", "line": 14 } }

browser_status also tells the agent when a batch is waiting, so it notices even if you forget to ask.

Privacy

  • Nothing leaves your computer: batches are stored in BrowserZap's own folder and deleted after 7 days.
  • No form values are ever captured. A note on a field carries its label, not what is in it.
  • Password, card, one-time-code and ID fields are covered with a grey box before a screenshot is taken.
  • Only your real clicks count: a page's scripts cannot add a note or press Save.