A Chrome extension that opens a Markdown notes column beside any web page or PDF. Select a passage and it's highlighted on the page and dropped into your notes as a blockquote to write beneath. Local‑first, offline, no account, no tracking — and every note exports to Markdown, plain text, HTML, Word, and PDF.
“When I read PDFs in Chrome or long articles I always wish I could highlight and make notes about them.” — the idea behind WebMark, by @rosswarren99
Read on the left · write on the right · no copy‑paste shuffle, no second app.
- Why WebMark
- Feature overview
- Install
- The core workflow
- Use cases
- Exporting your notes
- Managing notes (the dashboard)
- Your data: local-first & offline
- Keyboard shortcuts
- How it works (architecture)
- Development & tests
- Known limitations
- FAQ
- License
Reading and note‑taking are usually split across tools: you read in the browser, then copy‑paste quotes into a separate notes app, losing the link back to the source and your place on the page. WebMark collapses that into one uninterrupted flow:
| 🪟 One surface | Read on the left, write on the right. No tab‑switching, no copy‑paste shuffle. |
| 🔓 No setup | No account, no cloud, nothing to sign into. It works the moment it's installed. |
| Notes live in the browser's own storage on your machine. A flight with no Wi‑Fi works exactly like being online. | |
| 📦 Yours to keep | Any note exports to five open formats in one click — you're never locked in. |
- Margin notes column. Toggle a right‑side panel from the toolbar icon (or
Alt+M). The page shifts left so the panel sits in the margin instead of covering what you read. - Highlight → blockquote. Select text and click the floating Highlight button (or
press
Alt+H, or use the right‑click menu). The passage is highlighted on the page and inserted into your notes as a Markdown blockquote, cursor placed ready for your comment. - Five highlight colours, switchable from the toolbar — colour‑code by theme, importance, question vs. fact.
- Durable highlights. Highlights are re‑anchored and restored after reload using whitespace‑tolerant text‑quote matching with surrounding context, so they survive minor reflow.
- Live Markdown preview. Toggle between Write and Preview.
- Real PDF support. PDFs open in WebMark's bundled reader (PDF.js) where text is selectable, so the same highlight + notes flow works on PDFs — local files included. Pages render lazily (on demand as you scroll, with far pages evicted), so even very large PDFs open instantly and stay light on memory.
- Works in single‑page apps. When a site changes the URL without a full reload, WebMark switches notes/highlights to the new page on the fly — no reload, no lost context.
- Autosave, scoped per page (origin + path), debounced so typing stays smooth.
- Multi‑format export & copy:
.md,.txt,.html,.docx, and PDF (via print), plus one‑click copy‑as‑Markdown. - Local Backup & Restore. Export every note to a single JSON file you own, and import it back (merge or replace) — your way to back up or move data, with nothing ever uploaded.
- "All notes" dashboard. Browse, search, re‑open, export, or delete every note.
- Highlight list in the panel — click to jump to a highlight, or remove it.
- Cross‑tab sync and a resizable, remembered panel width.
WebMark isn't on the Chrome Web Store yet, so for now you install it as an unpacked extension. It takes about two minutes, needs no technical skills, and works on any Chromium browser — Google Chrome, Microsoft Edge, Brave, Arc, Opera, etc. There's no build step: it's plain JS/HTML/CSS plus a bundled copy of PDF.js.
Easiest — download the ZIP (no tools needed):
- Go to https://github.com/ogprotege/WebMark.
- Click the green
< > Codebutton → Download ZIP. - Open your Downloads folder and double‑click
WebMark-main.zipto unzip it. You'll get a folder namedWebMark-main— that's the extension. - Move that folder somewhere permanent (e.g. Documents).
⚠️ If you delete or move it later, the extension stops working, so pick a spot you'll keep.
Or, if you use git:
git clone https://github.com/ogprotege/WebMark.git- Open Chrome and type
chrome://extensionsin the address bar, then press Enter. - Turn on Developer mode — the toggle in the top‑right corner.
- Click Load unpacked (top‑left).
- Select the
WebMark-mainfolder from Step 1 — the folder that directly containsmanifest.json— and click Select / Open. - A WebMark card appears in the list. That's it — you're installed. ✅
(Edge: the steps are identical at edge://extensions. Brave: brave://extensions.)
- Click the puzzle‑piece 🧩 icon at the top‑right of the toolbar.
- Click the pin 📌 next to WebMark so its icon stays visible on your toolbar.
- Open any article and click the WebMark icon (or press Alt+M, ⌥M on Mac) to open the notes column.
- Select text → click Highlight → it's saved into your notes as a quote you can write under. Everything autosaves locally.
- PDFs open in WebMark's reader automatically. For local PDF files (
file://…), go tochrome://extensions, click Details on WebMark, and enable Allow access to file URLs.
- ZIP: download a fresh ZIP, replace the old folder with the new one, then click the
↻ reload icon on the WebMark card in
chrome://extensions. - git: run
git pullin the folder, then click ↻ reload on the card.
chrome://extensions → Remove on the WebMark card. Your notes are stored in that browser
profile, so removing the extension deletes them — export a backup first from
All notes → Export all notes if you want to keep them.
🚀 Coming soon: a Chrome Web Store listing so anyone can install with one click, no Developer mode required.
On a web page
- Press
Alt+M(or click the icon) to open the notes column. - Select some text — a Highlight button appears by the selection. Click it (or press
Alt+H). - The passage is highlighted on the page and added to your notes as a
>blockquote. Type your own thoughts directly beneath it. - Keep reading and repeat. Everything autosaves. Switch to Preview to read formatted.
- When you're done, Export in your preferred format — or just leave it; it's waiting when you return to the page.
On a PDF
- By default, opening a PDF in Chrome reopens it in the WebMark reader with the notes column already open. (Turn this off in All notes → settings.)
- You can also right‑click any PDF link and choose Open this PDF in WebMark reader, or click the toolbar icon while viewing a PDF.
- Select text in the PDF and highlight exactly as on a web page. Zoom with the toolbar; highlights re‑apply automatically after zooming.
- Local PDFs (
file://…) work once you've enabled Allow access to file URLs.
- Researching a topic across many articles — highlight the key claim in each source; your notes accumulate the quotes with your synthesis underneath.
- Reading academic papers / PDFs — mark definitions, results and caveats, write margin
commentary, then export to
.docxfor a literature review. - Studying & revision — colour‑code highlights, explain in your own words, export to PDF for offline revision.
- Journalists & writers — pull quotes into blockquotes with context preserved, annotate, export clean Markdown into your CMS.
- Legal / contract / policy review — highlight clauses, note questions inline, export a
.docxsummary to share. - Meeting prep / briefing — skim a long page, highlight what matters, arrive with a one‑screen notes column.
- Commonplace book — a running, searchable set of favourite passages and reflections.
- Offline reading — save a PDF locally, annotate it on a flight, depend on nothing.
Click the export icon in the panel (or the Export ▾ menu on any dashboard card) and pick a format:
| Format | Extension | Best for |
|---|---|---|
| Markdown | .md |
Notes apps (Obsidian, Notion import), GitHub, plain re‑use |
| Plain text | .txt |
Maximum portability; Markdown syntax stripped to clean text |
| Web page | .html |
A styled, self‑contained page to open or share |
| Word | .docx |
Handing off to colleagues; opens in Word / Google Docs / LibreOffice |
| print… | A fixed, printable copy — choose "Save as PDF" in the dialog |
Every export includes the page title, the source URL, and the date, followed by your notes. You can also copy the note as Markdown with one click.
The
.docxand.htmlexporters are written from scratch with no dependencies — the Word file is a real OOXML package (validated to open in Word / Docs / LibreOffice), and PDF uses the browser's own print engine, so there's nothing extra to install.
Open All notes from the panel footer (or the extension's Options entry on
chrome://extensions). From there you can:
- See every note, newest first — title, source, date, snippet, and highlight count.
- Search across titles, URLs and note text.
- Open a note's original page or PDF in one click (PDFs reopen in the reader).
- Export any note in any of the five formats.
- Delete notes you no longer need.
- Adjust settings — auto‑open PDFs in the reader, and your default highlight colour.
- Back up & restore — export all notes to a JSON file you control, and import it back (merge keeps the newer copy of each note; replace overwrites). Fully local, nothing uploaded.
- Where it lives — everything is stored with Chrome's
storage.localAPI, on your computer, in your browser profile. No server, no account, no telemetry. WebMark makes no network requests of its own. (It uses thewebRequestpermission only to read theContent-Typeof pages you open, locally, so it can recognise PDFs — nothing is sent anywhere.) - Keys — each page's note is saved under a normalised URL (origin + path, with tracking
params and
#fragmentsstripped), so revisiting the same article brings back the same note. PDF notes are keyed to the PDF's URL. - Autosave — edits save automatically (debounced ~0.6 s) and flush immediately when you close the panel or leave the page.
- Offline — nothing depends on the network, so a network outage cannot lose your notes; they were never in transit.
- Backups / portability — use All notes → Backup & restore to export everything
to one JSON file you control, and import it on another machine (or after a reinstall).
You can also export individual notes to
.md/.docx/etc. Browser‑managed storage is tied to your Chrome profile; clearing the extension's data or removing it deletes its stored notes, so keep a backup of anything you want long‑term. No cloud, no account, by design.
| Action | Shortcut |
|---|---|
| Toggle the notes panel | Alt+M |
| Add the current selection to notes | Alt+H |
Rebind these at chrome://extensions/shortcuts.
manifest.json MV3 manifest (content scripts, background, viewer, options)
src/
background.js Service worker: toolbar/shortcut/menu routing + PDF redirect
content.js Content-script entry for normal web pages
core/ Shared modules (loaded in both content scripts and the reader)
util.js URL keying, debounce, escaping
markdown.js Tiny, sanitising Markdown -> HTML renderer (preview/HTML export)
anchor.js Text-quote anchoring: store + re-find highlighted passages
highlighter.js Wrap/restore/remove on-page <mark> highlights
storage.js chrome.storage.local wrapper (per-page notes + settings)
export.js Markdown/TXT/HTML/DOCX/PDF exporters (+ in-house ZIP writer)
panel.js The notes panel UI (Shadow DOM) tying it all together
pdf/
viewer.html/.css/.js WebMark PDF reader built on PDF.js (canvas + text layer)
manager/
manager.html/.js "All notes" dashboard + settings (also the options page)
vendor/pdfjs/ Vendored PDF.js (v4.10.38) build + worker
icons/ Generated PNG icons
tools/ Icon generator + tests
The same core/ modules power both contexts, so a highlight on a web page and a highlight
on a PDF go through identical code — the only difference is what DOM the text lives in
(the page body vs. the PDF's text layer). The UI renders in a Shadow DOM so the host page's
CSS can't leak in or out.
Durable highlighting. When you highlight, WebMark stores the selected text plus a little context on each side and a fractional position. On reload it searches the live document for that quote (whitespace‑tolerantly), disambiguates duplicates by context, and re‑wraps the match. Notes themselves are plain Markdown, so they're never lost even if a highlight can't be re‑anchored (it's then marked "not on page", with your note text intact).
npm install # installs jsdom (for tests only)
npm test # pure-logic tests + jsdom DOM round-trip tests
npm run icons # regenerate PNG icons (pure-Python, no deps)npm test covers URL keying, the Markdown renderer (including link/HTML sanitising), the
anchoring matcher, all five exporters (including a CRC‑checked .docx ZIP), local
backup/restore (merge & replace), and full wrap → remove → reload‑restore round‑trips
(plus clearAll) in jsdom — 78 assertions.
Automation hook. Page‑context scripts and browser automation can drive WebMark without
the toolbar click by dispatching a DOM event:
document.dispatchEvent(new CustomEvent('webmark:control', { detail: 'open' }))
(detail = open | close | toggle | capture). Handy for end‑to‑end testing and
integrations.
- PDFs with no
.pdfextension (e.g.arxiv.org/pdf/…) are auto‑detected over http/https by theirContent-Type; localfile://PDFs still rely on the.pdfextension (use the right‑click menu otherwise). - Single‑page apps — handled by re‑keying the panel on in‑app navigation; very unusual routing schemes may still need a manual refresh.
- Scanned / image‑only PDFs have no selectable text, so they can't be highlighted (you can still take notes).
- Page reflow works on the vast majority of sites (the panel reserves margin space with
!important, which even beats CSS resets); a few sites with unusual full‑viewport or fixed‑position layouts may still draw some content under the panel. - PDF export uses the browser print dialog (choose "Save as PDF"); it isn't a silent download like the other formats.
- Highlight restoration matches on text; if a page's text changes substantially, a highlight may not re‑anchor (your note text is preserved regardless).
Do I need an account or internet connection? No to both — it's entirely local and offline.
Will my notes sync between computers? Not in this version; storage is local to the browser profile. Export to a file to move notes around.
Does it send my reading anywhere? No. WebMark makes no network requests and has no analytics.
Can I highlight a scanned PDF? Only if it has a real text layer. Image‑only scans have no selectable text, though you can still write free‑form notes.
What happens to a highlight if the article is edited? The note (including the quoted text) is always kept. The on‑page highlight re‑appears if the text can still be found; otherwise it's listed as "not on page".
MIT © William Sherman · original concept by Ross Warren · bundled PDF.js © Mozilla (Apache‑2.0)
Made with care for the best little brother. 💙