ChatGPT for Chrome 扩展开发实战：从零构建高效AI助手

1次阅读

没有评论

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

在 Chrome 扩展中集成 ChatGPT 这类 AI 助手时，开发者常遇到几个典型问题：

API 调用限制：OpenAI 的 API 有速率限制，频繁调用容易触发限制，导致服务不可用。
上下文保持：在多标签页环境下，如何保持对话上下文的一致性是一个挑战。
响应延迟：AI 模型的响应时间较长，用户可能需要等待较长时间才能获得回复。
安全性：如何安全存储 API 密钥和处理敏感数据，避免泄露。
性能优化：如何高效处理流式响应，减少用户等待时间。

这些问题如果不妥善解决，会直接影响用户体验和扩展的可用性。

在 Chrome 扩展开发中，通常有两种主要方式来集成功能：Browser Action 和 Content Script。以下是它们的对比：

Browser Action：适合全局功能，比如点击图标弹出对话框与 ChatGPT 交互。
Content Script：适合与页面内容直接交互，比如在页面中嵌入 AI 助手。

为了实现后台逻辑（如 API 调用、数据处理），Service Worker是最佳选择。原因如下：

生命周期管理：Service Worker 在后台运行，不会因为页面关闭而终止。
多标签页共享：可以统一管理所有标签页的会话和上下文。
高效通信：通过chrome.runtimeAPI 与前端组件（如弹出窗口或内容脚本）高效通信。

manifest.json是 Chrome 扩展的配置文件，以下是与 ChatGPT 集成相关的关键配置：

{
  "manifest_version": 3,
  "name": "ChatGPT for Chrome",
  "version": "1.0",
  "permissions": [
    "storage",         // 用于存储会话和 API 密钥
    "identity"         // 用于 OAuth2.0 集成
  ],
  "background": {"service_worker": "background.js"  // 后台逻辑入口},
  "action": {"default_popup": "popup.html"      // 浏览器图标点击后的弹出窗口}
}

权限说明：
– storage：用于使用chrome.storageAPI 存储会话数据和 API 密钥。
– identity：用于 OAuth2.0 认证，确保 API 密钥的安全存储。

以下是封装了错误处理和重试机制的 fetch 请求示例：

async function fetchWithRetry(url, options, maxRetries = 3) {
  let retries = 0;
  while (retries < maxRetries) {
    try {const response = await fetch(url, options);
      if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`);
      }
      return await response.json();} catch (error) {
      retries++;
      if (retries >= maxRetries) {throw error;}
      // 指数退避策略
      await new Promise(resolve => setTimeout(resolve, 1000 * Math.pow(2, retries)));
    }
  }
}

// 使用示例
const apiKey = await chrome.storage.local.get('apiKey');
const response = await fetchWithRetry(
  'https://api.openai.com/v1/chat/completions',
  {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${apiKey}`
    },
    body: JSON.stringify({
      model: 'gpt-4',
      messages: [{role: 'user', content: 'Hello!'}]
    })
  }
);

关键点：
– 重试机制 ：通过maxRetries 参数控制重试次数，避免因临时网络问题导致失败。
– 指数退避：每次重试的等待时间递增，减少对 API 服务器的压力。

利用 chrome.storage 实现多标签页的会话共享：

// 存储会话
async function saveSession(sessionId, messages) {await chrome.storage.session.set({ [sessionId]: messages });
}

// 读取会话
async function loadSession(sessionId) {const result = await chrome.storage.session.get(sessionId);
  return result[sessionId] || [];}

// 使用示例
const sessionId = 'user_123';
const messages = await loadSession(sessionId);
messages.push({role: 'user', content: 'New message'});
await saveSession(sessionId, messages);

说明：
– chrome.storage.session是 Chrome 提供的临时存储，适合存储会话数据。
– 通过 sessionId 区分不同用户的会话，确保上下文隔离。

OpenAI 的 API 支持流式响应（streaming），可以通过 ReadableStream 逐步显示结果，减少用户等待时间：

async function fetchStreamingResponse(url, options, onData) {const response = await fetch(url, options);
  const reader = response.body.getReader();
  const decoder = new TextDecoder();
  let result = '';

  while (true) {const { done, value} = await reader.read();
    if (done) break;
    const chunk = decoder.decode(value);
    result += chunk;
    onData(result);
  }
  return result;
}

// 使用示例
fetchStreamingResponse(
  'https://api.openai.com/v1/chat/completions',
  {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${apiKey}`
    },
    body: JSON.stringify({
      model: 'gpt-4',
      messages: [{role: 'user', content: 'Hello!'}],
      stream: true  // 启用流式响应
    })
  },
  (data) => {
    // 实时更新 UI
    console.log('Received chunk:', data);
  }
);

优势：用户可以逐步看到回复内容，无需等待完整响应。

对于常见问题或重复请求，可以通过本地缓存减少 API 调用：

const cache = new Map();

async function getCachedResponse(prompt) {if (cache.has(prompt)) {return cache.get(prompt);
  }
  const response = await fetchWithRetry(/* ... */);
  cache.set(prompt, response);
  return response;
}

优化点：
– 缓存命中时直接返回结果，减少 API 调用。
– 可以结合 chrome.storage.local 实现持久化缓存。

通过 OAuth2.0 保护 API 密钥，避免直接存储在扩展中：

// 在 manifest.json 中添加 identity 权限
"permissions": ["identity"],

// 使用 chrome.identity 获取 OAuth 令牌
chrome.identity.getAuthToken({interactive: true}, (token) => {if (token) {
    // 使用令牌调用 API
    fetchWithRetry(/* ... */);
  }
});

优点：用户无需手动输入 API 密钥，且令牌可定期刷新。