# ClipMark: My Notion Web Clipper Replacement

> Source: <https://promptcube3.com/en/threads/3460/>
> Published: 2026-07-26 01:00:49+00:00

# 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/)