1. Obsidian URL Clipper
一个支持可视化正文选择的网页剪藏插件
1.1. 插件简介
Obsidian URL Clipper是一款为Obsidian设计的网页剪藏插件,专注于解决传统网页剪藏中最棘手的问题之一:
如何稳定、准确地剪藏网页“正文内容”,而不是整页噪音。
与普通“复制网页 → 粘贴 Markdown”的方式不同,本插件提供了一个可视化正文选择器(Web Picker),允许用户直接在网页中用鼠标选中真正的正文区域,并自动生成CSS 路径 / XPath 路径,再将该区域内容转换为 Markdown 插入到当前笔记中。
1.2. 核心功能概览
🔗 1. 网页剪藏(URL → Markdown)
- 支持输入任意网页 URL
- 通过内置 WebView 加载真实网页
- 保留网页原始结构与渲染效果
- 自动插入到当前 Obsidian 笔记光标位置
🖱 2. 可视化正文区域选择(核心能力)
- 鼠标移动实时高亮页面元素(红框预览)
- 单击预览当前节点路径
- 双击页面元素即可确认选择
- 自动停止选择模式,避免误触
- 支持复杂页面结构(多层 div、动态内容)
🧭 3. 自动生成路径(CSS + XPath)
在选择正文区域后,插件会自动生成:
- CSS Selector 路径
- XPath 路径
并实时展示在弹窗底部,供你:
- 直接用于剪藏
- 复制到爬虫 / 自动化脚本
- 作为规则长期复用
🖼 4. 图片本地化(可选)
- 自动下载正文中的图片
- 按 Obsidian「附件存放规则」保存
- 自动替换为本地图片路径
- 支持图片名前缀 + 时间戳,避免冲突
🧱 5. 模块化架构(为扩展而设计)
当前插件代码已进行完整拆分:
main.ts:插件入口与核心流程(≈400 行)picker/PickerModal.ts:网页正文选择器picker/picker-script.ts:注入到 WebView 的选择脚本settings/UrlClipperSettingTab.ts:插件设置页utils/*:路径生成、日志、HTML 转换等工具
这种结构使插件非常适合:
- 二次开发
- 功能扩展
- 维护与调试
1.3. 典型使用场景
📚 技术博客 / 文档剪藏
适用于:
- CSDN / 博客园 / 掘金
- GitHub Pages / Docs / Wiki
- 各类技术教程、规范文档
精准剪藏正文,避免:
- 侧边栏
- 推荐列表
- 评论区
- 广告与登录弹窗
🧪 爬虫 / 自动化规则配置
插件不仅是“剪藏工具”,也是一个可视化规则生成器:
用鼠标点选即可生成选择器
避免手写 XPath / CSS 的痛苦
路径可直接复用于:
- Puppeteer / Playwright
- Python(lxml / BeautifulSoup)
- Node / Java 抓取程序
🧠 知识管理与长期引用
对于 Obsidian 用户:
- 为网页内容建立稳定结构锚点
- 即使网页更新,也可快速重新定位正文
- 非一次性复制,而是“可维护引用”
1.4. 设计理念
🎯 精准优于“多而全”
插件不试图做“万能网页解析”,而是:
- 让用户决定什么是正文
- 用最直观的方式完成选择
- 生成可复用、可调试的路径
🧩 与 Obsidian 原生体验融合
- 使用 Obsidian Modal / Setting API
- 遵循附件路径配置
- 不侵入编辑器、不破坏笔记结构
🛠 为高级用户保留“控制权”
- CSS / XPath 明文可见、可修改
- 所有关键步骤都有调试日志
- 不做黑箱处理
1.5. 一句话总结
Obsidian URL Clipper 不只是“把网页剪进笔记”,而是让你第一次真正“控制网页结构”。
2. 项目地址
xiaocai12138/obsidian-url-clipper
3. 使用说明
3.1. 将插件拷贝到仓库的插件库
3.2. 打开插件
3.3. 使用插件
Ctrl+P使用插件URL Clipper