简单说：它是一个浏览器扩展 + 本地通信 + HTML 正文提取 + HTML→Markdown 转换 + 模板渲染 + Obsidian 本地写入的完整流水线，全程在你电脑本地完成，不上传到第三方服务器。下面拆开讲清楚每一步是怎么“达成”的。
一、它是什么（架构）
- 角色：官方浏览器扩展（Chrome/Firefox/Safari）
- 组成
- 浏览器端：Web Clipper 扩展（捕获网页、提取内容、转 MD、渲染模板）
- 本地端：Obsidian 主程序（监听本地协议
obsidian://或本地端口，接收扩展发来的 MD 文本，写入本地 vault 的.md文件）
- 本质：浏览器里跑的 JS 工具链 + 本地 Obsidian 提供的“本地文件写入接口”
二、一键剪藏的完整流程（从点图标到生成 MD）
1. 捕获当前网页 HTML
- 你点扩展图标 → 扩展拿到当前标签页的完整 DOM（HTML 结构）
- 同时自动抓取元数据：
title、url、发布时间、作者、摘要等
2. 智能提取正文（剔除广告/导航/侧边栏）
- 核心库：官方用的是 Defuddle（或 Readability 类算法）
- 原理：
- 分析 DOM 结构：标签嵌套深度、文本密度、链接密度、class/id 命名特征
- 打分：正文区域通常文本多、链接少、嵌套浅
- 过滤：去掉 header/footer/nav/aside/广告 iframe 等噪音块
- 优先级（谁高听谁的）：
- 你手动选中的文字
- 你在网页上高亮的内容
- 你自定义的模板规则
- 默认智能提取（最低）
3. HTML → Markdown 转换
- 核心库：Turndown.js（业界标准 HTML→MD 库）
- 过程：
- 把提取到的干净正文 HTML 喂给 Turndown
- 按规则转换：
<h1>→# 标题<p>→ 普通段落<a href="...">→[文本](url)<img src="...">→（仅存链接，不下载图片）<ul>/<ol>→- 列表/1. 有序列表
- 结果：得到干净的 Markdown 文本
4. 模板引擎渲染（加 frontmatter/标题/格式）
- 你可以自定义模板（
.md模板文件），例如：
---
title: {{title}}
url: {{url}}
date: {{date | formatDate:"YYYY-MM-DD"}}
---
# {{title}}
{{content}}- 扩展内置变量引擎 + 过滤器：
{{title}}→ 替换为网页标题{{date}}→ 替换为当前时间，可过滤格式化{{content}}→ 替换为上一步转好的 MD 正文
- 输出：最终定型的完整 MD 内容（含 frontmatter）
5. 发给本地 Obsidian 并写入文件
- 关键：不通过云端，本地通信
- 两种方式：
- Obsidian URI 协议（主流）
- 扩展生成：
obsidian://new?vault=你的库名&file=保存路径&content=MD内容 - 浏览器调用这个链接 → 本地 Obsidian 捕获 → 解析参数 → 写入对应
.md文件
- 扩展生成：
- 本地端口监听（备用）
- Obsidian 开一个本地端口（如 27123）
- 扩展发 POST 请求到
localhost:27123→ Obsidian 接收并保存
- Obsidian URI 协议（主流）
6. 完成
- 你在 Obsidian 里看到：新生成的 .md 文件，标题、链接、日期、正文全部到位
三、关键技术点（一句话看懂）
- 浏览器扩展能力：访问当前页面 DOM、存储配置、调用本地协议
- 正文提取算法：基于 DOM 特征打分，过滤噪音，只留正文
- Turndown.js：可靠的 HTML→Markdown 转换
- 模板+变量引擎：让输出格式高度自定义
- 本地协议通信：
obsidian://是本地安全通道，不泄露数据
四、为什么它能做到“一键、干净、本地”
- 一键：扩展封装了“捕获→提取→转换→模板→发送”全流程，你只点一下
- 干净：Defuddle/Turndown 组合，自动去广告、去杂乱格式
- 本地：所有步骤在浏览器和本地 Obsidian 之间完成，数据不上传第三方服务器
要不要我给你一份可直接复制的自定义模板示例，并标注每个变量的含义，你直接导入就能用？
相关链接
Obsidian + Claude Code 完整真实过程 | Obsidian Web Clipper | Obsidian 加 Hermes 加 Cloud Code | Obsidian 加 Hermes 加 Cloud Code中hermes的意义 | Obsidian 加 Hermes 加 Cloud Code加Copilot Settings插件，能组合出什么惊艳的知识库效果吗