用 ai 写了个油猴脚本，实现思源浏览器剪藏插件的功能，以适配多平台（目前只在 docker 版本思源测试过）

大家好，

我在此分享一个个人项目：一个通过 AI 辅助开发的油猴脚本，旨在为思源笔记提供浏览器剪藏功能。

项目地址： https://github.com/byssssss/web-siyuan

开发初衷

开发这个脚本的初衷，是为了解决官方浏览器插件在某些场景下的不便之处，并探索一些新的可能性：

1. 移动端兼容性：许多移动浏览器不支持或难以安装浏览器插件，但普遍支持油猴脚本。这使得在移动设备上剪藏内容到思源成为可能。
2. 操作效率：即便在桌面端，使用插件也需要点击插件图标、再选择剪藏选项等多个步骤。脚本可以通过点击剪藏图标，快速剪藏。
3. 浏览器通用性：通过油猴这一通用标准，可以让官方插件未覆盖的 Firefox 等非 Chromium 内核浏览器，也能方便地使用思源剪藏功能。

脚本的特色功能

在 AI 的辅助下，该脚本实现了一些官方插件未提供的特性：

• AI 智能标签：可以配置 AI 接口（本人测试时使用的智谱 ai），在剪藏时自动分析文章内容并生成标签。同时，也支持用户自定义标签。
• 剪藏前预编辑：在执行剪藏前，会弹出一个对话框，允许用户预先修改标题和正文内容。这可以有效避免自动抓取的标题不准确，或需要手动删除多余内容的问题。

当前存在的局限

作为一个个人项目，该脚本也存在一些明显的不足，需要大家在使用前了解：

• 功能缺失：未实现官方插件的“下载资源”功能。我的考量是，多数网站图片可通过 Markdown 链接直接引用，无需下载。此功能的主要例外是微信公众号等图片链接有时效性或访问限制的平台。
• 配置门槛：脚本需要用户自行配置多个变量才能正常工作，包括思源的 API 地址、端口，以及 AI 服务的 API 地址和密钥等。相较于官方插件的“开箱即用”，配置难度更高。
• 维护挑战：目前版本是功能相对稳定的一版。由于整个脚本的开发过程完全依赖 AI 生成（本贴也由 ai 生成），每一版的代码结构和实现方式差异较大，且我个人不具备编程背景，难以进行深入的代码维护和迭代。因此，项目目前处于“能用则用”的状态，因为我根本不懂怎么维护 😇 。如果代码中有任何不专业或显得“小白”的地方，还请谅解。

总结

这个脚本主要面向以下用户：

• 需要在移动浏览器上使用思源剪藏的用户
• 使用 Firefox 等非 Chromium 内核浏览器的用户
• 对 AI 自动生成标签等智能化功能感兴趣的用户

项目发在 GitHub 了，虽然我不是程序员，但是没有找到一个合适的发布脚本的地方，就发在 GitHub 了 😂 ，欢迎大家体验。期待与社区各位的交流 🙏

网页剪藏工具 Pro - 详细功能与使用指南

📌 概述

网页剪藏工具 Pro 是一款强大的浏览器扩展脚本，专为高效收集和整理网络内容而设计。它无缝集成思源笔记和 AI 技术，能够在不离开当前网页的情况下，一键将有价值的内容保存到您的思源笔记中，并自动生成精准的标签。该工具采用现代化 UI 设计，提供流畅的用户体验和丰富的自定义选项。

✨ 核心功能

1. 智能内容提取

• 使用 Mozilla Readability 技术精准提取正文内容
• 自动过滤广告、导航栏等无关元素
• 保留原始内容的结构和重要格式

2. AI 驱动的标签生成

• 基于文章标题和内容自动生成 3-5 个精准标签
• 支持提供自定义标签，AI 会智能生成补充标签，避免重复
• 标签生成规则：两字中文名词，简洁精准，概括核心主题

3. 笔记本管理

• 实时获取思源笔记中的笔记本列表
• 支持选择任意笔记本保存内容
• 记住上次选择的笔记本，提升操作效率

4. 智能文件组织

• 按月自动创建文件夹（格式：YYYY-MM）
• 自动清理文件名中的非法字符
• 结构化存储路径：/web-clips/{年月}/{标题}.md

