Agent Note

A Chrome extension (Manifest V3) for annotating web pages: pick elements, attach notes, and copy them all as markdown for an AI agent.

Click an element, write what you want changed. Each note gets a numbered badge that tracks the element as the page scrolls.

The sidebar lists everything you've collected — this page first, then every other page you've annotated. Copy it all as markdown and hand it to an agent.

Features

• Click the toolbar icon to start picking — hover highlights elements via a floating overlay.
• Click an element to attach a note; each annotated element gets a numbered badge that tracks it on scroll.
• Click an already-annotated element again — or its badge — to edit or delete that note, rather than stacking a second one on the same target.
• Badges are only drawn while the extension is active on the page — with the toolbar up or the sidebar open. A plain page load shows nothing; the notes are still stored, and reappear the moment you activate it.
• A draggable toolbar that spring-docks to the nearest screen edge, with:
  • Cursor / cursor-off — pause and resume picking
  • Eye — show / hide the badges
  • Panel — switch to the sidebar (hides the floating toolbar)
  • Copy — copy all notes as markdown
  • Trash — clear all notes
• A sidebar (Chrome side panel) listing every note collected so far — see below.
• Notes are stored per-URL via chrome.storage.local.

Sidebar

Switch to it with the toolbar's panel button, Alt+Shift+N, or Chrome's side-panel menu. It shows every note you've collected: the active tab's page first, then a collapsible section for every other page that still has notes. It follows the tab you're on, so switching tabs re-targets the list.

The sidebar and the floating toolbar are never both up — whichever is on screen owns the controls:

• Showing the sidebar dismisses the toolbar, however the panel was opened.
• Collapsing the sidebar dismisses the extension: no toolbar, no badges. Same as Esc or the toolbar's ✕ — the notes are kept, just not drawn, and they come back the moment you activate it again.
• Having the sidebar open counts as active on its own, so a page you reload while it's open still shows its badges. Close the panel and they go, unless that page has the toolbar up to keep them.
• The button in the sidebar's actions row switches back explicitly: the toolbar returns and the panel closes.

Picking itself keeps running across a switch, so you can carry on clicking elements either way.

The choice sticks: the toolbar icon reopens whichever surface you used last. Only a deliberate switch records it — the toolbar's panel button, the sidebar's switch-back button, or opening the panel yourself. Closing the panel means "close", not "I'd rather have the toolbar", so it leaves the preference alone. In sidebar mode Chrome opens the panel on the icon click itself, so that click no longer starts picking — use Pick element in the panel.

From the sidebar you can:

• Pick element — start or stop picking in the page without leaving the panel
• Switch back to the in-page toolbar (the button after Clear)
• Click a note (or its target icon) to scroll to that element and flash its outline
• Edit or delete any note inline — the page's badges update to match
• Copy all for the current page, per-page copy in the other-pages section, or copy every page at once (the copy icon next to Other pages), each page under its own markdown heading

Install

Chrome only installs extensions from the Web Store, so a downloaded build is loaded "unpacked" instead. It takes about a minute, and you only do it once.

1. Download the zip. Get agent-note-vX.Y.Z.zip from the latest release.

2. Unzip it somewhere permanent. You'll get a folder named agent-note. Chrome reads the extension from this folder every time it starts, so keep it somewhere you won't clear out — not ~/Downloads. Moving or deleting it later breaks the extension.

3. Open the extensions page. Type chrome://extensions in the address bar, or go to ⋮ → Extensions → Manage extensions.

4. Turn on Developer mode. The toggle is in the top-right of that page. Load unpacked doesn't appear without it.

5. Click "Load unpacked" and choose the folder. Pick the agent-note folder itself — the one directly containing manifest.json. Not its parent, and not the zip.

6. Pin the icon (optional). Click the puzzle-piece in Chrome's toolbar and pin Agent Note, so the icon stays visible.

A card reading Agent Note should now be on the page, showing the version you downloaded.

First run

Open any web page and click the Agent Note icon. The floating toolbar appears and picking starts — hover to highlight an element, click it to write a note. Esc exits. Notes are saved per page, so they're still there when you come back.

Updating

Download the new zip, replace the folder's contents, then click Reload on the extension's card. Any page that was already open needs a refresh: until it gets one, the old copy of the extension is still running there and can't save (it'll tell you so).

From a clone

Same as above from step 3, selecting your clone instead of an unzipped folder.

Troubleshooting

Nothing happens when I click the icon. Chrome doesn't allow extensions to run on chrome:// pages, the Web Store, or other extensions' pages. Try a normal site.

"Agent Note was updated — reload this page to keep annotating." Exactly what it says: that tab is running a previous copy of the extension. Refresh it.

Chrome nags about developer-mode extensions on startup. That's Chrome's standard warning for any unpacked extension; there's no way around it short of a Web Store listing.

Releasing

Tagging pushes a release: bump version in manifest.json, commit, then

git tag v0.3.0 && git push origin v0.3.0

.github/workflows/release.yml checks the tag against manifest.json, builds the zip, and publishes it as a release asset. To build one locally without tagging:

./scripts/build-zip.sh

It packages via git archive, so the zip holds exactly what's committed — never stray local files — with repo-only paths excluded by .gitattributes.

Project layout

File	Purpose
manifest.json	Extension manifest (MV3)
background.js	Service worker — toggles picking, opens the side panel, relays messages, tracks whether the panel is on screen
content.js	Page logic — picking, badges, popovers, toolbar
content.css	Styles for the injected UI
format.js	Note → markdown formatting, shared by the page and the sidebar
sidepanel.html / .css / .js	The sidebar — every collected note
icons/	Toolbar / store icons
scripts/build-zip.sh	Packages the extension for Load unpacked
.github/workflows/release.yml	Publishes the zip as a release on a v* tag