Skip to content

README.md

Latest commit

 

History

History
279 lines (195 loc) · 7.75 KB

README.md

File metadata and controls

279 lines (195 loc) · 7.75 KB

SlideNote

SlideNote 侧边笔记

Slide notes, always by your side
侧边笔记，常伴左右
English

Chrome 浏览器侧边栏笔记插件 | 跨设备自动同步 | 极简设计

GitHub version License Chrome Web Store

🆕 最新版本 v0.0.8

新增功能

  • 🔖 网页摘录 — 右键保存网页选中内容，按日期自动聚合

Bug 修复

  • 🐛 修复夜间模式置顶笔记颜色问题
  • 🐛 修复导航按钮在置顶笔记间的问题
  • 🐛 修复 chrome:// 页面报错
  • 🐛 修复编辑器 Header 长内容时消失的问题

体验优化

  • 🎯 简化右键菜单，移除冗余选项

📜 查看完整更新日志 → CHANGELOG.md

✨ 特性

  • 📌 侧边栏展示 — 固定在浏览器侧边，随时可用
  • 🔖 网页摘录 — 右键保存网页选中内容，按日期聚合
  • ✍️ Markdown 编辑 — 支持预览/编辑模式，实时渲染
  • 📋 富文本复制 — 复制带样式的文本，可直接粘贴到其他应用
  • 💾 自动保存 — 停止输入 1 秒后自动保存
  • 🔄 跨设备同步 — 基于 Chrome Storage API，自动云端同步
  • 🔍 搜索过滤 — 实时搜索标题和内容
  • 📌 笔记置顶 — 重要笔记固定在顶部
  • ⬆️⬇️ 导航切换 — 上下箭头快速切换笔记
  • ⚡️ 极致轻量 — 无框架依赖，打包仅 57KB

🎯 适用场景

场景 说明
多设备工作者 公司电脑记录，回家电脑继续用
技术人员 存储 API Key、服务器地址、配置信息
运营/自媒体 管理多账号密码、文案模板、素材链接
临时记录 快速记下灵感、待办事项、剪贴板内容

📦 安装

方式一：Chrome 应用商店（推荐）

从 Chrome 应用商店安装

点击此处前往 Chrome 应用商店安装

方式二：Edge 浏览器用户

SlideNote 完全兼容 Microsoft Edge 浏览器（Edge 114+），但暂未上架 Edge 商店。

Edge 用户请使用手动安装方式：

  1. 从 GitHub Releases 下载最新版本并解压
  2. 打开 Edge 浏览器
  3. 访问 edge://extensions/
  4. 开启左下角的「开发人员模式」
  5. 点击「加载解压缩的扩展」
  6. 选择解压后的文件夹

方式三：本地下载安装

从 GitHub Releases 下载最新版本：

  1. 下载并解压安装包
  2. 打开 Chrome 浏览器
  3. 访问 chrome://extensions/
  4. 开启右上角的「开发者模式」
  5. 点击「加载已解压的扩展程序」
  6. 选择解压后的文件夹

方式四：从源码构建

# 克隆仓库
git clone https://github.com/maoruibin/SlideNote.git
cd SlideNote

# 安装依赖
npm install

# 构建正式版
npm run build:prod
  1. 打开 Chrome 浏览器
  2. 访问 chrome://extensions/
  3. 开启右上角的「开发者模式」
  4. 点击「加载已解压的扩展程序」
  5. 选择项目根目录的 dist 文件夹

🚀 使用方法

基本使用

  1. 点击 Chrome 工具栏的 SlideNote 图标
  2. 侧边栏展开，即可开始使用
  3. 点击「新建笔记」创建第一条笔记
  4. 点击笔记项切换，开始编辑
  5. 右键点击笔记可排序或删除
  6. 停止输入 1 秒后自动保存

网页摘录

  1. 在任意网页选中文字
  2. 右键点击「保存到 SlideNote」
  3. 内容自动保存到当天的「网页摘录」笔记
  4. 摘录按日期自动聚合，同一天的摘录在一起

❓ 常见问题

笔记保存在哪里？安全吗？

SlideNote 使用 Chrome Storage API 存储数据：

  • ✅ 不经过第三方服务器，数据直接在你本地和 Google 之间同步
  • ✅ 项目已开源，代码透明
  • ✅ 不收集任何个人信息

同步容量有限制吗？

Chrome Storage Sync API 有以下限制：

  • 总容量约 100KB（约 5 万汉字）
  • 适合存储：API Key、命令、提示词等碎片信息

SlideNote 的定位是「便利贴」，不是「笔记本」。如需存储大量内容，建议使用 Notion、Obsidian 等专业笔记软件。

🛠️ 技术栈

Vanilla JS (ES6+)  →  无框架，极致轻量
Vite               →  快速构建
Chrome Storage     →  免费云同步
CSS Variables      →  设计系统

为什么不用框架？

理由 说明
性能 加载时间 < 100ms，无 100KB+ 框架开销
简单 CRUD 功能不需要复杂状态管理
稳定 无框架升级风险，代码长期可用

📁 项目结构

slidenote/
├── src/sidepanel/
│   ├── core/           # 数据层（Store, EventBus, SyncManager）
│   ├── components/     # UI 组件
│   └── utils/          # 工具函数
├── docs/               # 设计文档
└── public/icons/       # 图标资源

🎨 设计理念

克制的配色    → 单色主调，不抢注意力
清晰的层级    → 列表 vs 内容，一目了然
舒适的间距    → 呼吸感，不拥挤
统一的圆角    → 温和不尖锐

UI 设计规范

所有功能设计遵循统一的 UI 设计规范，确保产品一致性。

规范 说明
📄 设计规范文档 颜色、字体、间距、组件完整定义
🎨 组件可视化展示 所有 UI 组件的效果预览

核心设计要素：

主色:     #3b82f6  (蓝色)
字体:     11-16px  渐进式字号
间距:     4/8/12/16px 标准
圆角:     4/6/8/12px 渐进式

📮 关注作者

扫码关注公众号，获取开发日常和产品最新动态

公众号二维码

💖 感谢支持

如果这个项目对你有帮助，欢迎请我喝杯咖啡 ☕️

微信打赏 支付宝打赏

🌟 更多作品

查看我的更多项目和文章：doc.gudong.site

📄 开源协议

MIT License

👨‍💻 作者

咕咚同学 | 博客: https://blog.gudong.site/

Slide notes, always by your side

侧边笔记，常伴左右

如果这个项目对你有帮助，请给个 ⭐ Star 支持一下！