谷歌浏览器集成ChatGPT实战：从API调用到安全优化的完整指南

3次阅读

没有评论

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

在当今快速发展的技术环境中，将 AI 能力如 ChatGPT 集成到浏览器扩展或网页应用中已成为提升用户体验的重要手段。然而，这一过程面临几个关键挑战：

API 调用复杂性：OpenAI 的 API 虽然功能强大，但其认证流程、参数配置和响应处理对新手来说可能比较复杂。
响应延迟问题：由于网络传输和模型推理时间，用户可能会感受到明显的延迟，影响交互体验。
安全隐患：处理用户输入和 AI 响应时，如果没有适当的安全措施，可能会导致敏感数据泄露或滥用风险。
成本控制：API 调用次数和 token 使用量直接影响成本，需要精细管理以避免意外高额费用。

目前主要有三种集成方式：

直接前端调用：简单快速，但暴露 API 密钥风险高，不建议生产环境使用。
通过后端服务中转：安全可靠，可以实施缓存、限流等优化措施，是推荐方案。
使用 WebSocket 长连接：适合实时性要求高的场景，但实现复杂度较高。

综合考虑安全性、性能和开发成本，我们推荐采用 后端服务中转 的方式。这种架构如下图所示：

graph LR
    A[浏览器] -->|HTTPS| B[你的后端服务]
    B -->|API 密钥 | C[OpenAI]
    C --> B
    B --> A

以下是一个 Node.js 后端服务的核心代码示例：

// 使用 axios 进行 HTTP 调用
const axios = require('axios');

async function callChatGPT(prompt, apiKey) {
  try {
    const response = await axios.post(
      'https://api.openai.com/v1/chat/completions',
      {
        model: "gpt-3.5-turbo",
        messages: [{role: "user", content: prompt}],
        temperature: 0.7,
        max_tokens: 150
      },
      {
        headers: {'Authorization': `Bearer ${apiKey}`,
          'Content-Type': 'application/json'
        }
      }
    );
    return response.data.choices[0].message.content;
  } catch (error) {console.error('API 调用失败:', error.response?.data || error.message);
    throw new Error('获取 AI 响应时出错');
  }
}