用AI开发Chrome插件：从需求到上架的完整流程

AI编程系列 · 模块三实战篇 · 第1篇
上一篇：AI代码审查与重构：让AI当你的代码Review助手

---

几个月前，我想要一个功能很简单的Chrome插件：在任何网页上选中一段文字，右键就能一键发送给AI总结。

我在Chrome商店找了半天，没找到完全符合需求的。

然后我想：要不自己做一个？

问题是，我没有写过Chrome插件。Manifest V3是什么我不知道，background script和content script的区别我不知道，Chrome Extension API我也没碰过。

但我有AI。

这篇文章是我用AI辅助从零做出这个插件并发布到Chrome Web Store的完整过程记录——包括走了哪些弯路，踩了哪些坑，以及AI真正帮上忙的地方和没帮上忙的地方。

---

先说结论

用AI开发Chrome插件，体验比我预期好很多，但不是”AI帮你全自动搞定”。

准确的描述是：AI大幅压缩了我查文档、写样板代码的时间，但所有的调试、理解报错、做设计决策，还是需要我自己来。

如果你也打算用AI做一个Chrome插件，这篇文章应该对你有用。

---

第一步：把需求说清楚

在写任何代码之前，我先把需求整理成了一个清单：

核心功能：

• 在网页上选中文字后，右键菜单出现”用AI总结”选项
• 点击后，调用AI接口，把选中文字作为输入
• 在侧边栏或弹窗里显示AI返回的结果

技术约束：

• 使用Manifest V3（Chrome目前的规范）
• 不想自建后端，直接在插件里调用AI API
• API Key由用户自己填入设置页面

非必须功能（先放着）：

• 多模型支持
• 历史记录
• 自定义Prompt

这个需求整理步骤，AI没有参与。但它很重要——边界没想清楚就开始写代码，AI给你生成的东西也会是混乱的。

---

第二步：让AI帮我理解Chrome插件的基础架构

我没有直接让AI”帮我写这个插件”，而是先问了几个理解性问题：

我问：我要开发一个Chrome插件，功能是在网页上右键选中文字，然后调用外部API。我对Chrome插件开发完全不了解，先帮我解释一下Manifest V3里有哪些关键文件和概念，每个文件的作用是什么。

AI给了我一个非常清晰的架构说明：

manifest.json：插件的配置文件，定义了插件名称、版本、权限、各个脚本的位置。相当于插件的”身份证”。

background script（Service Worker）：在后台运行的脚本。在Manifest V3里，background page被改成了Service Worker，不能持久运行，是事件驱动的。右键菜单的注册、API调用等逻辑放在这里。

content script：注入到网页里运行的脚本，可以读取和操作页面的DOM。获取用户选中的文字，从这里来。

popup：点击插件图标时出现的小弹窗，HTML+CSS+JS写的界面。

options page：插件的设置页面，存API Key之类的用户配置。

这个解释让我在脑子里建立了一个基本的框架，后面的代码生成才有意义。

---

第三步：逐模块生成代码

有了概念框架，我开始逐模块让AI生成代码。关键原则：每次只生成一个模块，不要一次让AI把整个插件都写出来。

3.1 先生成 manifest.json

帮我生成一个Chrome插件的manifest.json，要求：
1. Manifest V3格式
2. 插件名称：AI Text Helper
3. 需要的权限：右键菜单（contextMenus）、存储（storage）、调用外部API（需要host_permissions）
4. 包含background service worker、content script和options page

生成后我能看懂，也能对照官方文档检查。

{
  "manifest_version": 3,
  "name": "AI Text Helper",
  "version": "1.0.0",
  "description": "选中文字，一键AI总结",
  "permissions": [
    "contextMenus",
    "storage",
    "activeTab",
    "scripting"
  ],
  "host_permissions": [
    "https://api.openai.com/*"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "options_page": "options.html",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  }
}

3.2 content script：获取选中文字

帮我写一个Chrome插件的content script。功能：
1. 监听用户在页面上的文字选中事件
2. 把选中的文字通过chrome.runtime.sendMessage发送给background script
3. 同时接收来自background的消息，把AI返回的结果展示在一个浮层里（浮层样式简洁，有关闭按钮）

这段代码生成后基本可用，我只改了浮层的样式。

3.3 background script：核心逻辑

这块是最复杂的，我分成了几个子任务：

第一步：注册右键菜单

帮我在background service worker里注册一个右键菜单项，只在用户选中文字时显示，标题是"AI总结"。点击后，从chrome.storage里读取API Key，然后把选中的文字发送给OpenAI的API。

第二步：处理API调用

帮我写一个函数，接受一段文本作为输入，调用OpenAI Chat Completions API（model: gpt-4o-mini），系统prompt是"你是一个专业的文字总结助手，请用简洁的中文总结以下内容"，返回AI的回复文本。API Key从参数传入。

第三步：把结果发回给content script

这三步分开让AI写，每步完成后我都会在浏览器里测试一下再继续。

---

第四步：踩的三个主要坑

