MarksVault 是为现代浏览器设计的高级书签管理扩展。它旨在解决浏览器原生书签功能的局限性，为用户提供更强大、更灵活的书签管理体验。通过将书签数据安全地存储在用户自己的GitHub私有仓库中，确保您的数据安全且完全受您控制。
|
明亮主题 |
暗黑主题 |
点击展开查看详细界面预览
|
列表视图 |
网格视图 |
书签搜索 |
|
任务卡片列表 |
任务卡片展开 |
任务创建 |
|
GitHub连接 |
连接后备份统计 |
下载恢复 |
|
外观设置 |
高级设置 |
关于信息 |
| 分类 | 核心技术 |
|---|---|
| 前端核心 | React 18.2.0, TypeScript 5.0.4, Material-UI(MUI) 5.13.0 |
| 扩展APIs | Chrome Manifest V3, Bookmarks API, Storage API, Tabs API, Runtime API |
| 状态管理 | React Context API + Hooks |
| 外部集成 | GitHub API (仓库操作与内容管理) |
| 构建与测试 | Webpack 5.82.1, ESLint 8.40.0, Jest 29.5.0 |
| 项目结构 | 功能模块化设计, Service Worker后台, React弹出界面 |
- 书签列表与网格 - 支持列表和网格两种显示模式
- 文件夹管理 - 创建和管理书签文件夹
- 拖拽排序 - 直观地重新排列您的书签
- 基础编辑 - 支持书签基本信息编辑
- GitHub集成 - 使用您自己的GitHub私有仓库安全存储书签
- 手动同步 - 支持手动上传备份和下载恢复
- 推送书签 - 支持将书签推送到指定GitHub仓库
- 项目集成 - 与menav项目集成
menav是一个使用github pages托管的个人导航站，欢迎fork使用
与本项目集成，可自动化上传书签到menav项目，并自动构建书签页
- 任务管理 - 创建、编辑、删除和启用/禁用自定义任务
- 基于事件的触发 - 设置任务触发条件
- 操作配置 - 自定义每个任务的具体操作和参数
- 执行状态跟踪 - 跟踪任务执行状态
src/ # 源代码
├── background/ # 扩展后台脚本
│ └── background.ts # 后台Service Worker脚本
├── popup/ # 弹出窗口界面
│ ├── components/ # React组件
│ │ ├── BookmarksView/# 书签管理视图组件
│ │ ├── TasksView/ # 任务管理视图组件
│ │ ├── SyncView/ # 同步设置视图组件
│ │ ├── SettingsView/ # 系统设置视图组件
│ │ └── shared/ # 共享组件
│ │ ├── Header.tsx # 顶部栏组件
│ │ ├── BottomNavigation.tsx # 底部导航组件
│ │ ├── Toast.tsx # 通知提示组件
│ │ └── LoadingIndicator.tsx # 加载指示器
│ ├── styles/ # CSS样式文件
│ ├── popup.html # 弹出窗口HTML
│ └── popup.tsx # 弹出窗口脚本入口
├── services/ # 服务层
├── types/ # TypeScript类型定义
└── utils/ # 工具函数
-
前往 Releases 页面，下载最新版本的扩展文件：
marksvault-vX.X.X-chrome.zip- 压缩包格式
-
使用ZIP文件安装:
- 解压下载的
.zip文件到本地文件夹 - 打开 Chrome 浏览器，访问
chrome://extensions/ - 启用右上角的"开发者模式"
- 点击"加载已解压的扩展程序"
- 选择刚刚解压的文件夹
- 解压下载的
- 克隆MarksVault仓库到本地环境
git clone https://github.com/rbetree/MarksVault.git cd MarksVault - 安装项目依赖
npm install
- 构建扩展
npm run build
- 在Chrome浏览器中加载扩展:
- 打开
chrome://extensions/ - 启用"开发者模式"
- 点击"加载已解压的扩展程序"
- 选择项目中的
dist目录
- 打开
- 安装完成后:
- 在Chrome浏览器右上角的扩展图标区域找到MarksVault图标并点击
- 扩展弹出窗口会显示，底部有四个导航选项：书签、任务、同步和设置
- 首次打开时会自动进入书签页面
-
获取GitHub Token:
- 打开同步页，快速创建令牌
- 在令牌创建页，直接创建即可（必要权限将自动勾选）
- 生成令牌后，立即复制它（页面刷新后将不再显示）
-
配置GitHub凭据:
- 将复制的令牌粘贴到同步页GitHub Token输入框中
- 点击"连接GitHub"按钮
- 如配置成功，页面会显示您的备份统计信息
-
配置备份仓库:
- 默认创建"marksvault-backups"私有仓库用于书签备份