不会编程用 AI 做 Chrome 插件：从零到上架（2026）

想用 AI 做点真东西，但做 App 要上架、做网站要部署备案，第一步就被劝退——那你应该从浏览器插件开始。用 AI 做 Chrome 插件几乎是所有真实项目里门槛最低的一个：不需要服务器，不需要部署，不需要备案，几个文本文件放在一个文件夹里，浏览器就能直接加载运行。这篇讲清楚不会编程的人怎么用 Claude Code、Cursor 这类工具做出一个能用的 Chrome 插件，从 2026 年必须遵守的 Manifest V3 规范，到本地调试，再到上架应用商店。

为什么插件是 AI 编程最好的第一个项目

• 反馈快：改完代码点一下刷新，浏览器里立刻看到效果，不用等构建、不用等部署。
• 没有服务器：插件跑在用户自己的浏览器里，你不用买服务器、不用配数据库、不用交托管费。
• 代码量小：一个能用的插件常常只有三四个文件、两三百行代码，完全在 AI 一次能写对、你也能看懂的范围内。
• 需求就在身边：你每天上网时觉得「这一步要是能自动做就好了」的地方，基本都能做成插件。
• 能真的分发出去：做好了可以打包发给同事朋友直接装，也可以上架应用商店让陌生人用。

适合做成插件的想法，通常长这样：一键总结当前网页、把选中的文字翻译成中文、自动屏蔽某类内容、给某个网站补一个官方没做的按钮、把页面上的数据一键导出成表格。共同点是——都在浏览器里、都针对网页内容、都是重复的小操作。

先认清 Manifest V3：2026 年唯一的起点

这一节非常重要，因为它决定了你能不能用得上网上搜到的教程。Chrome 插件规范分 Manifest V2（旧）和 Manifest V3（新）两代。Chrome 从 2024 年 6 月的 127 版本开始陆续停用 MV2 扩展，到现在 MV2 已经彻底退场，2026 年新做插件只有 MV3 一条路。

MV3 插件的组成很简单，理解这四个角色，你就看得懂 AI 生成的任何插件代码：

一个最小可用的 MV3 manifest.json 长这样，可以直接拿去当模板：

{
  "manifest_version": 3,
  "name": "网页总结助手",
  "version": "1.0.0",
  "description": "一键总结当前网页的核心内容",

  "permissions": ["activeTab", "storage"],
  "host_permissions": ["https://api.deepseek.com/*"],

  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon128.png"
  },

  "background": {
    "service_worker": "background.js"
  },

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],

  "icons": { "128": "icon128.png" }
}

实操：用 AI 从零生成一个可用插件

准备工作只有两步：新建一个空文件夹，用 Claude Code、Codex、Cursor 或任意 AI 编程工具打开它。然后把下面这段提示词发过去。这段提示词的价值在于——它把 MV3 的硬性约束和常见坑都提前写进了要求里，能显著减少来回改的次数。

帮我做一个 Chrome 浏览器插件，功能是：点击工具栏图标后，
弹出一个小窗口，把当前网页的正文内容提取出来，
调用大模型 API 生成一段中文摘要显示在窗口里。

硬性要求：
1. 必须使用 Manifest V3 规范，manifest_version 写 3。
   不要用任何 Manifest V2 的写法（不要 background.page、不要 chrome.extension.*）。
2. background 用 service worker，注意它没有 DOM，
   不要在里面使用 window 或 document。
3. 不要通过 CDN 远程加载任何 JS 库——MV3 禁止执行远程代码，
   需要的依赖请直接写在本地文件里。
4. 权限申请到最小：只用 activeTab 和 storage，不要申请 <all_urls>。
5. API Key 不要硬编码在代码里，做一个设置界面让用户自己填，
   用 chrome.storage.local 保存。
6. 网络请求统一放在 service worker 里发，避免跨域问题。

