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
