共计 2442 个字符，预计需要花费 7 分钟才能阅读完成。
为什么需要 AI 浏览器插件？
上周帮朋友公司看客服数据时，发现 40% 的咨询都是重复性问题。如果有个能自动回复常见问题的浏览器插件，既能提升用户体验，又能节省人力成本——这就是 AI 插件的商业价值。类似场景还包括：
- 阅读长文章时自动生成摘要
- 电商比价时快速获取竞品分析
- 编程时实时获取代码解释
技术选型：Manifest V3 必知必会
2023 年起 Chrome 应用商店强制要求新插件使用 Manifest V3（MV3），主要变化：
- 后台脚本：从持久化运行的 background page 改为按需激活的 Service Worker
- 网络请求：修改了 webRequest API 权限，需改用 declarativeNetRequest
- 远程代码 ：禁止执行 eval() 等动态代码
MV3 示例声明文件：
// manifest.json
{
"manifest_version": 3,
"name": "AI 助手",
"version": "1.0",
"background": {"service_worker": "sw.js"},
"permissions": ["identity", "storage"]
}核心实现四步走
1. OAuth2 认证实战
使用 chrome.identity API 实现 GitHub 登录（需先在开发者控制台配置 OAuth Client ID）：
// sw.js
chrome.identity.launchWebAuthFlow(
{
url: `https://github.com/login/oauth/authorize?client_id=YOUR_CLIENT_ID`,
interactive: true
},
(redirectUrl) => {const code = new URL(redirectUrl).searchParams.get('code')
// 用 code 换 access_token...
}
)2. 跨域通信方案
通过 chrome.runtime.onMessage 实现内容脚本与后台交互：
// content.js
document.addEventListener('click', () => {
chrome.runtime.sendMessage({type: 'summarize', text: window.getSelection().toString()},
(response) => {// 显示 AI 回复}
))
})
// sw.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {if (request.type === 'summarize') {
fetch('https://api.openai.com/v1/chat/completions', {
method: 'POST',
headers: {'Authorization': `Bearer ${await getToken()}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
model: "gpt-3.5-turbo",
messages: [{role: "user", content: request.text}]
})
}).then(...)
}
})3. 流式响应处理
避免用户长时间等待的优化方案：
// 使用 ReadableStream 处理分块数据
const decoder = new TextDecoder()
const reader = response.body.getReader()
while(true) {const {done, value} = await reader.read()
if (done) break
const chunk = decoder.decode(value)
chrome.tabs.sendMessage(sender.tab.id, {type: 'stream', chunk})
}4. 对话历史缓存
采用 chrome.storage.local 实现本地存储（上限 5MB）：
// types.d.ts
interface Conversation {
id: string
messages: Array<{role: 'user' | 'assistant', content: string}>
}
// storage.ts
const saveConversation = async (conv: Conversation) => {await chrome.storage.local.set({[conv.id]: conv})
}安全防护要点
1. CSP 策略配置
在 manifest.json 添加 Content Security Policy（CSP）防止 XSS 攻击：
{
"content_security_policy": {"extension_pages": "script-src'self'; object-src'none'"}
}2. 敏感数据存储
| 方案 | 容量 | 加密支持 | 适用场景 |
|---|---|---|---|
| chrome.storage | 5MB | 否 | 非敏感配置数据 |
| IndexedDB | 50% 磁盘 | 需手动 | 结构化大数据 |
| chrome.storage.sync | 8KB | 是 | 多设备同步的小数据 |
完整项目脚手架
推荐使用我的开源模板快速开始（包含错误边界和 TypeScript 支持）：
git clone https://github.com/example/ai-extension-starter
cd ai-extension-starter
npm install项目结构说明：
public/– 静态资源src/background/– Service Worker 逻辑content/– 页面注入脚本popup/– Vue3 弹出窗口types/– TS 类型定义
课后作业挑战
- PDF 导出功能：
- 使用 pdf-lib 库生成对话记录 PDF
-
添加公司 LOGO 水印
-
性能优化：
- 用 Web Worker 处理长文本分词
- 实现「停止响应」按钮中断 fetch 请求
遇到问题？欢迎在评论区留言交流开发心得！
正文完
