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

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

相关推荐
bug攻城狮3 分钟前
Spring Boot 2.6+ 整合 PageHelper 启动报错:循环依赖解决方案全解析
java·spring boot·后端
心.c20 分钟前
深拷贝浅拷贝
开发语言·前端·javascript·ecmascript
周杰伦_Jay44 分钟前
【 RocketMQ 全解析】分布式消息队列的架构、消息转发与快速实践、事务消息
分布式·算法·架构·rocketmq·1024程序员节
IT_陈寒1 小时前
Vue 3.4性能优化实战:5个鲜为人知的Composition API技巧让打包体积减少40%
前端·人工智能·后端
前端九哥1 小时前
💻【急招!27届前端实习生】广州4399实习太幸福了!江景+三餐+健身房全都有😭
前端·面试·招聘
咖啡の猫1 小时前
Vue全局事件总线
前端·javascript·vue.js
大厂码农老A1 小时前
我带的外包兄弟放弃大厂转正,薪资翻倍入职字节
java·后端·面试
武子康1 小时前
大数据-136 - ClickHouse 集群 表引擎详解 选型实战:TinyLog/Log/StripeLog/Memory/Merge
大数据·分布式·后端
腾讯云开发者1 小时前
腾讯元宝搜索实践:大模型时代,AI 如何让搜索焕发新生
架构
Lovereo1 小时前
我的目标检测性能优化之路:预算不够、GPU 没有、但性能我得要
前端