Chrome插件开发实战：如何集成ChatGPT API打造智能助手

1次阅读

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

随着 AI 技术的快速发展，将 ChatGPT 等大模型能力集成到 Chrome 插件中，能够显著提升用户体验和产品竞争力。这种技术组合不仅为浏览器扩展开发开辟了新方向，也为实现个性化智能服务提供了可能。下面我们将从零开始，详细讲解如何开发一个集成 ChatGPT API 的 Chrome 插件。

Manifest V3 配置要点
Chrome 插件的 manifest.json 文件是核心配置文件，在 V3 版本中有几个关键变化需要注意：

{
  "manifest_version": 3,
  "name": "ChatGPT 助手",
  "version": "1.0",
  "permissions": ["storage", "contextMenus"],
  "background": {"service_worker": "background.js"},
  "content_scripts": [{"matches": ["<all_urls>"],
    "js": ["content.js"]
  }]
}

content_scripts 负责与网页 DOM 交互
background 作为持久化后台处理核心逻辑
两者通过 chrome.runtime API 进行通信
Content Script 与 Background 协作
Content Script 可以直接操作网页 DOM，但受限于沙盒环境。当需要调用 ChatGPT API 时，应该通过消息传递将任务交给 Background 处理。

API 调用完整实现
以下是一个包含错误处理和密钥管理的完整示例：

// background.js
const CHATGPT_ENDPOINT = 'https://api.openai.com/v1/chat/completions';

/**
 * 调用 ChatGPT API
 * @param {string} prompt - 用户输入的提示词
 * @returns {Promise<string>} - API 返回的响应内容
 */
async function callChatGPT(prompt) {
  try {
    // 从 chrome.storage 安全获取 API 密钥
    const {apiKey} = await chrome.storage.sync.get('apiKey');

    const response = await fetch(CHATGPT_ENDPOINT, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${apiKey}`
      },
      body: JSON.stringify({
        model: "gpt-3.5-turbo",
        messages: [{role: "user", content: prompt}]
      })
    });

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

    const data = await response.json();
    return data.choices[0].message.content;
  } catch (error) {console.error('ChatGPT 调用错误:', error);
    throw error; // 继续向上抛出错误
  }
}

跨域通信方案对比
Chrome 插件开发中常见的三种跨域通信方式：
chrome.runtime.sendMessage：插件内部通信的标准方式
window.postMessage：与网页内容脚本通信
fetch 代理：通过 background 转发跨域请求

解决 CSP 冲突问题
在 manifest.json 中声明必要的权限
使用 content_security_policy 字段调整默认策略
避免内联脚本和 eval 等不安全操作
API 速率限制处理
实现指数退避算法的核心代码：

async function callWithRetry(apiCall, maxRetries = 3) {
  let delay = 1000; // 初始延迟 1 秒
  for (let i = 0; i < maxRetries; i++) {
    try {return await apiCall();
    } catch (error) {if (error.response?.status !== 429) throw error;
      await new Promise(resolve => setTimeout(resolve, delay));
      delay *= 2; // 每次重试延迟翻倍
    }
  }
  throw new Error(` 超过最大重试次数: ${maxRetries}`);
}