Skip to content
hendrik kühnel
VisualEdit

one click

Install it

One click to add it, then a click on its toolbar icon on the page you want to review. Chrome asks for one permission when you add it, and asks about site access separately, the first time you use it on a page.

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

Add it to Chrome

Add to Chrome
  1. Chrome asks for one permission, Manage your downloads. That is the whole install dialogue.
  2. Pin the toolbar icon. Every review pass starts with a click on it.

test/browser/permissions.test.ts asks Chrome what warnings the shipped manifest would produce and asserts the answer is that one line, 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, which is the version the listing serves. Chrome 120 or newer. There is no download on this site and no build to make: adding it from the Chrome Web Store is the install.

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.