坑一：Manifest V3的Service Worker不能用 window 对象

生成的background.js里有一段代码用到了window.fetch，在Manifest V3里Service Worker里没有window，直接用fetch就行。

报错信息很明确，但如果你不了解这个背景会一脸茫然。

处理方式：直接把报错贴给AI，它很快给出了正确写法。

坑二：chrome.runtime.sendMessage 的时序问题

content script发消息给background，background再发消息回content script，这个来回有时序问题。如果content script还没加载完，background的消息会丢失。

这个bug花了我最多时间，因为不是必现的，有时候好有时候不好。

处理方式：让AI帮我分析这类异步通信的常见问题，它给了我一个”先建立持久连接（chrome.runtime.connect）”的方案，比sendMessage更可靠。

坑三：CSP（Content Security Policy）限制

在popup.html里，我想用内联<script>标签写一些逻辑，结果Chrome直接报CSP错误，不允许内联脚本。

处理方式：把所有JS移到外部文件，这也是Chrome插件的标准做法。AI生成的代码一开始就应该这样写，但它给我生成了内联脚本——这是个需要注意的地方。

---

第五步：本地测试流程

Chrome插件的本地测试很简单：

1. 打开 chrome://extensions/
2. 开启”开发者模式”（右上角开关）
3. 点击”加载已解压的扩展程序”，选择你的项目文件夹
4. 插件就出现在Chrome里了

每次改代码后，在 chrome://extensions/ 页面点击插件的刷新按钮（或者按Ctrl+R），重新加载。

调试background script的方式：点击插件页面里”服务工作进程”旁边的链接，会打开一个专门的DevTools窗口。

---

第六步：上架Chrome Web Store

这部分AI帮不上忙，都是流程性的工作：

1. 注册开发者账号：需要一次性支付$5的注册费（Google账号）
2. 准备素材：
   • 插件图标（128x128 PNG，可以让AI生成）
   • 宣传截图（至少1张，建议3-5张）
   • 插件描述（中英文，简洁说清楚能做什么）
3. 上传打包文件：把项目文件夹打成zip，上传到开发者控制台
4. 填写审核信息：说明权限用途（为什么需要activeTab、storage等）
5. 等待审核：首次审核通常需要1-3个工作日

审核这关要注意的：Chrome对权限的审查越来越严格。如果你申请了某个权限但没有在代码里实际用到，审核会被拒。确保manifest里的权限和实际功能对应。

我的插件审核通过，大概等了两天。

---

AI真正帮上忙的地方

回顾整个过程，AI的贡献主要是：

1. 大幅降低了入门门槛

Chrome插件有一堆陌生的API和概念。以前我需要花大量时间读文档建立框架，现在可以直接问AI”这是什么，怎么用”，节省了至少70%的学习时间。

2. 样板代码生成

manifest.json、基础的content script结构、API调用的封装——这类有固定模式的代码，AI生成的质量很高，基本不用改。

3. 报错分析

把报错信息贴给AI，90%的情况它能准确定位问题。比自己去Stack Overflow搜快得多。

---

AI没帮上忙的地方

1. 复杂的时序和状态管理

Service Worker的生命周期、消息传递的时序问题，AI给的解释有时候不够深入，还是需要自己理解原理。

2. 上架流程

这纯粹是流程性工作，AI只能告诉你步骤，但登录控制台、上传文件、填写表单，都是手动操作。

3. 初始设计决策

“用侧边栏还是弹窗展示结果”、”要不要存历史记录”这类产品决策，AI会给建议，但最终还是需要你自己判断。

---

完整项目结构

ai-text-helper/
├── manifest.json
├── background.js        # Service Worker
├── content.js          # 注入页面的脚本
├── popup.html          # 点击图标的弹窗
├── popup.js
├── options.html        # 设置页面
├── options.js
├── styles/
│   ├── popup.css
│   └── content.css     # 浮层样式
└── icons/
    ├── icon16.png
    ├── icon48.png
    └── icon128.png

---

适合AI辅助开发的项目特征

做完这个项目，我总结了哪类项目特别适合用AI辅助开发：

• 有明确规范文档的：Chrome Extension API有完整文档，AI训练过，理解准确
• 模块化清晰的：能拆分成独立模块逐步生成，比让AI一次生成整个项目好得多
• 前期学习成本高、核心逻辑不复杂的：学习新平台/新框架的曲线，AI帮你大幅压缩

---

下一篇

下一篇我会做一个更复杂的实战：《用AI搭建自动化工作流》——把几个独立的工具用脚本串起来，形成一个可以定时运行的自动化流水线。就像我们博客的封面图自动生成脚本，但更系统化。

AI编程系列进度

• ✅ 模块一：工具篇（AI编程工具对比、OpenCode指南）
• ✅ 模块二：技巧篇（Prompt工程、AI Debug实战、AI代码审查）
• 🔄 模块三：实战篇（本篇：Chrome插件开发）
• ⏳ 模块四：进阶篇

---

有问题欢迎在评论区交流，或者直接把你的Chrome插件项目需求发过来一起研究。