ClipMark: My Notion Web Clipper Replacement

A developer built ClipMark, a Manifest V3 browser extension that replaces the official Notion web clipper, using OAuth for persistent tokens and a local-first save system with chrome.storage to prevent data loss. The extension offers Markdown copy, Markdown download, and Notion sync modes, and integrates gpt-4o-mini to auto-generate summaries and tags for saved content.

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 /en/tags/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.local for 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. Next Claude Code: Mastering Context Engineering → /en/threads/3449/