请先列出你打算创建的文件清单和各自职责，我确认后再开始写代码。
最后告诉我怎么在 Chrome 里加载测试。

让 AI 先列文件清单再动手，是个很值得养成的习惯：你能在它写下几百行之前就发现方向不对，改一句话比改一堆代码便宜得多。清单确认后让它继续，通常几分钟就能拿到一套完整的可运行文件。

本地加载调试：三步看到成果

1. 1打开 Chrome，地址栏输入 chrome://extensions/ 回车。
2. 2打开右上角的「开发者模式」开关，页面左上角会多出几个按钮。
3. 3点「加载已解压的扩展程序」，选中你那个项目文件夹。插件立刻出现在列表里，工具栏上也会出现图标（可能需要点一下拼图图标把它固定住）。

之后每次改完代码，回到 chrome://extensions/ 点插件卡片上的刷新图标即可生效，不用重装。三个部分的报错分别在不同的地方看，这点新手最容易迷路：

调试时最高效的做法：把报错信息连同相关文件一起复制给 AI，让它直接改。插件报错信息通常很具体（比如明确告诉你哪个 API 在 MV3 里不可用），AI 拿到就能定位。

MV3 四个高频踩坑

• Service Worker 里用了 window / document 报错：MV3 的后台是 Service Worker，没有页面环境。需要操作网页 DOM 的活儿必须交给 content script 做，两者之间用 chrome.runtime.sendMessage 通信。
• 后台变量莫名其妙丢了：Service Worker 空闲一会儿就会被浏览器休眠，内存里的全局变量随之清空。任何需要保留的状态都必须写进 chrome.storage，不要存在变量里。
• 引入 CDN 库直接失败：MV3 禁止加载执行远程代码，<script src="https://cdn..."> 这类写法会被 CSP 拦下。需要什么库就把文件下载到项目里本地引用。
• API Key 被明文写进代码：插件包是可以被任何人解压查看的，硬编码的密钥等于公开。正确做法是做个设置页让用户填自己的 Key，存进 chrome.storage.local。

上架 Chrome 应用商店：费用与审核实情

插件自己用、或者打包发给朋友手动加载，完全不需要上架。只有想让陌生人一键安装时，才需要走 Chrome 应用商店（Chrome Web Store）。

1. 1注册开发者账号：需要缴一笔 5 美元的一次性注册费（不是年费）。交一次覆盖你之后发布的所有作品，单个账号最多可发布 20 个扩展。付款需要国际支付方式。
2. 2打包上传：把项目文件夹压缩成 zip（注意是压缩文件夹里的内容，manifest.json 要在压缩包根目录），在开发者后台上传。
3. 3填写商店信息：名称、描述、截图、图标，以及每一项权限的用途说明——权限解释不清楚是被打回的主要原因。
4. 4等待审核：干净、权限少的简单插件（比如只用 activeTab）有时几十分钟就过；一般情况几天；权限敏感或代码复杂的可能拖到数周。2026 年提交量上涨，审核时间整体有拉长的趋势。

从会做一个，到做好一个

用 AI 拼出第一个能跑的插件通常只要一两个小时，但从「能跑」到「好用」中间还有一段距离：图标和界面要顺眼、出错时要有友好提示而不是白屏、用户第一次打开要知道该干什么、权限申请要克制到用户敢装。这些恰恰是 AI 不会主动替你想、必须由你提出要求的部分。

AI 能在十分钟内给你一个能运行的插件，但决定它有没有人用的，是你提出的那些它没想到的要求。

把一个想法变成能装进浏览器、别人也用得上的东西，这个完整过程比学会任何单个语法都更有价值。它逼你走完需求拆解、和 AI 有效协作、看懂报错、打磨细节这一整条链路——而这条链路，换到做网站、做小程序、做工具时是完全通用的。如果你想在真实项目里系统练这套能力，欢迎来 IMAI 看看我们的 AI 编程实战课程。