ChatGPT for Chrome 入门指南：从安装到实战开发

1次阅读

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

在现代 Web 开发中，浏览器扩展已成为提升用户体验的重要工具。而集成 AI 能力，特别是像 ChatGPT 这样的强大语言模型，可以为扩展带来革命性的交互方式。传统浏览器扩展通常只能执行简单的自动化任务或内容修改，而集成 ChatGPT 后，我们可以实现：

智能化的内容解析和总结
自然语言交互的浏览器助手
上下文感知的自动填充和建议
个性化的学习与研究辅助

在 Chrome 扩展中集成 ChatGPT 主要有以下几种方式：

直接调用 OpenAI API
优点：响应快，功能完整
缺点：需要处理 API 密钥安全，可能产生费用
使用开源模型本地运行
优点：数据隐私有保障
缺点：性能要求高，模型效果可能不如官方 API
通过中间服务代理
优点：可以隐藏 API 密钥
缺点：增加了架构复杂度

对于大多数开发者，我们推荐直接调用 OpenAI API，因为它提供了最佳的性能和功能支持。

一个基本的 Chrome 扩展通常包含以下部分：

manifest.json: 扩展的配置文件
背景脚本 (background script): 处理扩展的核心逻辑
内容脚本 (content script): 与网页交互
弹出页面 (popup): 用户界面

在背景脚本中调用 ChatGPT API 的基本流程：

获取用户输入
构造 API 请求
处理 API 响应
将结果传递给内容脚本

Chrome 扩展中不同部分通过消息传递进行通信：

chrome.runtime.sendMessage: 从内容脚本向背景脚本发送消息
chrome.runtime.onMessage: 监听和处理消息

{
  "manifest_version": 3,
  "name": "ChatGPT 助手",
  "version": "1.0",
  "description": "集成 ChatGPT 的浏览器助手",
  "permissions": ["storage", "activeTab"],
  "background": {"service_worker": "background.js"},
  "action": {"default_popup": "popup.html"}
}

// 存储 API 密钥
chrome.runtime.onInstalled.addListener(() => {chrome.storage.sync.set({ apiKey: ''});
});

// 处理来自内容脚本的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {if (request.type === 'chatgpt_query') {callChatGPT(request.query).then(response => {sendResponse(response);
      });
      return true; // 保持消息通道开放
    }
  }
);

async function callChatGPT(query) {const { apiKey} = await chrome.storage.sync.get('apiKey');
  const response = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${apiKey}`
    },
    body: JSON.stringify({
      model: "gpt-3.5-turbo",
      messages: [{role: "user", content: query}],
      temperature: 0.7
    })
  });

  if (!response.ok) {throw new Error(`API 请求失败: ${response.status}`);
  }

  const data = await response.json();
  return data.choices[0].message.content;
}

<!DOCTYPE html>
<html>
<head>
  <title>ChatGPT 助手 </title>
  <style>
    body {width: 300px; padding: 10px;}
    textarea {width: 100%; height: 100px;}
    button {margin-top: 10px;}
  </style>
</head>
<body>
  <h3>ChatGPT 助手 </h3>
  <textarea id="query" placeholder="输入您的问题..."></textarea>
  <button id="askButton"> 提问 </button>
  <div id="response"></div>
  <script src="popup.js"></script>
</body>
</html>

OpenAI API 有严格的速率限制，建议：