obsidian_url_clipper插件介绍

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