呼伦贝尔市网站建设_网站建设公司_Oracle_seo优化

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

3.4.1. 输入URL

3.4.1.1. CSDN效果

3.4.1.2. 选择具体的Path效果