I Built a Chrome Extension to Replace Notion's Broken Web Clipper

查看原文 / View Original 编辑 / Edit

I Built a Chrome Extension to Replace Notion’s Broken Web Clipper

我开发了一款 Chrome 插件，旨在取代 Notion 糟糕的网页剪藏工具

Notion’s official Web Clipper has a 3.4★ rating on the Chrome Web Store. The reviews tell the same story for years: “go online to save” errors while online, login loops every few hours, clips vanishing silently, and zero organization on save. Pocket shut down. MarkDownload was removed from the Chrome Web Store. The gap was obvious, so I built ClipMark to fill it.

Notion 官方的 Web Clipper 在 Chrome 应用商店的评分仅为 3.4 星。多年来，用户评论反映的问题如出一辙：明明在线却提示“请联网保存”、每隔几小时就陷入登录循环、剪藏内容悄无声息地丢失，且保存时完全无法整理。Pocket 已经关闭，MarkDownload 也从 Chrome 应用商店下架了。市场缺口显而易见，所以我开发了 ClipMark 来填补这一空白。

The Problems It Solves

它解决了哪些问题

I mapped the most common complaints from real Chrome Web Store reviews and built features that directly address each one:

我梳理了 Chrome 应用商店真实评论中最常见的抱怨，并开发了针对性的功能来逐一解决：

ComplaintHow ClipMark fixes it
”Asks me to log in every time”OAuth via Notion’s official API — persistent token, no session cookie dependency
”Go online to save” while onlineEvery clip is saved locally first. If the API fails, it queues with automatic retry. Nothing is silently lost.
”Half the content is missing”Content extraction with Readability.js + manual selection fallback + full page mode
”No tags, no organization”AI generates 3–5 tags + a one-line summary at clip time, editable before saving
”Have to re-select the database every time”Database choice is remembered across sessions
抱怨内容ClipMark 的解决方案
“每次都要我登录”通过 Notion 官方 API 进行 OAuth 认证——使用持久化 Token，不再依赖会话 Cookie
在线时提示“请联网保存”所有剪藏内容优先本地保存。如果 API 调用失败，会自动进入队列并重试，确保内容不会悄无声息地丢失
“内容丢失了一半”使用 Readability.js 进行内容提取 + 手动选区兜底 + 全页模式
“没有标签，无法整理”AI 在剪藏时自动生成 3-5 个标签及一行摘要，保存前可编辑
“每次都要重新选择数据库”跨会话记忆数据库选择

How It Works

工作原理

ClipMark is a Manifest V3 Chrome extension with three core actions:

  1. Copy Markdown — Extracts the main content (no menus, footers, or cookie banners) and copies clean Markdown to clipboard. No account needed. This is the entry point for anyone who feeds web content into ChatGPT, Claude, or Obsidian.
  2. Download .md — Saves a Markdown file with YAML frontmatter (title, URL, date, tags). Drop it into Obsidian or any note-taking system.
  3. Save to Notion — Creates a page in your chosen database with native Notion blocks (not a bookmark, not a screenshot). Properties are mapped automatically: Title, URL, Date, Tags, Summary.

ClipMark 是一款基于 Manifest V3 的 Chrome 插件，具备三大核心功能：

  1. 复制为 Markdown — 提取网页正文（去除菜单、页脚或 Cookie 横幅），并将干净的 Markdown 复制到剪贴板。无需账号，适合需要将网页内容喂给 ChatGPT、Claude 或 Obsidian 的用户。
  2. 下载 .md 文件 — 保存包含 YAML 元数据（标题、URL、日期、标签）的 Markdown 文件，可直接拖入 Obsidian 或任何笔记系统。
  3. 保存到 Notion — 在你选择的数据库中创建页面，并使用 Notion 原生区块（非书签，非截图）。属性会自动映射：标题、URL、日期、标签、摘要。

The first two work without any account or sign-up. Notion integration requires a one-time OAuth connection.

前两项功能无需任何账号或注册。Notion 集成则需要进行一次性的 OAuth 连接。

The AI Layer

AI 层

When saving to Notion, ClipMark sends the extracted text to a lightweight backend (gpt-4o-mini on a VPS). The AI returns:

  • 3–5 tags in the same language as the content
  • A one-line summary

当保存到 Notion 时，ClipMark 会将提取的文本发送到轻量级后端（运行在 VPS 上的 gpt-4o-mini）。AI 会返回：

  • 与内容语言一致的 3-5 个标签
  • 一行内容摘要

Both are shown in a review panel before saving — fully editable. The user stays in control. Cost per clip: approximately $0.0005–0.002. At 20 free clips per month per user, the AI cost is negligible.

这两项内容在保存前会显示在预览面板中，且完全可编辑，确保用户拥有完全的控制权。每次剪藏的成本约为 $0.0005–$0.002。按每位用户每月 20 次免费剪藏计算，AI 成本几乎可以忽略不计。

Anti-Loss Queue

防丢失队列

This is the feature I’m most proud of. Every clip follows this flow:

  1. User clicks “Save to Notion”
  2. Clip is persisted to chrome.storage immediately — before any network call
  3. API call to Notion fires
  4. If it fails (network down, API error, rate limit): the clip stays in a local queue
  5. A chrome.alarm schedules a retry with exponential backoff (up to 6 attempts)
  6. The popup shows the queue status with per-item controls (retry, discard)

