火狐ChatGPT插件开发指南：从原理到实战避坑

3次阅读

没有评论

共计 2522 个字符，预计需要花费 7 分钟才能阅读完成。

现代浏览器插件已成为连接用户与 AI 服务的桥梁。以 ChatGPT 为例，通过浏览器插件可以实现：

无缝集成 ：在任何网页选中文本后快速调用 AI 分析
上下文感知 ：自动读取当前页面内容作为提示词
降低延迟 ：相比每次打开独立网站，插件响应更快

但开发过程中会遇到三个技术难关：

跨域通信限制：插件需要同时与网页 DOM 和远程 API 交互
密钥管理：避免将 API 密钥硬编码在前端代码中
流式响应处理：如何优雅展示逐渐生成的 AI 回复

与传统网页开发不同，Firefox 插件采用多进程架构：

graph TD
    A[Popup UI] -->| 消息传递 | B[Background Script]
    B -->|fetch| C[OpenAI API]
    D[Content Script] -->|DOM 操作 | E[网页上下文]
    D -->| 转发请求 | B

核心模块分工：

content script：注入到网页中，监听用户操作（如右键菜单）
background script：长生命周期的服务端，处理 API 请求
popup 页面 ：提供配置界面

// manifest.json
{
  "manifest_version": 2,
  "permissions": [
    "storage",
    "contextMenus",
    "<all_urls>"
  ],
  "background": {"scripts": ["background.js"]
  }
}

特别注意：Firefox 仍使用 Manifest V2 规范，与 Chrome 扩展存在差异

// background.js
chrome.storage.local.set({apiKey: 'sk-***'})

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {if (request.type === 'getKey') {
    chrome.storage.local.get('apiKey', data => {sendResponse(data.apiKey)
    })
    return true // 保持消息端口开放
  }
})

// 使用 fetch 的 ReadableStream
const response = await fetch('https://api.openai.com/v1/chat/completions', {
  method: 'POST',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify({
    model: "gpt-3.5-turbo",
    messages: [{role: "user", content: prompt}],
    stream: true
  })
})

const reader = response.body.getReader()
while (true) {const { done, value} = await reader.read()
  if (done) break
  const chunk = new TextDecoder().decode(value)
  // 处理形如 "data: {...}\n\n" 的 SSE 格式
  const lines = chunk.split('\n').filter(l => l.startsWith('data:'))
  lines.forEach(line => {const data = JSON.parse(line.replace('data:', ''))
    if(data.choices[0].delta.content) {
      chrome.tabs.sendMessage(tabId, {
        type: 'stream',
        text: data.choices[0].delta.content
      })
    }
  })
}

请求批处理 ：

// 合并短时间内多个请求
let requestQueue = []
const processQueue = debounce(() => {const combinedPrompt = requestQueue.join('\n---\n')
  // 发送单个 API 请求
  requestQueue = []}, 300)

本地缓存 ：

// 使用 IndexedDB 存储常见问题的回答
const db = await idb.openDB('chatCache', 1, {upgrade(db) {db.createObjectStore('responses', { keyPath: 'hashedPrompt'})
  }
})

async function getCached(prompt) {const hash = await sha256(prompt)
  return db.get('responses', hash)
}

内容安全策略 (CSP)：

"content_security_policy": "script-src'self'; object-src'none'"

输入净化 ：

// 使用 DOMPurify 防止 XSS
import DOMPurify from 'dompurify'

function safeHTML(text) {
  return DOMPurify.sanitize(text, {ALLOWED_TAGS: ['b', 'i', 'code']
  })
}