ChatGPT Extension开发入门：从零构建你的第一个浏览器扩展

1次阅读

没有评论

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

浏览器扩展是一种可以增强浏览器功能的轻量级程序。它由一组文件组成，包括 HTML、CSS、JavaScript 和配置文件等。扩展可以直接与浏览器交互，访问特定 API，并修改网页内容或行为。

一个典型的浏览器扩展包含以下核心部分：

manifest.json：扩展的配置文件，定义元数据、权限和资源
background scripts：在后台持续运行的脚本
content scripts：注入到网页上下文中执行的脚本
UI 元素 ：如弹出窗口(popup)、选项页面(options) 等

要集成 ChatGPT API 到你的扩展中，首先需要获取 API 密钥。以下是基本步骤：

访问 OpenAI 平台并创建账户
在 API 密钥管理页面生成新的密钥
安全地存储密钥（不要在客户端代码中硬编码）

在扩展中使用 API 时，推荐通过后台脚本发送请求，避免在前端暴露密钥。

浏览器扩展通常会遇到跨域请求限制。解决这个问题的常用方法有：

在 manifest.json 中声明需要的 host 权限
使用扩展的 background page 作为代理
对于内容脚本，通过消息传递与后台脚本通信

{
  "manifest_version": 3,
  "name": "ChatGPT 助手",
  "version": "1.0",
  "description": "与 ChatGPT 集成的浏览器扩展",
  "permissions": [
    "storage",
    "https://api.openai.com/*"
  ],
  "background": {"service_worker": "background.js"},
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  }
}

以下是处理 ChatGPT 请求的示例代码（background.js）：

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {if (request.type === 'chatgpt_request') {
    fetch('https://api.openai.com/v1/chat/completions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer YOUR_API_KEY'
      },
      body: JSON.stringify({
        model: 'gpt-3.5-turbo',
        messages: [{role: 'user', content: request.prompt}],
        temperature: 0.7
      })
    })
    .then(response => response.json())
    .then(data => sendResponse(data))
    .catch(error => sendResponse({error: error.message}));

    return true; // 保持消息通道开放
  }
});