[JS/TS] 如何使用Clipper Hub浏览器扩展实现多平台一键剪藏

你是否厌倦了在多个平台间手动复制粘贴内容？Clipper Hub 是一款能够将网页内容一键收藏至多个平台的浏览器扩展。它支持 Telegram、Discord、Notion 等主流平台，让你的灵感和重要信息实现无缝同步与归档。

✨ 功能特性

🎯 核心功能

• 多平台支持 - 可同时将内容发送到 Telegram、Discord、Notion 等多个平台
• 快速发送 - 通过 Popup 快捷输入框，直接编辑并发送消息
• 右键菜单 - 在网页上选中文字后，通过右键菜单快速发送
• 编辑模式 - 发送前可编辑内容，并添加自定义标题
• 网页收藏 - 一键保存当前网页的标题和链接

🔌 支持的平台

平台	状态	说明
Telegram	✅ 支持	通过 Bot API 发送到频道或群组
Discord	✅ 支持	通过 Webhook 发送到频道
Notion	✅ 支持	通过 Notion API 发送到 Database
飞书文档	🚧 计划	目前需要付费实现 webhook 功能
语雀笔记	🚧 计划	需要超级会员开放 token 功能

🚀 快速开始

1. 安装与构建

项目基于 WXT 框架开发，支持 Chrome 和 Firefox。你可以通过以下命令进行开发和构建：

# 开发模式
npm run dev              # Chrome 开发模式
npm run dev:firefox      # Firefox 开发模式

# 构建版本
npm run build            # 构建 Chrome 版本
npm run build:firefox    # 构建 Firefox 版本

# 打包发布
npm run zip              # 打包 Chrome 版本为 zip
npm run zip:firefox      # 打包 Firefox 版本为 zip
npm run publish          # 构建并打包所有版本

# 其他
npm run compile          # TypeScript 类型检查

2. 配置平台

配置过程非常简单，遵循以下步骤即可：

1. 点击浏览器工具栏中的 Clipper Hub 扩展图标。
2. 在弹出的窗口中点击右上角的“设置”按钮。
3. 在设置页面的侧边栏选择你需要配置的平台（如 Telegram）。
4. 根据指引填写该平台所需的配置信息（如 Bot Token、Channel ID）。
5. 点击“测试连接”按钮验证配置是否正确。
6. 验证通过后，点击“保存”即可完成配置。

图1：Telegram Bot配置界面截图

详细配置教程：

• Clipper Hub 配置文档

🏗️ 项目架构

目录结构

项目结构清晰，遵循了浏览器扩展开发的最佳实践：

clipper-hub/
├── entrypoints/          # 扩展入口点
│   ├── background.ts     # 后台服务（Service Worker）
│   ├── content.ts        # 内容脚本（Content Script）
│   ├── popup/            # 弹出窗口（Popup UI）
│   ├── options/          # 设置页面（Options Page）
│   └── edit/             # 内容编辑页面
├── lib/
│   └── platforms/        # 平台适配层（核心中间件）
│       ├── types.ts      # 平台接口定义
│       ├── telegram.ts   # Telegram 平台实现
│       ├── discord.ts    # Discord 平台实现
│       └── index.ts      # 平台管理器
├── public/               # 静态资源
├── docs/                 # 项目文档
│   └── platforms/        # 各平台配置文档
└── wxt.config.ts         # WXT 构建配置

中间件模式

项目采用经典的中间件模式来实现平台间的解耦，这使得代码易于维护和扩展：

• Platform 接口：定义了一套统一的平台行为规范。
• 平台实现：每个平台（如 Telegram、Discord）都独立实现上述接口。
• 平台管理器：统一管理所有平台的配置加载和消息调用。
• 易于扩展：要新增一个平台支持，只需实现 Platform 接口并注册即可，无需改动核心逻辑。

🔧 常见问题

Q: 如何添加新的平台支持？
A: 请参考项目 [GitHub](https://yunpan.plus/f/39-1) 仓库中的开发文档 - “添加新平台”部分，里面提供了详细的步骤和示例。

Q: 消息发送失败怎么办？
A: 请按顺序检查以下几点：

1. 平台配置信息是否正确（可使用设置页面的“测试连接”功能验证）。
2. 当前设备的网络连接是否正常。
3. 目标平台的服务是否暂时不可用。
4. 打开浏览器开发者工具（F12），查看控制台是否有错误信息输出。

Q: 可以只启用部分平台吗？
A: 完全可以。在扩展的设置页面中，每个平台都有独立的启用/禁用开关，你可以根据需要自由配置。

Q: 配置数据存储在哪里？安全吗？
A: 配置数据使用浏览器原生的 browser.storage.sync API 进行存储。这意味着数据会在你登录的同一浏览器账号下的不同设备间自动同步。所有数据仅存储在本地和你的浏览器账户中，完全不经过任何第三方云端服务器，保障了隐私安全。

项目地址

你可以在以下地址找到该项目的完整源代码、最新文档以及发布版本：
https://github.com/anghunk/clipper-hub

如果你正在寻找更多提升效率的开发者工具或开源项目，欢迎来 云栈社区 交流探讨。