为什么用AI写Chrome插件？
Chrome插件开发门槛不低。Manifest V3的规范改了又改，background service worker、content script、popup页面，每个环节都有坑。
以前你得懂HTML/CSS/JS，现在有了AI，你只需要会描述需求。
我用Cursor和Claude Code写过十几个插件。今天分享一套最省力的流程。
第一步：明确你要做什么
别一上来就打开编辑器。先想清楚三件事：
- 这个插件解决什么问题？ 比如：自动提取豆瓣读书页面的评分和简介
- 在哪个页面触发？ 豆瓣读书详情页
- 输出什么结果？ 弹窗显示结构化数据，支持复制
我最近做的一个插件叫"豆瓣速读"，就是干这个的。
第二步：让AI生成骨架代码
打开你的AI编程工具，输入这样的prompt：
帮我创建一个Chrome Manifest V3扩展，功能如下：
- 在豆瓣读书页面运行content script
- 提取书名、评分、评价人数、简介
- 点击浏览器图标弹出popup，显示提取的数据
- 数据格式化为JSON，支持一键复制
- 使用纯原生JS，不依赖外部库
AI会给你生成三个核心文件：
manifest.json
{
"manifest_version": 3,
"name": "豆瓣速读",
"version": "1.0.0",
"permissions": ["activeTab"],
"action": {
"default_popup": "popup.html",
"default_icon": "icon.png"
},
"content_scripts": [{
"matches": ["https://book.douban.com/subject/*"],
"js": ["content.js"]
}]
}
content.js — 负责提取页面数据：
function extractBookData() {
const title = document.querySelector('#subject_h2')?.textContent?.trim();
const rating = document.querySelector('#interest_sectl')?.querySelector('.lls strong')?.textContent;
const intro = document.querySelector('#link-report')?.querySelector('.intro')?.textContent?.trim();
return { title, rating, intro };
}
chrome.runtime.sendMessage({ action: 'extract' }, (response) => {
if (response?.data) {
console.log('提取成功:', response.data);
}
});
popup.html + popup.js — 负责展示结果。
第三步：调试和迭代
把代码放到文件夹里，打开Chrome，输入 chrome://extensions，右上角开启"开发者模式"，点击"加载已解压的扩展程序"，选中你的文件夹。
这时候大概率会报错。别慌，这是正常流程。
常见的坑：
- 跨域问题：content script跑在目标页面，可以直接访问DOM，不需要fetch
- 权限不足：Manifest V3移除了
<all_urls>，改用host_permissions精确指定 - 消息传递超时：service worker会休眠，发消息要加timeout处理
我一般用AI来修bug。直接把Chrome DevTools的错误日志贴给它，它给出的修复方案通常比搜Stack Overflow快十倍。
进阶：加个批量导出功能
当你掌握了基础流程，可以加更实用的功能。
我在豆瓣速读里加了个批量导出：
// 在content.js中添加
async function batchExtract(urls) {
const results = [];
for (const url of urls) {
// 用chrome.tabs.create临时打开页面
const tab = await chrome.tabs.create({ url, active: false });
// 等待加载完成
await new Promise(r => chrome.tabs.onUpdated.addListener(function handler(tabId, info) {
if (tabId === tab.id && info.status === 'complete') {
chrome.tabs.onUpdated.removeListener(handler);
r();
}
}));
// 注入脚本提取数据
const [results] = await chrome.tabs.executeScript(tab.id, {
code: 'JSON.stringify(extractBookData())'
});
results.push(JSON.parse(results[0]));
chrome.tabs.remove(tab.id);
}
return results;
}
这段代码的思路是：临时打开页面 → 等待加载 → 注入脚本 → 回收标签页。整个过程用户几乎无感知。
发布到Chrome商店
写好之后，去 Chrome Web Store Developer Dashboard 注册开发者账号（一次性收费$5）。
上传打包好的zip文件，填写描述、截图、隐私政策。审核一般1-3天通过。
总结
用AI写Chrome插件的核心思路就一句：描述需求，让AI写代码，你负责调试和验收。
不需要精通前端框架，不需要理解复杂的构建工具。只要会用浏览器DevTools，你就已经具备了开发插件的全部能力。
你的第一个插件打算做什么？评论区聊聊。