用 AI 做一个 Chrome 浏览器插件实战

2026-06-18

想做个浏览器插件——划词翻译、一键去广告、自动填表、把当前页面摘要发到飞书——但一看前端就劝退？好消息是：用 AI 开发浏览器插件，是 AI 编程里”门槛最低、成就感最高”的入门项目之一。本文带你从零做出一个能在 Chrome 里真实运行的扩展，全程让 AI 写代码，你只负责描述需求、点几下鼠标和验证效果。

Chrome 插件是什么，为什么适合 AI 入门

Chrome 插件（扩展）本质上就是一个跑在浏览器里的小网页：一堆 HTML / CSS / JavaScript 文件，加上一个叫 manifest.json 的”说明书”，告诉浏览器”我叫什么、要哪些权限、点击图标弹什么、在哪些页面注入脚本”。

它特别适合作为 AI 编程的第一个项目，原因很实在：

不用搭服务器、不用配数据库，几个文件就能跑，AI 一次就能生成完整骨架。
反馈极快：改完代码，浏览器里点一下”重新加载”就能看到效果，调试闭环短。
需求具体：你每天用浏览器，痛点清清楚楚，描述给 AI 时不容易跑偏。

和做一个完整网站相比，插件的范围被浏览器框死了，AI 不容易”想多”，新手也更容易跑通。如果你完全没碰过 AI 写代码，建议先看Cursor 教程和用 AI 做个机器人实战，把基本操作热个身再回来。

第一步：准备工具，把需求想清楚

你需要两样东西：

一个 AI 编程工具。推荐用 Cursor 或 Claude Code——前者是带 AI 的编辑器，能直接在项目里对话改文件；后者是终端里的 AI 智能体，适合让它自己建文件、跑命令。两者都能胜任，挑你顺手的。
Chrome 浏览器（或任意 Chromium 内核浏览器，如 Edge）。

然后，把需求写成一句话外加几条细节，这是整个项目最关键的一步。AI 写得好不好，八成取决于你说得清不清楚。一个好的需求描述长这样：

帮我做一个 Chrome 插件，叫”页面摘要”。点击浏览器右上角的插件图标，弹出一个小窗口，里面有个按钮”提取本页正文”。点了之后，把当前网页的主要文字内容抓出来，显示在窗口里，并提供一个”复制”按钮。用 Manifest V3。

注意它包含了：插件名、触发方式、界面长什么样、点击后干什么、技术约束（Manifest V3）。越具体，AI 一次成型的概率越高。

第二步：让 AI 生成 manifest 和核心逻辑

把上面的需求丢给 AI，让它生成整个项目。Manifest V3 是目前 Chrome 的现行扩展规范（V2 已逐步淘汰，新项目一定要用 V3，否则上不了商店）。AI 通常会给你这样几个文件：

manifest.json——插件的”说明书”，声明名称、版本、权限、弹窗页面、图标。
popup.html + popup.js——点击图标弹出的小窗口和它的逻辑。
content.js（内容脚本，可选）——注入到网页里、能读取页面 DOM 的脚本。
图标文件（16/48/128 像素）。

一个最小的 manifest.json 大致是这样：

{
  "manifest_version": 3,
  "name": "页面摘要",
  "version": "1.0",
  "action": { "default_popup": "popup.html" },
  "permissions": ["activeTab", "scripting"]
}

核心逻辑就交给 AI 写。比如”抓取正文”这步，涉及向当前标签页注入脚本、读取 DOM、把结果回传给弹窗——这些 API（chrome.scripting、chrome.tabs）的细节很琐碎，正是 AI 最擅长的部分。你只要说清楚”要做什么”，让它把 chrome.* 那套接口填对即可。

实操建议：让 AI 一次只交付一个能跑的最小版本，先把”点击→弹窗→显示一段文字”跑通，再逐步加功能。别一上来就让它做全功能，否则一处出错很难定位。

第三步：本地加载调试

代码生成好后，不用上传任何地方，直接在本地加载到 Chrome 就能用，这是插件开发爽点所在。步骤：

打开 Chrome，地址栏输入 chrome://extensions，回车。
打开右上角的开发者模式开关。
点加载已解压的扩展程序，选中你的项目文件夹。
插件图标就出现在工具栏了，点一下试试效果。

改完代码后，回到 chrome://extensions，点插件卡片上的刷新/重新加载按钮，新代码立即生效。

调试技巧：弹窗（popup）页面，右键点弹窗→检查，能打开开发者工具看报错；内容脚本的报错出现在网页本身的控制台；后台 Service Worker 的日志在插件卡片上点”检查视图 Service Worker”查看。遇到报错，整段复制给 AI，连同你的操作步骤一起描述，它基本能直接定位修复——这就是 AI 编程的核心循环：描述→生成→运行→把报错喂回去→修。

第四步：上架 Chrome 网上应用店（可选）

自己用，本地加载就够了。想分享给别人或公开发布，再考虑上架：

注册 Chrome 开发者账号需缴一次性注册费（具体金额以官方为准）。
把项目打包成 .zip 上传到 Chrome 开发者后台。
填写描述、截图、隐私权限说明，提交人工审核。审核通过后即可在商店搜索安装。

审核会重点看你申请的权限是否”过度”——只申请用得到的权限（能力越小越容易过），并在说明里讲清每个权限干什么。上架周期、费用、政策细节请以 Chrome 官方开发者文档为准，这些会变。

新手常见坑

Manifest V2 已过时：网上很多老教程是 V2，照着抄会装不上。务必让 AI 用 Manifest V3。
权限申请过度：图省事申请 <all_urls> 之类大权限，审核容易被拒，也吓跑用户。只要 activeTab 能解决就别要全站权限。
改了代码没刷新：忘了去 chrome://extensions 点重新加载，以为”AI 写错了”，其实是旧代码。
content.js 和 popup.js 混淆：内容脚本能碰网页 DOM 但碰不到很多 chrome.* API；弹窗脚本反之。搞不清就直接问 AI”这段逻辑该放哪个文件”。
图标缺失导致加载失败：manifest 里写了图标路径却没放文件，会直接报错。让 AI 给你一套占位图标或先删掉图标字段。

常见问题

完全不会写代码，能做出 Chrome 插件吗？ 能。插件项目小、范围清晰，把需求用大白话描述清楚交给 AI，它能生成完整可运行的代码；你负责加载、测试、把报错复制回去让它修。这正是它适合作为 AI 编程第一个项目的原因。

用 Cursor 还是 Claude Code 做插件更好？ 都行。想要”在编辑器里对着代码改、看得见每个文件”，选 Cursor 更直观；想要”让 AI 自己建文件、跑命令、我少操作”，选 Claude Code。新手通常 Cursor 上手更快，因为界面所见即所得。

做好的插件一定要上架商店才能用吗？ 不需要。自己用，本地”加载已解压的扩展程序”就能长期使用。只有想公开分发给陌生人时，才需要打包上架并通过人工审核。

插件能调用 ChatGPT 之类的大模型做更智能的功能吗？ 可以，让插件在后台调用大模型的 API 即可，比如做 AI 划词翻译、网页智能摘要。但要注意：API 密钥不能硬编码进插件代码（任何人都能扒出来），正规做法是走你自己的后端中转。这属于进阶玩法，先把基础插件跑通再说。

👉 看看我们的 AI 编程实战体系课，或逛 AI 编程教程大全把基本功打扎实。