[分享创造] 用 vibe coding 做了一个本地优先的 X/Twitter 书签管理插件,聊聊过程

发布时间 2026-09-28 2 天前
来源 V2EX
字数 1,376 字
查看原文

补充自 2026年09月29日

AI智能总结

作者因 X/Twitter 原生书签和点赞(累计逾四万条)难以检索、且高度依赖平台,自己用 vibe coding 方式开发了一款本地优先的浏览器扩展 Twitter Mark,基于 WXT + React + TypeScript + Dexie 构建。

起因其实很朴素:我自己的 X/Twitter 书签和点赞越攒越多,书签有一万多条,点赞有三万多条(以前把点赞当书签用)。

但真正想找某条内容时,原生列表基本只能一直往下翻。记得作者还好,不记得作者、只记得正文里某个词,几乎就只能放弃。

另一个让我有点不踏实的地方是,这些「收藏」实际上仍然完全依赖平台:账号状态、帖子删除、产品界面调整,都会影响之后还能不能找到。于是我想做一个很个人化的工具:把已经收藏过的内容沉淀到本地,能搜索、整理,也能自己备份。

最后做成了 Twitter Mark ,一个基于 WXT + React + TypeScript + Dexie 的浏览器扩展。

书签截图:

点赞截图:

它现在主要做几件事:

  • 读取当前浏览器里已经登录的 X 会话,只读同步书签和点赞;
  • 数据保存在本地 IndexedDB ,不要求再注册一个云端账号;
  • 可以按正文、作者、语言、媒体类型和时间筛选,也可以自己打标签;
  • 支持增量/全量同步、后台同步、暂停后继续,以及 JSON 导入导出;
  • 同步过程不会替你发帖、点赞、关注,也不会取消书签。

实现中最麻烦的其实不是 UI ,而是「如何保证同步不会把已有数据搞坏」。x.com 的网页 GraphQL 并不是稳定的公开 API ,Query ID 、返回结构和限流都有可能变。所以我给自己定了几个硬约束:解析异常不能当成空列表,远端某次没返回的数据不能自动从本地删除;每一页数据写入后才推进 cursor ;中断、限流或浏览器退出后要能从 checkpoint 继续。

关于 vibe coding

这个项目大部分代码是用 vibe coding 的方式完成的,但实际过程并不是一句「帮我做个插件」然后等结果。

我先把产品边界写清楚,尤其是「本地优先、只读、已有数据优先」这几个不能破坏的原则;再把系统拆成 X 网页请求、同步引擎、存储层、任务调度和资料库 UI 几块。每次只让模型处理一个范围比较小、可以验证的改动,然后马上跑类型检查和测试,再用真实账号做小批量验证。

模型在搭页面、补类型、写重复性代码上确实很快,但在分页状态、失败恢复和数据一致性上,还是很容易给出「看起来能跑」的实现。比较有效的做法是先写清楚不变量,再让它根据这些约束补测试,而不是只看 happy path 。比如:cursor 什么时候可以提交、重复同步是否幂等、解析失败会不会误删本地数据、切换账号时任务会不会串数据,这些都需要人主动盯着。

我目前最大的体会是:vibe coding 很适合把一个人脑子里的小工具快速做出来,但前提是人要负责定义问题、控制范围和验收。模型可以加速实现,却不会自动替你做出正确的产品取舍。

项目现在已经能日常使用,但同步依赖 X 的网页接口,未来接口变化时仍可能需要跟着维护。我也还在继续打磨搜索、同步稳定性和跨浏览器体验。

如果你也有大量 X 书签/点赞,想听听大家平时是怎么整理的,以及对「本地资料库」这种做法最在意什么。

项目主页: https://twittermark.com

Chrome 商店: https://chromewebstore.google.com/detail/twitter-mark/phoiffgkjjfnjfljnjgmpobmanghlaga


体验过后如果觉得不错,需要激活码激活终身版的可以在评论区留言,我可以免费发放一些。