Page Notes Extension
The Page Notes package, now for every website: pin sticky notes anywhere, highlight text, drag them freely — they come back when you return and live in one visual list.
- Manifest V3
- Works on any website
- 100% local storage
- No tracking
Preview
Simulator · Try it: press + NOTE and click anywhere, drag + NOTE onto the page, select text then + NOTE, then open “All my notes” from the toolbar icon. <PageNotesExtension />
It works exactly like the Page Notes package: press Alt+Shift+N (or the dock's + NOTE), click anywhere and type — or drag a fresh note off the dock and drop it wherever you want. Select text first and it becomes a highlight with a note. Hold Shift to stick a note to an element so it follows the layout. Everything comes back on your next visit, and “All my notes” shows every note as a card with a snapshot of where it sits, its page link, its content and the links inside it. Share a deep link to any single note. The preview above is a live simulator of the extension.
Installation
Install in 1 minute
Works in Chrome, Edge, Brave, Arc, Opera, Vivaldi — any Chromium browser (Manifest V3).
- 1 Download v1.2.0 (.zip) and unzip it (you get a
guetix-page-notesfolder). - 2Open
chrome://extensions(Edge:edge://extensions) and turn on Developer mode. - 3Click Load unpacked and select the unzipped folder.
- 4Pin it: puzzle icon → 📌 next to Page Notes. Open any website and press Alt+Shift+N.
Updating: download the new zip, replace the folder’s files and press ↻ on the extension card. Your notes are kept.
What you get
- The package's sticky notes on any website — click anywhere to pin, drag anywhere to move
- Drag a new note straight off the dock and drop it where you want
- Select text → it becomes a highlight with a note attached
- Hold Shift to stick a note to an element so it follows the layout
- Notes come back on every visit; step through them with ‹ › in the dock
- “All my notes” board: snapshot of the spot, page link, content and links — filter, search, edit inline
- Deep link to a single note, mark notes done, fold them into a tab
- Export / import JSON backups · 100% local, no account, no tracking
Shortcuts
- Alt+Shift+N
- New note — click anywhere (or highlights the selected text)
- Shift + click/drop
- Stick the note to the element underneath
- Alt+Shift+H
- Show / hide notes on pages
- Esc
- Cancel placing · leave the note you're typing in
- Right-click
- “Pin a Page Note here” / “Highlight + note”
Change them at chrome://extensions/shortcuts.
Permissions & privacy
Your notes never leave your browser: no account, no server, no analytics. Each permission and why it’s needed:
storage + unlimitedStorageSaves your notes and their snapshots on your device (chrome.storage.local). Nothing is sent anywhere.Read sites (host access)Draws your notes back on a page when you return, and takes the snapshot of the visible tab when you pin a note.contextMenusAdds “Pin a Page Note here” and “Highlight + note” to the right-click menu.activeTab + scriptingStarts notes on tabs that were already open before you installed it.
Open source: plain JavaScript, no build step, no dependencies — unzip it and read every line. Built on the Page Notes package — use that one to add notes to a site you own.
Good for
Under the hood
The details that make it feel right, and that a one-line prompt usually misses:
- 01The notes are the package's notes — same size, tape, tilt, palette and controls — rendered in a closed Shadow DOM so a site's CSS can't restyle them and its scripts can't read them.
- 02Free by default (document coordinates, like the package). Shift sticks a note to the element under the cursor (CSS selector + offset), and a highlight sticks to its text: the quote is re-found with prefix/suffix context and painted with the CSS Custom Highlight API, so the page's DOM is never modified.
- 03Each new note gets a snapshot: the worker captures the tab, crops a 16:10 window around the spot, draws the crosshair and stores a ~20 KB JPEG apart from the note, so typing never rewrites images.
- 04Deep links (#gx-note=…) open the page, scroll to the note and pulse it, then clean the URL. Keys typed in a note are stopped at window-capture so the site's own shortcuts never fire.
- 05Pages are keyed by origin + path + meaningful query (no #hash, no utm_* tracking); single-page-app navigations are followed too.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| storageKey | string | null | "gx-pn-ext-sim-v2" | Simulator only: where the demo saves its notes (null = don't persist). |
| className | string | — | Simulator only: extra classes on the frame. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Notes are role=note with labelled text boxes; every action is a real, labelled button; the dock is a labelled toolbar.
- Fully keyboard driven: Alt+Shift+N places (or highlights the selection), Alt+Shift+H hides/shows, Esc cancels or leaves a note.
- Deleting a note offers Undo; reduced motion disables the pop-in, dock and pulse animations.