{"slug": "clipmark-my-notion-web-clipper-replacement", "title": "ClipMark: My Notion Web Clipper Replacement", "summary": "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.", "body_md": "# ClipMark: My Notion Web Clipper Replacement\n\n## The Core Fixes\n\nI 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`\n\nbefore the API call even fires. If the network fails, a `chrome.alarm`\n\nhandles retries with exponential backoff.\n\n## Functional Breakdown\n\nClipMark operates as a Manifest V3 extension with three distinct modes:\n\n1. **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.\n\n2. **Markdown Download:** Exports a `.md`\n\nfile with YAML frontmatter (URL, date, tags) for local archiving.\n\n3. **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.\n\n## The AI Enrichment Layer\n\nTo 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.\n\n## Technical Stack\n\n```\n┌─────────────┐ ┌──────────────┐ ┌──────────────┐\n│ Popup UI │────▶│ Service │────▶│ Notion API │\n│ │ │ │ (OAuth) │ └──────────────┘\n└─────────────┘ │ │ \n │ background.js│ │ ┌──────────────┐\n┌─────────────┐ │ │ └──────────────┐\n│ Content │────▶│ • Queue mgr │────▶│ VPS Backend │\n│ Script │ │ • AI client │ │ /enrich │\n│ (extract) │ │ • Storage │ │ (gpt-4o-mini)│\n└─────────────┘ └──────────────┘ └──────────────┘\n```\n\n**Frontend:** Manifest V3, vanilla JS, Readability.js.**Backend:** Express on a VPS handling OAuth exchange and AI enrichment.**Storage:**`chrome.storage.local`\n\nfor settings and the anti-loss queue.**Monetization:** ExtensionPay (Stripe) for unlimited AI tiers.\n\nThe 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.\n\n[Next Claude Code: Mastering Context Engineering →](/en/threads/3449/)", "url": "https://wpnews.pro/news/clipmark-my-notion-web-clipper-replacement", "canonical_source": "https://promptcube3.com/en/threads/3460/", "published_at": "2026-07-26 01:00:49+00:00", "updated_at": "2026-07-26 01:35:31.980024+00:00", "lang": "en", "topics": ["developer-tools", "ai-tools", "ai-products"], "entities": ["ClipMark", "Notion", "Readability.js", "Turndown", "Claude", "Obsidian", "gpt-4o-mini", "ExtensionPay"], "alternates": {"html": "https://wpnews.pro/news/clipmark-my-notion-web-clipper-replacement", "markdown": "https://wpnews.pro/news/clipmark-my-notion-web-clipper-replacement.md", "text": "https://wpnews.pro/news/clipmark-my-notion-web-clipper-replacement.txt", "jsonld": "https://wpnews.pro/news/clipmark-my-notion-web-clipper-replacement.jsonld"}}