Skip to content

Aschenbath/Notes

Repository files navigation

Notes icon

Notes

放在 Chrome 工具栏里的 local-first 备忘录。
普通行保留 Markdown 源码,task 行保留圈圈直接编辑正文;截图、清单、废纸篓和导出都在一个小 popup 里。

简体中文 · English · 日本語 · 한국어

Manifest V3 Live Markdown Local First No Build


它的性格

Notes 不是一块缩小版文档编辑器。它更像浏览器边上的便签纸:突然想到一句话、粘一张截图、写一个 - [] 干饭,不需要切页面,不需要开工作区,也不需要登录。

它的编辑方式刻意很特别:普通行显示 raw Markdown,task 行保留圈圈直接编辑正文,其它行自动渲染。这样你写的时候看得见源码,写清单时又不会被 - [ ] 这种符号打断;编辑器里的用户文本统一使用 Consolas-first 字体,不会从输入态跳到艺术展示字体。

✨ 核心三件事

📝 想快速记,不想开大编辑器
点一下扩展图标,popup 里直接新建、搜索、编辑,不切页面、不开工作区、不登录。

✍️ Markdown 写得自然
普通行保留 raw 源码,task 行编辑时也留着 checkbox 圈圈,列表、任务、引用、图片都按行处理。

🗑 笔记不会一删就没
删除先进废纸篓,可恢复、永久删除,或两步确认一键清空。

截图

动态演示

Notes 从列表进入编辑器并保持 bullet marker 和 task 圈圈渲染的动态演示

从列表点进一条 note,bullet 行在编辑态也提前渲染 ,task 行保留 checkbox 圈圈,只编辑正文;返回列表时,标题、更新时间和行操作继续保持低噪音。

完整场景

Notes 浏览器弹窗列表
弹窗列表

Notes 浏览器弹窗 Markdown 编辑器
行级 Live Markdown 编辑器

Notes 浏览器弹窗废纸篓视图
废纸篓与恢复

钉到侧边栏(边看边记)

popup 一点回网页就会被浏览器自动关,这是扩展弹窗的硬限制。想边看网页边记笔记,就点列表头或编辑头的「📌 固定到侧边栏」,把当前内容转到常驻侧边栏;点回网页、切标签都不会关,popup 和侧边栏可以共存。

Notes 固定到侧边栏后边看网页边记笔记
固定到侧边栏,点回网页也不关

更多干净状态细节(默认隐藏的控件演示)

列表默认态:顶栏工具隐藏

Notes 列表默认态干净截图

行 hover 操作态:时间隐藏,置顶 / 删除出现

Notes 行 hover 操作态截图

编辑器

Notes Live Markdown 编辑器干净截图

废纸篓

Notes 废纸篓与恢复操作干净截图

功能地图

能力都在下面这张表里。平时收起来让主线清爽,需要查的时候点开看。

📋 展开完整功能表
能力 说明
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 支持

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 ![](dataURL)

自动续行

- 第一项
- 按 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 支持从剪贴板直接粘贴截图或图片。处理流程:

  1. 读取剪贴板 image file。
  2. 转成 dataURL。
  3. 使用 canvas 等比压缩。
  4. 最长边限制为 1600px
  5. JPEG quality 使用 0.82
  6. 先铺白底,避免透明截图转 JPEG 后发黑。
  7. 如果压缩结果比原图更大,则保留原图。
  8. 插入为独立 Markdown image line。

导入与导出

📦 展开导入导出格式

全量 JSON 导出

{
  "version": 1,
  "exportedAt": "2026-06-02T00:00:00.000Z",
  "notes": []
}

JSON 导入

支持 { "version": 1, "notes": [] } 和裸数组 [] 两种格式。

情况 行为
新 id 追加。
相同 id,导入项更新 覆盖本地旧项。
相同 id,本地更新 保留本地项。
缺少 id 跳过。
content 不是 string 跳过。
当前在废纸篓视图 导入成功后回到 active notes。

单条 Markdown 导出

编辑器右上角提供当前 note 的 .md 导出。文件名来自第一条非空行,并自动去掉文件系统不支持的字符。

全部 Markdown 导出

列表页右上角的「导出全部为 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。

安装

  1. 下载或克隆本目录。
  2. 打开 chrome://extensions/
  3. 开启 Developer mode。
  4. 点击 Load unpacked。
  5. 选择 notes-extension 文件夹。
  6. 可选:打开 chrome://extensions/shortcuts 修改快捷键,默认建议为 Alt+Shift+N

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors