VideCoding谷歌浏览器插件–网站收藏管理-夜雨聆风

本文最后更新于2026-04-27，某些文章具有时效性，若有错误或已失效，请在下方留言或联系老夜。

VideCoding谷歌浏览器插件–网站收藏管理

我之前一直习惯使用Toby作为网站收藏夹，谷歌浏览器的自带收藏夹放一部分，Toby放一部分，但Toby开始限制收藏数量，于是为了方便自己使用，就使用codex模仿了一个

除了想介绍浏览器插件外，我还希望记录点使用心得

codex

我没用命令行或vscode插件，我直接使用的codex应用，使用的技术栈不复杂，但我没有深入学习过react，所以全程对话实现

一、初步框架规划

我自己写了一版业需，发给他让它完善，我觉得他完善的很好，然后我直接告诉它技术栈，使用react，shadcn和tailwind，它帮我完善了拖动组件dnd-kit和谷歌插件热更新组件CRXJS

二、开发节奏

基本是从大到小，从面到点，先搭建整体框架，然后开始聚焦某个功能模块，一直和它对话，直到开发出想要的功能和效果

三、UI设计

这点有点难受，毕竟是开发，没有特别顺手的工具，尝试安装了pencil，但没细研究，UI样式从简，就直接告诉codex使用shadcn组件样式，也算是可以了，但UI设计确实需要摸索出一个顺的工具，claude design出了，后面再摸索吧

四、曲折和反思

其实开发到最后，codex才告诉我，它为了快速实现效果，是模仿的shadcn，我告诉他直接用shadcn组件，等于将代码重构了一遍，我如果一开始就强调使用shadcn组件，可能UI完成的会快一点

拖动效果也是，开始为了快速实现，自己使用原生编写的，我告诉它使用dnd-kit才开始替换，组件和技术栈定好后，一定要注意让codex使用

功能就是自己尝试，慢慢打磨，可以将问题截图发给它，它也可以识别后修改

五、发布

发布时，需要图片介绍，icon等，chatgpt生成的很好，有个缺点是icon需要生成16、32、48、128的大小，它目前只能生成在一张图片里，最后是我使用ps进行截图

发布插件的很多话术，因为前期的积累，codex对于插件十分了解，发布过程中的简述、权限必要性等，全部让codex生成即可

商店下载使用链接：https://chromewebstore.google.com/detail/tabcard/mimfanignegkbnkcenlnkpigpnpkmbgk

六、开源

github链接如下，Readme也是codex写的，复用的申请谷歌插件商店时的图片介绍，可以直接在release中下载安装包，使用谷歌浏览器开发者模式安装

https://github.com/seven-share/TabCard

七、后记

我后续应该会再尝试使用vscode插件开发，看着代码，让AI去修改，可能会快一点，一直对话，有时真的感觉自己改可能直接就改好了，让它改需要多轮对话

让AI写的同时，如何提高自己的编码能力，也是有个需要探索的过程

codex感觉有个坑，我把目录换了位置，显示线程找不到该位置，需要新开线程，仿佛之前的记忆都没了，需要重新耐心引导

TabCard 不想替代书签栏，而是希望帮你更轻松地管理那些

– 不常打开，但不想丢的网站

– 需要按主题分类整理的资源

– 想跨设备同步或手动备份的收藏

功能亮点

– 新标签页展示收藏内容，左侧分类，右侧网站卡片

– 支持分类拖拽、卡片拖拽、跨分类移动

– 支持直接将卡片拖到左侧分类中

– 支持搜索标题和网址

– 支持导入 Chrome 书签 HTML

– 支持导出为 HTML 文件

– 支持 Chrome 同步

– 支持浅色、深色、跟随浏览器

– 支持一键保存当前窗口全部标签页到“临时保存”t