这是我最引以为傲的功能。每一条剪藏都遵循以下流程：

  1. 用户点击“保存到 Notion”
  2. 在任何网络请求发出前，剪藏内容立即持久化到 chrome.storage
  3. 发起 Notion API 调用
  4. 如果失败（网络中断、API 错误、频率限制）：剪藏内容会保留在本地队列中
  5. chrome.alarm 会安排指数退避重试（最多 6 次）
  6. 弹出窗口会显示队列状态，并提供单项控制（重试、丢弃）

Nothing is ever silently lost. This directly addresses the #1 frustration with the official clipper.

没有任何内容会悄无声息地丢失。这直接解决了官方剪藏工具最令用户头疼的问题。

Architecture

架构

  • Extension: Manifest V3, vanilla JS, Readability.js + Turndown for HTML→Markdown

  • Backend: Express on a VPS — two routes: /notion/token (OAuth code exchange) and /enrich (AI tags + summary + quota enforcement)

  • Payments: ExtensionPay (Stripe) — $4.99/month for unlimited AI, or $39/year

  • Storage: chrome.storage.local for settings, queue, and plan status. Schema-versioned with migration on install/update.

  • 插件端： Manifest V3，原生 JS，Readability.js + Turndown（用于 HTML 转 Markdown）

  • 后端： 运行在 VPS 上的 Express — 包含两个路由：/notion/token（OAuth 代码交换）和 /enrich（AI 标签 + 摘要 + 配额限制）

  • 支付： ExtensionPay (Stripe) — $4.99/月可无限使用 AI，或 $39/年

  • 存储： 使用 chrome.storage.local 存储设置、队列和计划状态。采用版本化 Schema，在安装/更新时进行迁移。

What I’d Build Differently

如果重来，我会做哪些改进

Content extraction is harder than it looks. Readability.js handles 80% of pages well, but complex layouts (multi-column articles, heavy SPAs, paywalled content) still break. The manual selection fallback is essential — don’t skip it.

内容提取比看起来要难得多。Readability.js 可以很好地处理 80% 的页面，但复杂的布局（多栏文章、重型单页应用、付费墙内容）仍然会出错。手动选区兜底功能至关重要，千万不能省。

The Notion API block limit matters. Notion’s API accepts max 100 blocks per request. Long articles need to be batched. This is the kind of thing you only discover when testing with real content.

Notion API 的区块限制很重要。Notion API 单次请求最多接受 100 个区块。长文章需要分批处理。这是只有在用真实内容测试时才会发现的问题。

Onboarding is the first impression. An inline <script> tag in the onboarding page was silently blocked by Manifest V3’s CSP. The buttons did nothing. Users would have seen a broken first experience. Always test every HTML page in the actual extension context, not just in a browser tab.

新手引导是第一印象。引导页面中的内联 <script> 标签被 Manifest V3 的 CSP 策略静默拦截了，导致按钮失效。用户会看到一个“坏掉”的初次体验。一定要在真实的插件环境下测试每一个 HTML 页面，而不仅仅是在浏览器标签页中测试。

Pricing

定价

FeatureFreePro ($4.99/mo)
Clips (Markdown + Notion)UnlimitedUnlimited
AI (tags + summary)20/monthUnlimited
Future featuresIncludedIncluded
功能免费版专业版 ($4.99/月)
剪藏 (Markdown + Notion)无限无限
AI (标签 + 摘要)20次/月无限
未来功能包含包含

The anchor: Web2MD charges $9/month. Copy to Notion is paid. ClipMark enters below both. The math: gpt-4o-mini costs ~$0.001 per clip. 20 free clips = ~$0.02/user/month. Even at 1% conversion, the unit economics work.

锚点参考：Web2MD 收费 $9/月，“Copy to Notion”也是付费的。ClipMark 的定价低于两者。算一笔账：gpt-4o-mini 每次剪藏成本约 $0.001。20 次免费剪藏成本约为 $0.02/用户/月。即使转化率只有 1%，单位经济效益也是成立的。

Current Status and Roadmap

当前状态与路线图

Live now: Published on the Chrome Web Store with 5.0★ rating. Core features complete (Markdown, Notion, AI, queue, payments).

当前状态： 已发布至 Chrome 应用商店，评分 5.0 星。核心功能（Markdown、Notion、AI、队列、支付）已完成。

Roadmap (v2):

  • Obsidian URI export (direct save without downloading)
  • YouTube transcript extraction
  • ChatGPT/Claude conversation archiver
  • Batch clipping (multiple tabs)
  • Firefox support

路线图 (v2)：

  • Obsidian URI 导出（无需下载直接保存）
  • YouTube 字幕提取
  • ChatGPT/Claude 对话归档
  • 批量剪藏（多个标签页）
  • Firefox 支持

Try It

立即尝试

If you use Notion, Obsidian, or regularly feed web content into AI tools: 🔗 ClipMark on the Chrome Web Store

如果你使用 Notion、Obsidian，或者经常将网页内容喂给 AI 工具： 🔗 ClipMark Chrome 应用商店链接

Free for unlimited clips. AI is limited to 20/month on free, unlimited on Pro. Feedback and feature requests welcome.

剪藏功能免费且无限使用。免费版 AI 每月限 20 次，专业版无限。欢迎提供反馈和功能建议。

← 返回新闻列表 / Back to news list