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:
-
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.
-
Markdown Download: Exports a
.md
file with YAML frontmatter (URL, date, tags) for local archiving.
- 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 →