ClipMark: My Notion Web Clipper Replacement
The Core Fixes
I focused on the specific pain points that make the official tool frustrating. Instead of relying on session cookies that expire, I used OAuth via Notion's official API for persistent tokens. To stop the "silent loss" of data, I implemented a local-first save system: every clip hits chrome.storage before the API call even fires. If the network fails, a chrome.alarm handles retries with exponential backoff.
Functional Breakdown
ClipMark operates as a Manifest V3 extension with three distinct modes:
1. Markdown Copy: Uses Readability.js and Turndown to strip menus and banners, copying clean Markdown to the clipboard. This is a huge productivity gain for anyone using an AI workflow with Claude or Obsidian.
2. Markdown Download: Exports a .md file with YAML frontmatter (URL, date, tags) for local archiving.
3. Notion Sync: Pushes content as native Notion blocks. It remembers your target database across sessions so you don't have to re-select it every time.
The AI Enrichment Layer
To solve the "zero organization" problem, I integrated a lightweight backend running gpt-4o-mini. When saving to Notion, the tool automatically generates a one-line summary and 3–5 relevant tags. These appear in a review panel for the user to edit before the final save, ensuring the AI doesn't hallucinate your organization system.
Technical Stack
┌─────────────┐ ┌──────────────┐ ┌──────────────┐
│ Popup UI │────▶│ Service │────▶│ Notion API │
│ │ │ │ (OAuth) │ └──────────────┘
└─────────────┘ │ │
│ background.js│ │ ┌──────────────┐
┌─────────────┐ │ │ └──────────────┐
│ Content │────▶│ • Queue mgr │────▶│ VPS Backend │
│ Script │ │ • AI client │ │ /enrich │
│ (extract) │ │ • Storage │ │ (gpt-4o-mini)│
└─────────────┘ └──────────────┘ └──────────────┘- Frontend: Manifest V3, vanilla JS, Readability.js.
- Backend: Express on a VPS handling OAuth exchange and AI enrichment.
- Storage:
chrome.storage.localfor settings and the anti-loss queue. - Monetization: ExtensionPay (Stripe) for unlimited AI tiers.
The biggest lesson learned here was that content extraction is incredibly nuanced. While Readability.js is a great starting point, handling the variety of modern web layouts requires a mix of automated extraction and manual selection fallbacks to ensure no data is missed.