AI编程实战：如何开发一个谷歌浏览器插件，并上架 Chrome 商店？
AI编程实战：如何开发一个谷歌浏览器插件，并上架 Chrome 商店？
本文适合：第一次用 AI 开发浏览器插件，并准备上架 Chrome 商店的人。
文章目录
- AI编程实战：如何开发一个谷歌浏览器插件，并上架 Chrome 商店？
- **01 浏览器插件到底是什么？**
- **02 一个 Chrome 插件最少需要哪些文件？**
- **03 用 AI 开发插件，应该怎么提需求？**
- **04 本地加载插件，先在自己电脑上测试**
- **05 注册 Chrome Web Store 开发者账号**
- **06 打包上传插件审核**
- **07 最后总结**
如果你现在正在学 AI 编程，或者想用 AI 做一个真正能发布的小产品，我很推荐从浏览器插件开始。
这篇文章就用最简单的方式，讲一下：
一个 Chrome 插件是怎么开发出来的？
本地怎么测试？
最后怎么上架到 Chrome Web Store？
不讲太多复杂概念，只讲最小流程。
01 浏览器插件到底是什么？
浏览器插件，本质上就是给浏览器增加一个小功能。
比如：
一键截图
网页翻译
标签页管理
密码管理
网页内容提取
复制网页标题和链接
屏蔽广告、自动填表、下载图片
AI 总结网页内容
这些都属于浏览器插件。
或者是一些小工具，软件嵌入到浏览器作为一个端口。
02 一个 Chrome 插件最少需要哪些文件？
一个最简单的插件，至少需要一个核心文件：manifest.json
这个文件可以理解为插件的配置文件。
它告诉 Chrome：这个插件叫什么名字，版本是多少，用的是什么权限，点击插件图标时打开哪个页面，是否需要读取网页内容，是否需要后台脚本
比如一个最简单的 manifest.json 长这样：
{ **"manifest_version"**: **3**, **"name"**: **"My First Extension"**, **"version"**: **"1.0.0"**, **"description"**: **"我的第一个 Chrome 插件"**, **"action"**: { **"default_popup"**: **"popup.html"**, **"default_title"**: **"My First Extension"** }, **"icons"**: { **"128"**: **"icon.png"** } }manifest_version现在一般写 3。
Chrome 插件现在主要使用 Manifest V3，这是 Chrome 扩展平台的最新版本，官方文档也明确把 Manifest V3 作为当前扩展开发的主线。
03 用 AI 开发插件，应该怎么提需求？
现在有 AI 之后，插件开发不一定要自己从零写代码。
你可以直接把需求丢给 AI。
比如你可以这样问：
我想开发一个 Chrome 浏览器插件，使用 Manifest V3。功能：1. 点击插件图标后弹出 popup 页面。2. popup 页面显示当前网页标题和 URL。3. 有一个按钮，可以一键复制标题和 URL。4. 请给我完整的文件结构和每个文件的代码。5. 我是新手，请告诉我怎么在 Chrome 本地加载测试。
AI 一般会直接给你生成：
manifest.jsonpopup.htmlpopup.jsstyle.css
如果你后续要加功能，也可以继续问：
在刚刚这个插件基础上，帮我增加一个功能：点击按钮后，把当前网页标题和链接保存到本地历史记录里。请给我修改后的完整代码。
当然，这样其实还是太麻烦了。
我现在的做法是直接跟AI聊需求，需求聊完，让AI出方案，确认方案可行，就去执行。
这里有一个重点：
不要一开始就让 AI 做很大的插件。
新手最容易犯的错误是，上来就说：
我要做一个功能完整、UI 精美、支持登录、支持云同步、支持 AI 总结、支持导出、支持多语言的插件。
这样很容易崩。更好的方式是：先做一个最小版本。
比如：
第一版：只获取当前网页标题和链接。
第二版：增加复制按钮。
第三版：增加历史记录。
第四版：增加设置页面。
第五版：增加同步或 AI 功能。
04 本地加载插件，先在自己电脑上测试
代码写完之后，先不要急着上架。
Chrome 扩展程序管理页面
第一步是在本地浏览器里测试。
打开 Chrome 浏览器，在地址栏输入：
chrome://extensions/
然后打开右上角：开发者模式
接着点击：加载已解压的扩展程序/加载未打包的扩展程序
选择你的浏览器插件项目目录。
如果没有报错，你就能在插件列表里看到它。
插件固定在浏览器工具栏并正常运行
若测试成功没问题，就可以准备上架。
若你不想上架Chrome，就可以直接将插件打成压缩包，自己用或者发给其他人用。
05 注册 Chrome Web Store 开发者账号
要上架 Chrome 商店，需要先注册 Chrome Web Store 开发者账号。
Chrome 官方文档说明，发布商品前需要注册为 Chrome Web Store 开发者，并支付一次性注册费用。
准备：1 个 Google 账号，1 张支持外币支付的信用卡，支付 5 美元。
我用的是国内招行的visa信用卡，招行APP线上就可以申请，支持外币。
大致流程是：
- 进入 Chrome Web Store Developer Dashboard
https://chrome.google.com/webstore/devconsole/register
使用 Google 账号登录
填写开发者信息
支付一次性注册费
完成账号注册
注册完成后，就可以创建新项目并上传插件。
Chrome Web Store 开发者注册页面
06 打包上传插件审核
进入 Chrome Web Store Developer Dashboard
Chrome Web Store 开发者控制台
上传刚刚打包好的 zip 文件。
上传成功后，开始填写插件信息。
一般包括：
名称
简短描述
详细描述
分类和语言
图标、截图和宣传图片
隐私信息和权限说明
是否收集用户数据
发布地区和可见性设置
这里有几个地方要认真填。
上传插件 ZIP 文件
这里需要将代码打包成 ZIP 文件。
插件项目文件结构
填写资料，不懂怎么填写，就复制/截图给AI，让AI帮你填写。
填写商店详情、分类和图片素材
上方会提示，你为什么不能提交审核，一个一个填写完成就可以了。
控制台提示尚未完成的资料
填写插件用途和权限说明
填写用户数据使用声明
选择发布地区和可见性
填写完成，等待审核，1-3天内就会有结果，我申请的两个已经通过了。
在这里插入图片描述
插件成功提交审核
一句话，遇到问题，让 AI 告诉你怎么解决，或者直接让 AI 帮你打包成插件就好。
上面是我最早做的两个插件，现在AI能力更强，做起来很容易，效果更好。
07 最后总结
浏览器插件开发，对 AI 编程新手来说，是一个很好的练习方向。
它足够小，容易开始。
它又足够真实，可以上架或者直接发压缩包让别人安装使用。
AI 时代，很多技术细节可以交给 AI。
但你要知道自己想做什么，要能把需求拆清楚，要能判断代码有没有跑通，要能把产品真正发布出去。
这才是最重要的能力。
如果你想用 AI 编程做一个自己的小产品，不妨先从浏览器插件开始。
不用一开始做很大。
先做一个能解决自己问题的小插件。