ChatGPT浏览器集成实战：从插件开发到API调用的完整指南

1次阅读

没有评论

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

浏览器集成 AI 助手能大幅提升工作效率，典型场景包括：

表单智能填充：自动识别网页输入框并生成合规数据
代码实时补全：在开发工具中提供 AI 建议
内容摘要生成：快速提炼网页文章核心观点

优势：
– 完全掌控 DOM 操作权限
– 可长期保持后台服务运行
– 支持离线功能开发

劣势：
– 需处理 MV3 的 Service Worker 生命周期
– 上架商店需严格隐私审查

优势：
– 开发调试流程简单
– 无需处理插件更新机制

劣势：
– 受 CORS 策略严格限制
– API 密钥存在暴露风险

// manifest.json (MV3 规范)
{
  "manifest_version": 3,
  "name": "AI 助手",
  "version": "1.0",
  "background": {"service_worker": "background.js"},
  "content_scripts": [{"matches": ["<all_urls>"],
    "js": ["content.js"]
  }],
  "permissions": ["storage"]
}

/**
 * 带重试机制的 API 请求
 * @param prompt - 用户输入文本
 * @param retries - 最大重试次数  
 */
async function queryChatGPT(prompt: string, retries = 3): Promise<string> {
  const API_ENDPOINT = 'https://api.openai.com/v1/chat/completions';

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

    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return (await response.json()).choices[0].message.content;
  } catch (error) {if (retries > 0) return queryChatGPT(prompt, retries - 1);
    throw new Error(`API 请求失败: ${error}`);
  }
}

Content Script 捕获页面事件
通过 chrome.runtime.sendMessage 发送请求
Background Worker 处理 API 调用
使用 chrome.tabs.sendResponse 返回结果

采用令牌桶算法控制请求频率
错误响应自动触发退避重试

// 令牌桶实现示例
class RateLimiter {constructor(capacity, refillRate) {
    this.tokens = capacity;
    setInterval(() => {this.tokens = Math.min(capacity, this.tokens + refillRate);
    }, 1000);
  }

  async acquire() {while (this.tokens < 1) {await new Promise(resolve => setTimeout(resolve, 100));
    }
    this.tokens--;
  }
}