分享一个替代Notion官方剪藏的自研插件

Notion官方那个Web Clipper的评分只有3.4，很多用户反馈经常莫名其妙提示“请联网后保存”或者陷入登录死循环。既然官方修不好，我就直接用Manifest V3撸了一个叫ClipMark的插件，把最痛的几个点全部解决了。

这次开发最核心的逻辑是：先本地持久化，后异步同步。

为了彻底告别“剪藏丢失”，我设计了一套防丢队列机制。当用户点击保存时，内容会第一时间写入 chrome.storage.local，然后再发起API请求。如果网络波动或接口报错，插件会利用 chrome.alarm 实现指数退避重试（最多6次），用户在弹窗里能清楚看到队列状态。

这个插件的实操流程分为三档：

• 纯净Markdown： 用 Readability.js 过滤掉垃圾菜单和Cookie弹窗，直接复制干净的Markdown到剪贴板，适合喂给 Claude 或 ChatGPT。
• 本地存档： 生成带YAML frontmatter的 .md 文件，直接丢进 Obsidian。
• Notion同步： 通过OAuth 2.0 走官方API，把内容转成原生Block存入指定数据库。

最有趣的是我在后台接了 gpt-4o-mini 做AI增强。在保存到Notion之前，AI会自动生成3-5个标签和一行摘要，用户可以在保存前手动微调。

技术栈配置如下：

• 前端： Manifest V3 + Vanilla JS + Turndown (HTML转MD)
• 后端： Express 部署在 VPS 上，处理 OAuth 令牌交换和 AI 增强接口
• 存储： chrome.storage.local 维护配置、队列和版本迁移

整个架构逻辑：

Popup UI ──▶ Service Worker (Queue/OAuth) ──▶ Notion API
              ▲             └──────────▶ VPS Backend (AI Enrich)
              │
Content Script (Extract)

虽然 Readability.js 在处理某些复杂页面时还是有局限，但整体效率比官方剪藏高了不止一个量级。对于需要构建个人知识库的人来说，这种“先本地、后同步”的逻辑才是最稳的。