AI编程实战：如何开发一个谷歌浏览器插件，并上架 Chrome 商店？

本文适合：第一次用 AI 开发浏览器插件，并准备上架 Chrome 商店的人。

如果你现在正在学 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.json

• popup.html

• popup.js

• style.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 编程做一个自己的小产品，不妨先从浏览器插件开始。

不用一开始做很大。

先做一个能解决自己问题的小插件。