把网页的“好句子”都装进侧边栏:我做了个叫 Markbox 的收藏器,开源!

先直说结论:我做了一个浏览器侧边栏插件,叫 Markbox。用起来很简单------在网页上划一段文字,或右键一张图,存进侧边栏,随手整理、批量删、批量复制、导出/导入。看似不起眼,但它解决的不是"复制粘贴"技术问题,而是"信息流失与记忆碎片化"的深层问题。

下面像和你喝茶聊技术那样,碎碎念一通,把我为什么做、能做什么、还有我心里的一点怀疑都说清楚。


为什么需要它?先从一个小烦恼说起

你有没有这样的体验:看到一段特别中肯的话,或一段有用的代码片段,马上想保存;结果要打开笔记、切换应用、粘贴、再回到页面,来回几次------那种断流感很讨厌。久而久之,好的句子散了,写作素材、灵感、调研片段都像被风吹走的纸屑。

核心价值其实很朴素:把捕获信息的成本降到最低,并保留上下文(来源、时间)。这件事看似小,但对写作、研究、学习的人来说,能节省大量"回到原处找那句"的时间成本------这就是 Markbox 的存在理由。


Markbox 到底做了什么

简单说四件事:

  • 随手保存:选中文本右键或快捷键存,图片只存 URL(节省本地空间)。
  • 侧边栏常驻:信息随手可达,不像 popup 那样点开才显示。
  • 批量操作 :全选、批量删除、一次性复制多条文本,出手迅速。
  • 导入/导出:备份、迁移到别的工具(TODO List 当中)。

举个场景:你在看一篇长文,抓到三段有用的论据,点三次右键,侧边栏里整齐地列着,回头写文章直接复制,省得在十几个标签里翻找。是不是听起来像个小确幸?


我想过的可扩展(TODO List)

比如:

  • 云同步(多设备)+ 加密备份:写作或研究的人会愿意为"随时拿到资料"付钱。
  • OCR(图片文字识别):把图里的文字变成可搜索文本,尤其对截图党很有吸引力。
  • 标签/自动分类/智能搜索:当收藏上千条时,怎么找到所需变得关键。
  • 导出为 Markdown / 一键同步到 Notion/Obsidian:面向写作者的高级集成。
  • 高亮/注释/快照保存(保留原网页片段的截图):防止原站内容消失或被改。

我断定这些功能里,多设备同步 + 导出集成是部分核心用户的核心痛点。为什么?因为它们直接关联到"工作流程不被断开"这一刚需。


但是前期我只想让这个工具保持简洁

做工具这事儿,最容易犯的两个错:一是把每个可能的功能都往里塞,结果变成臃肿的工具箱;二是把"我觉得挺香"的功能,误以为用户也会买单。

我也在想,Markbox 如果只是一堆本地收藏,是否足够吸引人长期使用?很多人看重的是"生态适配"(能和 Notion/Obsidian/工作流程连上),或者是"云端访问"。没有这些,留存可能很难做上去。

所以我会坚持一个小原则:先确保抓取、检索、导出三件事做到极简而可靠,然后在实现"能真正节省跨设备查找时间"的功能。


我的施工步骤

bash 复制代码
yarn create plasmo
...
touch requirement
claude
/init 
@requirement.md 请实现我的需求

没错,我使用 plasmo 框架开发浏览器插件,然后真正的打工人是 Claude Code,他辅助实现,核心是我写了一个 requirement.md 这个是描述我具体的想做什么,就是我插件的核心功能了。

使用 Claude Code 之前,我先用init明令是为了让他熟悉这是一个 plasmo 框架搭建的浏览器插件基础工程。

这样他后续的工作都会清晰他实在做一个浏览器插件,随后才是真正的实现需求了。

当然后续也做过好些次的优化迭代。

此次迭代,我没有使用 spec development,以及将测试驱动开发的理念融入我们的工程中,其实是因为这个工程足够的简单,并不需要特别规范的流程来约束。所以,这也是我们在做需求时,心理需要具备的那杆秤。跳过一条 1.5 米的河,可能一给跳跑就过去了,并不需要搭建一座桥这么复杂,也不需要开来航空母舰护航,这就是我们应该具备的敏感度。


最后,我不想把文章收得太圆。工具是好,是坏,都要看你怎么用。Markbox 对我来说,是把"网页上的零碎知识"往一个固定口袋里收的尝试------不完美,但比任由它们散落强多了。

你会怎么用它?你是否期望上面那些高级功能?我想听听你们最真实的想法。

相关推荐
上园村蜻蜓队长3 小时前
ARM芯片架构之coresight 时间戳组件介绍
arm开发·架构
猎豹奕叔3 小时前
JD到家商品系统架构设计演进
后端
VincentFHR3 小时前
Canvas 高性能K线图,支持无限左右滑动
前端·数据可视化·canvas
sophie旭3 小时前
一道面试题,开始性能优化之旅(3)-- DNS查询+TCP(二)
前端·面试·性能优化
阑梦清川3 小时前
深入理解动静态库和ELF文件格式
后端
猎豹奕叔3 小时前
面试官:类中两个方法加同步锁,多线程能同时访问吗?
后端
面向星辰4 小时前
css选择器(继承补充)
前端·css
马里奥Mario4 小时前
电商系统商品三四级页接口性能优化记录存档
后端
koooo~4 小时前
Vue3中的依赖注入
前端·javascript·vue.js