Skip to content
hendrik kühnel
VisualEdit

from the chrome web store

Install it

VisualEdit is distributed as a Chrome extension on the Chrome Web Store and nowhere else — there is no download on this site, no build to make and no other install path. It is not listed there yet. Everything below the first step is what using it costs once it is, and none of it changes on the day.

before you start

What you need

Chrome 120 or newer

The extension's own floor, declared as minimum_chrome_version in extension/manifest.json.

Nothing else. The store serves it built.

step 01

Wait for the listing

The Chrome Web Store listing is not public, so there is nothing here to add to Chrome yet. When it is, this step becomes one button and one permission dialogue, and the two steps after it are already what happens next.

Whenever that is, the install dialogue is one line: test/browser/permissions.test.ts asks Chrome what warnings the shipped manifest would produce and asserts the answer is Manage your downloads, and that dropping downloads empties the dialogue altogether.

step 02

Give it access to the page

  1. On http://localhost and http://127.0.0.1, any port, Chrome asks once per origin. Grant it and the overlay comes back on every reload.
  2. On any other http: or https: page it works for that page, after a click on the toolbar icon. After a reload, click the icon again; the comments you have already made are kept.
  3. VisualEdit asks for no origin but those two. If you grant it another site yourself, from Chrome's own “This can read and change site data” menu, it honours that and the overlay stays on there too.
  4. Only http: and https: pages can be reviewed at all — chrome://, file:// and the Web Store are refused, with the reason in the toolbar icon's tooltip.

step 03

Your first review pass

  1. Start your dev server and open the page on http://localhost:<port> or http://127.0.0.1:<port>.
  2. Click the toolbar icon. Chrome asks once per origin for access; grant it and the overlay comes back on every reload of that origin. Decline and the pass still works, but only until the next page load.
  3. The first time, VisualEdit shows a notice listing what it records before it records anything. Acknowledging it is what starts the pass, and it does not come back — the acknowledgement is kept in the browser's extension storage.
  4. Comment mode comes on with that click. The pill in the bottom corner is the whole interface until you ask for more: its left part turns the mode on and off, its middle part opens the review panel, and its × takes VisualEdit off this site until the toolbar icon turns it back on — the comments are kept. Nothing is captured while the mode is off.
  5. Hover to pick an element, ← and → to widen or narrow the selection, click to open the composer, type what is wrong, save. Esc stops picking.
  6. If you know what the value should be, set it: the composer lists the element's own computed values, and picking one and typing a new value shows it on the page straight away.
  7. Open the panel when you want the list: what you have said so far, a page-level note for a complaint that belongs to no single element, and the finish button.
  8. Finishing the review writes visualedit-<timestamp>/ into your downloads directory: one handoff.md, and one shot-NN.png per anchored comment.

The same pass is drawn step by step on /visualedit/how-it-works, four figures and the pill.

how you operate it

the limits

What you are installing

Version 1.0.0, in the extension's own manifest.json. Chrome 120 or newer. There is no download on this site and no build to make.

Only http: and https: pages can be reviewed — chrome://, file:// and the Web Store are refused. localhost and 127.0.0.1, on any port, keep their access across reloads; everywhere else it works one page load at a time, unless you grant that site yourself from Chrome's own menu.

One handoff folder per page. Reviewing five pages gives five folders, not one combined pass. Comments made after a client-side route change are filed under the pathname that last loaded, so reload after navigating.