把网页的“好句子”都装进侧边栏:我做了个叫 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 对我来说,是把"网页上的零碎知识"往一个固定口袋里收的尝试------不完美,但比任由它们散落强多了。

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

相关推荐
追逐时光者1 分钟前
一个基于 .NET WPF 开源的本地硬盘千万级图库以图搜图小工具!
后端·.net
毕设源码-钟学长11 分钟前
【开题答辩全过程】以 基于springboot的在线影院系统设为例,包含答辩的问题和答案
java·spring boot·后端
花归去16 分钟前
【Vue3】 中的 【unref】:详解与使用
前端·javascript·vue.js
程序员爱钓鱼22 分钟前
Python 实战:如何读取多格式 Excel 并实现跨表匹配合并(支持 XLS / XLSX)
后端·python·面试
小霖家的混江龙24 分钟前
巧用辅助线,轻松实现类拼多多的 Tab 吸顶效果
前端·javascript·react.js
程序员爱钓鱼28 分钟前
Python编程实战:实现一个 Excel 批量处理工具(桌面实用脚本)
后端·python·ipython
q***235737 分钟前
Spring Boot+Vue项目从零入手
vue.js·spring boot·后端
A***279538 分钟前
前端路由管理最佳实践,React Router
前端·react.js·前端框架
风象南40 分钟前
Spring Boot + MyBatis:实现数据库字段级加密
后端