放在 Chrome 工具栏里的 local-first 备忘录。
普通行保留 Markdown 源码,task 行保留圈圈直接编辑正文;截图、清单、废纸篓和导出都在一个小 popup 里。
Notes 不是一块缩小版文档编辑器。它更像浏览器边上的便签纸:突然想到一句话、粘一张截图、写一个 - [] 干饭,不需要切页面,不需要开工作区,也不需要登录。
它的编辑方式刻意很特别:普通行显示 raw Markdown,task 行保留圈圈直接编辑正文,其它行自动渲染。这样你写的时候看得见源码,写清单时又不会被 - [ ] 这种符号打断;编辑器里的用户文本统一使用 Consolas-first 字体,不会从输入态跳到艺术展示字体。
📝 想快速记,不想开大编辑器
点一下扩展图标,popup 里直接新建、搜索、编辑,不切页面、不开工作区、不登录。
✍️ Markdown 写得自然
普通行保留 raw 源码,task 行编辑时也留着 checkbox 圈圈,列表、任务、引用、图片都按行处理。
🗑 笔记不会一删就没
删除先进废纸篓,可恢复、永久删除,或两步确认一键清空。
从列表点进一条 note,bullet 行在编辑态也提前渲染 •,task 行保留 checkbox 圈圈,只编辑正文;返回列表时,标题、更新时间和行操作继续保持低噪音。
popup 一点回网页就会被浏览器自动关,这是扩展弹窗的硬限制。想边看网页边记笔记,就点列表头或编辑头的「📌 固定到侧边栏」,把当前内容转到常驻侧边栏;点回网页、切标签都不会关,popup 和侧边栏可以共存。
能力都在下面这张表里。平时收起来让主线清爽,需要查的时候点开看。
📋 展开完整功能表
| 能力 | 说明 |
|---|---|
| Popup-first | 点击扩展图标直接打开 360px 笔记 popup,不跳转新页面。 |
| 固定到侧边栏 | popup 顶栏或编辑头点「固定到侧边栏」,把笔记转到常驻 side panel;点回网页、切标签都不关,适合边看网页边记,可与 popup 共存。 |
| Local-first | 笔记、置顶、废纸篓状态保存在 chrome.storage.local。 |
| 自定义笔记名 | 每条笔记第一行自动作为标题;改第一行就是重命名。 |
| 行级 Live Markdown | 普通编辑行显示 raw Markdown;task 行在编辑态也保留 checkbox 圈圈,只编辑正文。 |
| Consolas 文本展示 | 当前 raw 行和已渲染行都使用 Consolas-first monospace,输入和阅读不会跳字体。 |
| 任务 shorthand | - [] 干饭 会识别成未完成 task,并规范切换为 - [ ] / - [x]。 |
| Checkbox 不抢光标 | task checkbox 在阅读态和编辑态都保持可见;点击只切换完成状态,不会把整行拉回 raw marker。 |
| 自动续行 | bullet、ordered list、task list 按 Enter 自动续行;有序列表会递增。 |
| 标题搜索 | 底部搜索框只按标题(首行)过滤,不搜正文,也不会命中图片数据。 |
| 时间分组 | 按今天、昨天、过去 7 天、过去 30 天和月份自动分组。 |
| 默认显示时间 | 列表默认显示更新时间;hover 行时隐藏时间并显示置顶/删除。 |
| 低噪音工具栏 | 右上角废纸篓、导入、导出、清空等工具默认隐藏,hover/focus 后出现。 |
| 置顶 | 置顶笔记排在前方,并用低噪音左侧细线标识。 |
| 废纸篓 | 删除先进入废纸篓,可恢复、永久删除或两步清空。 |
| 30 天自动清理 | 打开插件时会清理超过 30 天的废纸篓笔记。 |
| 图片粘贴 | 剪贴板截图可直接粘贴为独立 Markdown image line。 |
| 图片压缩 | 新粘贴图片先经 canvas 等比压缩,最长边 1600px,JPEG quality 0.82。 |
| 透明图保护 | 转 JPEG 前铺白底,避免透明截图变黑。 |
| JSON 导入导出 | 支持完整备份和恢复;同 id 数据按 updatedAt 合并。 |
| 单条 Markdown 导出 | 编辑页右上角可导出当前笔记为 .md,文件名来自首个非空行。 |
| 导出全部为 Markdown | 列表页右上角可把全部笔记打包成一个 zip,每条是独立 .md,命名规则和单条导出一致。 |
| 自动保存 | 输入后 debounce 保存;窗口失焦、隐藏或关闭前会 flush。 |
| 自动日夜主题 | 18:00 到 06:00 暗色,其余时间亮色。 |
| 全局快捷键 | 默认建议快捷键为 Alt+Shift+N,也可在 Chrome 扩展快捷键页改。 |
| Markdown | 示例 |
|---|---|
| Heading | # Title |
| Bullet list | - item / * item |
| Ordered list | 1. item |
| Task list | - [ ] task / - [x] task / - [] task |
| Blockquote | > quote |
| Horizontal rule | --- |
| Bold | **bold** / __bold__ |
| Italic | *italic* |
| Strikethrough | ~~delete~~ |
| Inline code | `code` |
| Link | [title](https://example.com) |
| Image |  |
- 第一项
- 按 Enter 后自动继续 bullet
9. 第九项
10. 下一行自动递增
- [x] 已完成
- [ ] 下一行自动变成未完成任务
空列表项内继续按 Enter 会退出列表,生成普通空行。
平时不用记,要查某个动作怎么用的时候点开就行。
🛠 展开完整操作手册
列表视图
| 操作 | 行为 |
|---|---|
| 点击笔记行 | 打开编辑器。 |
| 点击底部新建按钮 | 创建新笔记并聚焦第一行标题。 |
| 输入搜索词 | 只按标题(首行)实时过滤。 |
| hover/focus 笔记行 | 显示置顶和移入废纸篓按钮。 |
| 点击置顶 | 在置顶和取消置顶之间切换。 |
| 点击删除 | soft delete,笔记进入废纸篓。 |
右上角工具栏
列表页右上角工具栏默认低可见度,hover/focus 后出现,减少常驻视觉噪音。
| 按钮 | 行为 |
|---|---|
| 固定到侧边栏 | 把当前 popup 转成常驻侧边栏;编辑某条笔记时点它,会把这条笔记带到侧边栏继续写。 |
| 废纸篓 | 在 active notes 和 trash notes 之间切换。 |
| 清空废纸篓 | 仅在废纸篓有内容时出现;第一次点击进入确认态,第二次点击清空。 |
| 导入 | 选择 .json 备份文件并合并到本地。 |
| 导出 | 导出全部 notes 为 JSON。 |
| 导出全部为 Markdown | 把全部 notes 打包成 zip 下载,每条一个 .md。 |
废纸篓
| 操作 | 行为 |
|---|---|
| Restore | 恢复笔记到主列表。 |
| Permanent delete | 永久删除单条笔记。 |
| Empty trash 第一次点击 | 按钮进入红色确认态。 |
| Empty trash 第二次点击 | 清空废纸篓。 |
| 3 秒内未确认 | 自动退出确认态。 |
| 30 天后 | 打开插件时自动清理旧废纸篓笔记。 |
编辑器
| 操作 | 行为 |
|---|---|
| 点击普通行 | 该行变成 raw Markdown,可直接编辑。 |
| 点击 task 行 | checkbox 圈圈保持渲染,只编辑任务正文。 |
| 离开当前行 | 当前行即时渲染。 |
Enter |
在光标位置拆分当前行。 |
| 左上返回按钮 | 保存当前笔记并回到列表。 |
行首 Backspace |
合并到上一行。 |
上一行是图片时行首 Backspace |
删除图片行。 |
| 点击 task checkbox | 切换完成状态,不暴露 raw marker。 |
| 粘贴多行文本 | 按换行拆成多条 editor line。 |
| 粘贴截图 | 插入一条 Markdown image line,并自动创建下一空行。 |
| 中文输入法 | composition 保护,输入过程中不丢字、不误提交。 |
🖼 展开图片粘贴与压缩流程
Notes 支持从剪贴板直接粘贴截图或图片。处理流程:
- 读取剪贴板 image file。
- 转成 dataURL。
- 使用 canvas 等比压缩。
- 最长边限制为
1600px。 - JPEG quality 使用
0.82。 - 先铺白底,避免透明截图转 JPEG 后发黑。
- 如果压缩结果比原图更大,则保留原图。
- 插入为独立 Markdown image line。
📦 展开导入导出格式
{
"version": 1,
"exportedAt": "2026-06-02T00:00:00.000Z",
"notes": []
}支持 { "version": 1, "notes": [] } 和裸数组 [] 两种格式。
| 情况 | 行为 |
|---|---|
| 新 id | 追加。 |
| 相同 id,导入项更新 | 覆盖本地旧项。 |
| 相同 id,本地更新 | 保留本地项。 |
| 缺少 id | 跳过。 |
content 不是 string |
跳过。 |
| 当前在废纸篓视图 | 导入成功后回到 active notes。 |
编辑器右上角提供当前 note 的 .md 导出。文件名来自第一条非空行,并自动去掉文件系统不支持的字符。
列表页右上角的「导出全部为 Markdown」会把当前所有 notes 打包成一个 notes-md-<日期>.zip 下载,里面每条笔记是独立 .md,命名规则与单条导出完全一致(首个非空行去掉非法字符,重名自动追加序号)。zip 是纯 JS 手写的 store-only 格式,不引入任何依赖、不需要构建。
🗃 展开数据结构
{
id: "n_xxx",
content: "第一行是标题\n正文...",
createdAt: 1710000000000,
updatedAt: 1710000000000,
pinned: true,
deletedAt: 1710000000000
}| 字段 | 说明 |
|---|---|
content |
笔记全文;第一行用于列表标题。 |
pinned |
控制置顶排序和左侧细线。 |
deletedAt |
存在时表示笔记位于废纸篓。 |
createdAt / updatedAt |
创建和更新时间戳。 |
| 权限 | 用途 |
|---|---|
storage |
保存笔记、置顶状态、废纸篓状态。 |
unlimitedStorage |
给包含图片的本地笔记提供更充足的存储空间。 |
Notes 不需要账号,不连接后端服务,不包含 analytics。界面装饰文字使用 Cormorant Garamond,编辑器正文使用 Consolas 优先字体;如需完全离线字体,可在 styles.css 中替换字体 import。
- 下载或克隆本目录。
- 打开
chrome://extensions/。 - 开启 Developer mode。
- 点击 Load unpacked。
- 选择
notes-extension文件夹。 - 可选:打开
chrome://extensions/shortcuts修改快捷键,默认建议为Alt+Shift+N。