5. 用户体验优化

• 可拖动的浮动按钮，自由调整位置
• 响应式现代化 UI 设计，支持深色模式
• 无缝动画过渡和加载状态提示
• 双击按钮快速进入设置

6. 高级配置选项

• 指定特定网站激活脚本
• 自定义后端服务 URL
• 保存按钮位置偏好

🛠️ 安装与配置

前提条件

• 安装 Tampermonkey 浏览器扩展
• 拥有思源笔记实例（本地或云服务）并启用 API
• 有效的 AI 服务 API（如智谱 AI、OpenAI 等）

首次配置

1. 双击浮动按钮打开设置面板
2. 填写后端服务地址（需要自行部署服务端）
3. （可选）设置激活站点列表，每行一个域名，支持通配符
4. 点击"保存"按钮

💡 提示：首次使用时，如果未完成配置，脚本会自动弹出设置窗口

🎯 使用指南

基本剪藏流程

1. 触发剪藏面板：

   • 单击页面右下角的绿色闪电 ⚡️ 按钮
   • 或通过 Tampermonkey 菜单选择"网页剪藏工具 Pro"

2. 选择目标笔记本：

   • 面板打开后，从下拉菜单中选择希望保存到的笔记本
   • 首次使用时需要等待笔记本列表加载

3. 自定义内容：

   • 标题：默认为当前页面标题，可修改
   • 链接：默认为当前页面 URL，可修改
   • 自定义标签：（可选）输入与内容相关的标签，用逗号或空格分隔

4. 执行剪藏：

   • 点击"开始剪藏"按钮
   • 等待处理完成（显示加载动画）
   • 成功后会显示"剪藏成功！生成标签：xxx"

高级使用技巧

1. 精准标签控制

• 在"自定义标签"字段预先输入您希望确保包含的标签
• AI 会识别这些标签并生成补充性标签，避免重复
• 例如：输入"技术，编程"，AI 可能补充"算法，框架，工具"

2. 位置自定义

• 按住浮动按钮可拖动到任意位置
• 位置偏好会自动保存，下次访问时保持相同位置

3. 快速设置访问

• 双击浮动按钮可直接打开设置面板
• 无需通过浏览器菜单

4. 站点过滤

• 在设置中配置"激活网站列表"
• 支持通配符，例如：

  *.example.com
  news.ycombinator.com
  github.com
  

• 留空表示在所有网站激活

🔧 技术细节

数据流程

1. 用户点击剪藏按钮
2. 提取当前页面 HTML
3. 通过 Readability 提取正文内容
4. 转换为 Markdown 格式
5. 调用 AI 服务生成标签
6. 合并自定义和 AI 生成的标签
7. 按月组织文件路径
8. 通过 API 保存到指定思源笔记

文件组织结构

思源笔记笔记本根目录/
└── web-clips/
    ├── 2023-12/
    │   ├── 文章标题1.md
    │   └── 文章标题2.md
    ├── 2024-01/
    │   ├── 最新科技趋势.md
    │   └── 人工智能发展报告.md
    └── ...

❓ 常见问题

1. 为什么看不到浮动按钮？

• 检查是否在配置的激活站点列表中
• 检查 Tampermonkey 是否启用
• 尝试刷新页面

2. 剪藏失败怎么办？

• 检查后端服务是否正常运行
• 验证 API 配置是否正确
• 查看浏览器控制台错误信息
• 通过 Tampermonkey 菜单重新打开设置面板检查配置

4. 为什么 AI 不生成标签？

• 检查 AI 服务 API 配置是否正确
• 确认内容是否足够丰富以生成有意义的标签
• 尝试增加更多自定义标签引导 AI

💡 最佳实践

1. 定期整理：虽然脚本按月组织内容，建议定期检查和整理笔记
2. 标签策略：结合自定义标签和 AI 生成标签，建立个人知识体系
3. 多设备同步：确保思源笔记开启同步，实现在所有设备上访问剪藏内容
4. 内容预览：剪藏前可先预览提取的内容，确保准确性

提示：本工具为开源项目，欢迎提交反馈和改进建议。合理的使用将极大提升您的信息收集和知识管理效率！