Slide notes, always by your side
侧边笔记，常伴左右
English
Chrome 浏览器侧边栏笔记插件 | 跨设备自动同步 | 极简设计
- 🌙 夜间模式 — 自动跟随系统深色模式，护眼又舒适
- 🐛 修复删除笔记后编辑器内容不更新的问题
- 🎨 修复暗色模式下社交图标颜色不适配的问题
- 🎨 Toolbar 重新设计 — 搜索/返回无边框，新建按钮占满中间
- 🎨 统一按钮图标尺寸，视觉更协调
- 🎨 左右间距对称，布局更平衡
📜 查看完整更新日志 → CHANGELOG.md
- 📌 侧边栏展示 — 固定在浏览器侧边，随时可用
- ✍️ Markdown 编辑 — 支持预览/编辑模式，实时渲染
- 📋 富文本复制 — 复制带样式的文本，可直接粘贴到其他应用
- 💾 自动保存 — 停止输入 1 秒后自动保存
- 🔄 跨设备同步 — 基于 Chrome Storage API，自动云端同步
- 🔍 搜索过滤 — 实时搜索标题和内容
- ⬆️⬇️ 导航切换 — 上下箭头快速切换笔记
- ⚡️ 极致轻量 — 无框架依赖，打包仅 24KB
| 场景 | 说明 |
|---|---|
| 多设备工作者 | 公司电脑记录，回家电脑继续用 |
| 技术人员 | 存储 API Key、服务器地址、配置信息 |
| 运营/自媒体 | 管理多账号密码、文案模板、素材链接 |
| 临时记录 | 快速记下灵感、待办事项、剪贴板内容 |
从 GitHub Releases 下载最新版本：
- 下载并解压安装包
- 打开 Chrome 浏览器
- 访问
chrome://extensions/ - 开启右上角的「开发者模式」
- 点击「加载已解压的扩展程序」
- 选择解压后的文件夹
# 克隆仓库
git clone https://github.com/maoruibin/SlideNote.git
cd SlideNote
# 安装依赖
npm install
# 构建正式版
npm run build:prod- 打开 Chrome 浏览器
- 访问
chrome://extensions/ - 开启右上角的「开发者模式」
- 点击「加载已解压的扩展程序」
- 选择项目根目录的
dist文件夹
- 点击 Chrome 工具栏的 SlideNote 图标
- 侧边栏展开，即可开始使用
- 点击「新建笔记」创建第一条笔记
- 点击笔记项切换，开始编辑
- 右键点击笔记可排序或删除
- 停止输入 1 秒后自动保存
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 内容，一目了然
舒适的间距 → 呼吸感，不拥挤
统一的圆角 → 温和不尖锐
扫码关注公众号，获取开发日常和产品最新动态
如果这个项目对你有帮助，欢迎请我喝杯咖啡 ☕️
|
|
查看我的更多项目和文章：doc.gudong.site
咕咚同学 | 博客: https://blog.gudong.site/
Slide notes, always by your side
侧边笔记，常伴左右
如果这个项目对你有帮助，请给个 ⭐ Star 支持一下！