Note Tab - 把 Chrome 新标签页变成你的 Obsidian 日记工作台

程序员费曼大约 4 分钟Obsidian插件效率工具知识管理Chrome 扩展

Note Tab - 把 Chrome 新标签页变成你的 Obsidian 日记工作台

每天打开浏览器几十次新标签页,如果每一次都能看到自己的 Obsidian 笔记呢?Note Tab 是一个 Chrome 扩展(Manifest V3),它接管新标签页,把它变成一个完整的 Obsidian 日记工作台:今日日记、日历、标签侧边栏、任务清单一应俱全,查看和编辑都直接写回你的本地仓库。

它不是 Obsidian 插件,而是一个浏览器扩展——通过配套的 Note APIopen in new window Obsidian 插件提供的本地 HTTP 接口读写笔记,数据始终留在你自己的机器上。

下载与安装

安装分两步:先装 Obsidian 端的 Note API 插件(提供数据接口),再装浏览器扩展。

第一步:Obsidian 安装 Note API 插件

  1. 在 Obsidian 中安装并启用 Note API 插件;
  2. 打开插件设置,复制 API key(扩展连接时要用);
  3. 确认服务状态显示 Running on http://127.0.0.1:27124

Note API 的设置页里也有扩展的下载入口,装好插件后可以直接从那里下载。

第二步:Chrome 加载扩展

  1. 下载上面的 zip 并解压;
  2. 打开 chrome://extensions,开启右上角的 开发者模式
  3. 点击 加载已解压的扩展程序,选择解压出来的文件夹;
  4. 打开一个新标签页 → 点击右上角 ⚙ → 填入 host(默认 127.0.0.1)、port(默认 27124)和刚才复制的 API key。

后续会尽快发布到 Chrome 应用商店,届时可直接安装,无需开发者模式。

核心功能

打开新标签页就是今日日记

默认直接打开今天的日记(journals/YYYY-MM-DD.md),日记目录读取的是 Obsidian 自己的 daily-notes 配置,和你原有的工作流无缝衔接。顶部的快速输入框随手记录,回车就追加到今日日记;粘贴图片会先存本地,保存时才上传到仓库的 assets/ 目录,取消编辑则什么都不上传。

所见即所得的渲染与编辑

所有笔记卡片由 Milkdown/Crepeopen in new window 渲染,查看和编辑用的是同一个渲染器——双击卡片就地切换为编辑模式,Cmd/Ctrl+Enter 保存,Esc 取消,看到什么样保存就是什么样,不会出现"预览和源码两副面孔"。

任务列表用圆形复选框渲染,只读状态下直接点击圆圈就能勾选/取消任务,不用先进入编辑模式。

日历视图

左侧月历在写过日记的日期上打圆点,点击任意一天(过去或未来)直接打开那天的日记。配合"日记"菜单按时间倒序浏览,复习一周的记录非常顺手。

标签侧边栏与自定义菜单

侧边栏展示全仓库的标签索引,点击即筛选。更灵活的是自定义菜单:在扩展设置页里配置你自己的侧边栏入口,支持三种类型——

  • 文档:固定打开某篇笔记(如收件箱 pages/index.md、收藏夹 pages/favorite.md);
  • 文件夹:按目录筛选,支持逗号分隔多个目录;
  • 关键词:按标签关键词筛选,支持嵌套标签(配 ai 会命中 #ai/破局 这类子标签),点击后自动展开二级关键词树。

自定义菜单会随机分配水果图标,和固定菜单(全部笔记、今日日记、日记、笔记盲盒)的图标互不重复。

笔记盲盒

随机抽一篇旧笔记展示在新标签页——温故知新,给沉睡的笔记第二次生命。

隐私与安全

  • 所有数据读写都经过你本机的 Obsidian(默认 127.0.0.1:27124),笔记不出本机;
  • 每个请求都带 Authorization: Bearer <api-key>,key 存在 chrome.storage.sync
  • host/port 可配置,如果 Obsidian 监听了局域网地址,也能指向另一台机器。

技术栈

  • Chrome MV3 扩展(无后台 service worker,只有新标签页)
  • Milkdown/Crepeopen in new window 渲染与编辑(ProseMirror 内核)
  • esbuild 打包,单元测试 + Playwright e2e(含 roundtrip 保真测试:编辑后不改动保存,内容与原文逐字节一致)
  • 内存优化:卡片视口懒加载(IntersectionObserver),活跃编辑器实例数封顶在一屏
感谢支持 · 欢迎交流(请喝咖啡 / 加好友定制化开发)
请喝咖啡 / 加好友定制化开发二维码

点击图片可放大查看