用 AI 开发一个 Chrome 插件：01Kit 实战指南

为什么要做自己的 Chrome 插件

我们总有一些很个性化的小需求。

比如我就有两个：

统计一下每天在不同网页上花了多少时间
工作时别让我打开知乎、B 站这些网站

以前的做法是去找现成的插件。但你总会遇到这些问题：

UI 不喜欢
功能差一点，想加点东西但改不了
要上传数据到别人服务器，不放心

现在用 AI 做一个自己的插件，成本已经低到离谱了。

你不需要懂太多技术细节，大部分代码都是 AI 写的。你只需要：

说清楚你要什么功能
跟着 AI 的指引跑几个命令
测试一下能不能用

就这么简单。

所以与其花时间找一个"差不多"的插件，不如直接做一个完全符合自己需求的。而且：

数据都在本地，不用担心隐私
想加什么功能随时加
不用担心作者不维护了
可以做很多自己觉得好玩的小功能

每个人都可以有一个自己的专属浏览器插件。

开发有多简单

说实话，开发一个 Chrome 插件，真的巨简单。

我只需要告诉你一句话：打开 Claude Code，跟它说"我要开发一个 Chrome 插件，需要包含什么什么功能"，剩下的就让它教你。

但如果教程就这么短，那也太水了。所以我来分享一些实际开发 01Kit 的经验。

第一步：梳理需求（5 分钟）

在开始之前，先把你想要的功能列出来。不用写得很正式，就像跟朋友聊天一样：

我的需求：

专注计时：能设置 25/45/60 分钟，也能自定义时长
网站屏蔽：工作时屏蔽知乎、B 站这些网站
时间统计：看看我每天在哪些网站上花了多少时间
数据本地存储：不要上传到服务器

就这么简单。需求越清楚，AI 生成的代码越靠谱。

第二步：让 AI 生成代码（10 分钟）

把你的需求整理成一段话，发给 AI（Claude 或 ChatGPT 都行）：

我要做一个 Chrome 插件，名字叫 01Kit。

功能：
1. 专注计时，支持 25/45/60 分钟预设，也支持自定义时长
2. 专注时屏蔽指定网站（黑名单模式）
3. 访问被屏蔽网站时显示屏蔽页，告诉我还剩多少时间
4. 后台自动统计各网站停留时间
5. 有个设置页面，可以看统计数据、导出数据

技术要求：
- 使用 WXT 框架（Chrome 插件开发工具）
- React + TypeScript
- 数据只保存在浏览器本地
- UI 要简洁

请给出完整的项目结构和代码。

AI 会生成完整的代码和项目结构。你只需要按照它的指引：

npm create wxt@latest
npm install
npm run dev

第三步：本地测试（30 分钟）

在 Chrome 打开 chrome://extensions/
开启"开发者模式"
点击"加载已解压的扩展程序"
选择项目里的 .output/chrome-mv3 目录

然后测试一下：

启动专注计时，看看能不能正常倒计时
访问被屏蔽的网站，看看会不会跳转到屏蔽页
打开设置页面，看看时间统计对不对

遇到问题就截图发给 AI，让它帮你改。大部分问题 AI 都能解决。

第四步：打包（5 分钟）

测试没问题后，打包一下：

npm run build
npm run zip

会生成一个 .output/*.zip 文件，这就是你的插件包。

要不要上架？

如果只是自己用，不需要上架。

直接用开发者模式加载就行：

打开 chrome://extensions/
开启右上角的"开发者模式"
把 .output/chrome-mv3 文件夹拖进去

缺点是每次重启浏览器会提示一下，但不影响使用。

如果想分享给朋友，也不一定要上架。

把打包好的 ZIP 文件发给他们，让他们：

打开 chrome://extensions/
开启"开发者模式"
把 ZIP 文件拖进去

Chrome 会提示"来自非商店的扩展程序"，但能正常用。

你也可以像我一样，做个简单的官网，提供下载链接和安装说明：https://01kit.app

如果想公开发布，才需要上架。

上架流程比较繁琐，但也不算太难。

上架详细流程

1. 注册开发者账号

访问：https://chrome.google.com/webstore/devconsole

需要：

Google 账号
一次性注册费 $5（用信用卡支付，招商银行的 Master 卡可以）

2. 准备身份验证材料

这是最麻烦的部分。Google 需要验证你的身份，要求提供：

必需材料：

手机号验证
身份证件（护照或身份证）
地址证明文件（需要显示你的姓名和地址）

地址证明可以用：

银行对账单（推荐用招商银行 APP 导出 PDF）
信用卡账单
公共事业账单（水电费账单）
必须是 60 天内的

这个审核需要 3-7 天。

3. 准备插件材料

必需文件：

插件 ZIP 包（npm run zip 生成的）
128x128 图标（PNG 格式）
至少 1 张截图（1280x800 或 640x400）
440x280 的宣传图（可选）

文字内容：

插件名称（最多 45 个字符）
简短描述（最多 132 个字符）
详细描述（说清楚功能、用途）
隐私政策（如果收集数据的话，不收集就写"本插件不收集任何用户数据，所有数据仅保存在本地浏览器"）

4. 提交审核

在开发者控制台：

点击"新增项目"
上传 ZIP 包
填写商店信息（名称、描述、分类）
上传图标和截图
填写隐私政策
提交审核

审核时间：

首次提交：1-3 天
更新版本：通常 1 天内

审核通过后，插件就会出现在 Chrome 应用商店，别人可以直接搜索安装。

5. 一些坑

图标要求很严格：

必须是 128x128 PNG
不能有透明背景
不能有文字（最好是纯图标）

截图建议：

展示核心功能
不要有太多文字说明
尺寸要符合要求（1280x800 或 640x400）

隐私政策：

如果你的插件不收集数据，就明确写出来
如果收集数据，要说清楚收集什么、怎么用、存在哪

审核可能被拒：

权限申请过多（只申请必需的权限）
功能描述不清楚
截图质量太差
隐私政策缺失

但说实话

个人用真的不需要上架。开发者模式加载就够了。

上架的好处主要是：

别人可以直接在应用商店搜到
自动更新
看起来更正规

但如果只是自己用，或者小范围分享，完全没必要折腾这些。

一些小经验

需求要具体

不要说"我要一个专注工具"
要说"我要一个能屏蔽知乎和 B 站的计时器"

善用 AI

遇到问题就截图发给 AI
让 AI 解释代码在干什么
需要加新功能就直接说

数据结构先想好

时间统计要存什么数据
屏蔽列表怎么存
这些在开始前想清楚，后面改起来很麻烦

充分测试

多试几个网站
试试极端情况（比如设置 0 分钟会怎样）
看看数据会不会丢

总结

现在开发 Chrome 插件真的很简单。有了 AI 辅助，一个人也能在几天内做出一个完整的插件。

关键是：

需求要清楚
善用 AI
充分测试

01Kit 项目地址：https://github.com/makerjackie/01kit-chrome

官网： https://01kit-chrome.01mvp.com/

用 AI 开发一个 Chrome 插件：01Kit 实战指南

目录