最近做了一个管理浏览器标签页的插件 TabTab.

安装完插件 Ctrl + T 打开新标签页, 就进入 TabTab 了, 你可以按你需求创建空间&合集; 你可以将右侧网页拖拽到合集区域即可完成收藏.

这里和大家分享一下开发历程.

缘由

为什么要做这个插件, 一方面 chrome 自身的书签管理不够直观；另一方面我常年重度使用浏览器开展我的工作, chrome 成了我实际的工作台. 我需要一个 简单直观 并且 操作简单 的 dashbord 来管理我的所有标签页. 最初, 我用过 NiceTab 这个插件, 但是 ui 和交互都不能让我满意, 于是有了自己构建一个的想法.

技术选型

我看了主流的框架, 谨慎 (拍脑袋) 地选择了 WXT 这个框架, 但作为一个业余前端, 我的前端技术栈一直停留在 Vue2.6. WXT 默认不支持 Vue2, 我也意识到该升级下技术栈了.

看了下 Vue3, 原本我习惯了选项式 api, 组合式 api 用起来不够顺手. 本来这一点我已经在克服了, 安慰自己这个是当下最时髦的写法. 但是等我接触到 ref 和 reactive 等概念后, 我有点懵逼了. 原本我想用现有技术栈快速上手的, 但是升级 Vue3 的时间远远超出了我的预期.

本着学都学了就学点最时髦技术的心态, 最终我的技术栈定为了 WXT + react + tailwind + shadcn ui.

动手干

接下来一到两周吧, react 、tailwind 、shadcn 、react-router 、WXT 我一一看了遍文档, 然后吭哧吭哧搭了一个主体框架. 中间我顺便学了下 typescript, 之前我是一直 js 一直爽, 但是现在大部分项目 startup 都是 ts, 还要我研究怎么换成 js ... 想想算了, 咬咬牙, 都到这儿了把 ts 也啃了算了.

Cursor 助力

在这次体验之前, 我对 cursor 还停留在仅仅能写一些简单代码的印象上, 再次尝试后的我惊掉了下巴😳. Cursor 在理解我代码的基础上, 帮我做了一半以上的需求.

并且, Cursor 基本上都在按照我已有的框架, 去实现我的需求(可能也是我代码写的非常清新🫢, 易于 LLM 理解). 在这个过程中, 基本一两天的功夫, 把插件主体功能都做完了.

这中间, 我的 Cursor 额度用完了, 顺便试了下 deepseek-chat, 效果也不错, 在代码质量上我没有感受到差别. 但是 deepseek 性价比拉满, 是真便宜啊, ¥1/100w token 的价格, 而且注册就送 ¥10, 最后我做完需求, 我的余额还有 ¥9... (感觉程序员这碗饭是吃不了几年了)

卡点

Cursor 虽然效率很高, 但是在部分场景下还是不能完美处理, 主要体现在 TabTab 的拖拽问题上. 流畅拖拽是 TabTab 核心功能点, 但是 Cursor 几次写下来都还差点意思. 在我重试几次不同的提示词后, 我最终放弃了 Cursor, 转头看文档自行处理拖拽事件.(也算为程序员找回了场子, AI 还不是万能的). 但是除了卡片拖拽操作是古法制作 (手写代码) 外, 其余绝大部分都是 Cursor 帮我完成的.

Landing Page

本来没有打算做 landing page 的, 想着插件上架就完事. 但是前面 cursor 体验不错, 于是打算顺手用 AI 做一下官网. 找 cursor 帮我干活之前, 我花了半天时间看了下 nextjs 文档.(毕竟我是监工, 也不能让 cursor 在我眼皮底下胡编乱造.)

不过, 这个时候我看到有人分享字节推出的 trae, 目前还是免费阶段. 看了下官网的宣传视频, 我也试着用截图的方式提需求.

我把 shipany.ai 的网页从上至下截了五张图丢给 trae, 然后... 然后 trae 帮我复刻了出来,npm run dev 直接运行, 没有任何报错, 复刻程度 90% ！！！再一次惊掉了我的下巴. (随即抛弃了 cursor)

接下来我重新截了 shipany 几张 dark 模式下的效果图, 让 trae 帮我修正了暗黑模式的样式.

然后我又继续输入如下需求：

帮我把项目中所有的文案, 剥离到 src/config 目录下, 方便内容配置.

然后, trae 不仅帮我全部搬运完成, 而且分模块处理. 最后我填充完文案, 其中部分配置大概成这样：

export const siteConfig = {
  name: "TabTab",
  metadata: {
    title: "TabTab - 浏览器标签页管理工具",
    description: "TabTab 是一个浏览器标签页管理工具。它可以帮助您管理多个标签页，并提供多种功能，如标签页分组、标签页搜索、标签页管理等。"
  },
  theme: {
    lang: "zh",
    defaultTheme: "system",
    toggleAria: "切换主题",
  },
  intro: {
    description: "TabTab 是一个浏览器标签页管理工具。它可以帮助您管理多个标签页，并提供多种功能，如标签页分组、标签页搜索、标签页管理等。",
  },
  slogan: "你的一站式工作台",
  logo: {
    src: "/logo.svg",
    alt: "TabTab Logo",
  },
  promotion: {
    tag: "2025",
    text: "🎉 新年快乐",
  },
  title: {
    title1: "TabTab",
    highlight: "快速整理",
    title2: "浏览器书签",
  },
  cta: {
    primary: "按照Chrome插件 ⚡",
    secondary: "阅读文档",
    primaryLink: "https://chromewebstore.google.com/detail/tabtab/bplfdojoimpegfcgepljdbfjdalmcffa",
  },
  stats: {
    discount: "快来试试吧👋",
    users: "from 200+ happy users",
  },
} as const;

最后, 我做了些许调整, 补充下几个 icon + 链接, 整体页面就完成了.

(后续等我脱敏一下, 这个 landing page 可以以模版形式分享给大家)

上线

插件上线没什么可说的, 就是直接打包丢给 google 审核就行, 审核大概 2 ～ 4 天的样子. 值得一提的是, 如果你配置清单里声明了某个权限, 而你代码里还没使用这个权限, 审核时会被驳回. 驳回重新打包上传又得 2 ～ 4, 这里大家小心踩坑.

官网上线更简单了, 项目推到 github, 在 vercel 上啪嗒啪嗒点几下就上线了. 考虑到 vercel 域名国内基本不能访问, 我从 godaddy 上重新买了域名, 最后地址请访问 👉 https://tabtab.xyz

最后

本次这个小项目的开发, 让我受益颇丰. 作为非前端程序员, 仅仅做些自己项目, 本来我以为用 vue2.6 可以用到老的. 但是这次一下子恶补了很多新框架, 技术栈也从 vue 切到了 react. 另外, 我发现 tailwind 确实是一个宝藏框架, 一方面简化我的样式编写, 另一方面对于 ai 编程相当友好.

最后的最后, 欢迎大家👏来尝试下我的这个插件 https://www.tabtab.xyz, 希望对大家有用.

后续功能还在开发中 (年后再说)

• 同步
• 分享
• ...