Wetab新标签页集成ChatGPT的技术实现与优化指南

6次阅读

没有评论

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

随着 AI 技术的普及，用户对浏览器扩展的智能化需求日益增长。将 ChatGPT 集成到新标签页中，可以为用户提供即时的 AI 助手服务，无需离开当前浏览环境即可获取信息、解答问题。然而，这种集成面临几个技术挑战：

API 调用延迟影响用户体验
免费服务的频率限制
对话上下文的持久化存储
用户隐私和数据安全问题

在选择 AI API 时，我们对比了几种主流方案：

ChatGPT API：
优点：响应质量高，支持流式输出，开发者社区活跃
缺点：免费账号有调用频率限制
开源模型自部署：
优点：完全可控，无调用限制
缺点：需要服务器资源，响应速度不如云端 API
其他商业 API：
优点：部分提供更高配额
缺点：成本较高，响应质量参差不齐

最终选择 ChatGPT API，主要考虑其优秀的响应质量和开发者友好性，适合快速实现产品原型。

用户在新标签页输入问题
前端收集输入内容并添加系统提示
通过 fetch API 发送 POST 请求到 ChatGPT 端点
处理流式响应并实时显示给用户
存储对话历史到本地

// 配置 API 请求
const fetchAIResponse = async (messages) => {
  try {
    const response = await fetch('https://api.openai.com/v1/chat/completions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${API_KEY}`
      },
      body: JSON.stringify({
        model: 'gpt-3.5-turbo',
        messages,
        stream: true  // 启用流式响应
      })
    });

    // 处理流式响应
    const reader = response.body.getReader();
    const decoder = new TextDecoder();
    let assistantMessage = '';

    while (true) {const { done, value} = await reader.read();
      if (done) break;

      const chunk = decoder.decode(value);
      const lines = chunk.split('\n');

      for (const line of lines) {if (line.startsWith('data:') && !line.includes('[DONE]')) {const data = JSON.parse(line.substring(5));
          if (data.choices[0].delta.content) {assistantMessage += data.choices[0].delta.content;
            updateUI(assistantMessage); // 实时更新 UI
          }
        }
      }
    }

    return assistantMessage;
  } catch (error) {console.error('API 请求失败:', error);
    throw error;
  }
};

使用 IndexedDB 存储对话历史，确保用户刷新页面后不丢失上下文：

// 初始化数据库
const initDB = () => {return new Promise((resolve, reject) => {const request = indexedDB.open('ChatHistoryDB', 1);

    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      if (!db.objectStoreNames.contains('conversations')) {db.createObjectStore('conversations', { keyPath: 'id'});
      }
    };

    request.onsuccess = (event) => resolve(event.target.result);
    request.onerror = (event) => reject(event.target.error);
  });
};

// 保存对话
const saveConversation = async (conversation) => {const db = await initDB();
  const tx = db.transaction('conversations', 'readwrite');
  tx.objectStore('conversations').put(conversation);
  return tx.complete;
};