API_KEY 客户端配置指南

// 配置文件 config.js
const AutoBoxConfig = {
    apiKey: 'ak-your32characterapikeyhere',
    baseUrl: 'https://your-domain.com/v1',
    timeout: 30000, // 30秒超时
    retryAttempts: 3
};

// API 客户端类
class AutoBoxWebClient {
    constructor(config = AutoBoxConfig) {
        this.apiKey = config.apiKey;
        this.baseUrl = config.baseUrl;
        this.timeout = config.timeout;
        this.retryAttempts = config.retryAttempts;
    }

    async request(endpoint, options = {}) {
        const url = `${this.baseUrl}${endpoint}`;
        const headers = {
            'Authorization': `Bearer ${this.apiKey}`,
            'Content-Type': 'application/json',
            ...options.headers
        };

        const fetchOptions = {
            method: 'POST',
            headers,
            ...options
        };

        try {
            const response = await fetch(url, fetchOptions);
            
            if (!response.ok) {
                const error = await response.json();
                throw new Error(error.detail || '请求失败');
            }

            return await response.json();
        } catch (error) {
            console.error('API请求失败:', error);
            throw error;
        }
    }
}

// 使用示例
const client = new AutoBoxWebClient();

// 调用 API
client.request('/autobox/your_app_id/sync', {
    body: JSON.stringify({
        messages: [{ role: 'user', content: 'Hello' }],
        model: 'gpt-3.5-turbo'
    })
}).then(result => {
    console.log('响应:', result);
}).catch(error => {
    console.error('错误:', error);
});

// 使用环境变量（适用于 React、Vue 等框架）
const config = {
    apiKey: process.env.REACT_APP_AutoBox_API_KEY,
    baseUrl: process.env.REACT_APP_AutoBox_BASE_URL || 'https://your-domain.com/v1'
};

// .env 文件
REACT_APP_AutoBox_API_KEY=ak-your32characterapikeyhere
REACT_APP_AutoBox_BASE_URL=https://your-domain.com/v1

// 使用代理服务器隐藏 API_KEY
const ProxyClient = {
    async callAPI(endpoint, data) {
        // 通过后端代理调用，避免在前端暴露 API_KEY
        const response = await fetch('/api/proxy/AutoBox', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                endpoint,
                data
            })
        });
        
        return await response.json();
    }
};

// package.json 依赖
{
    "dependencies": {
        "axios": "^1.6.0",
        "dotenv": "^16.3.1"
    }
}

// .env 文件
AutoBox_API_KEY=ak-your32characterapikeyhere
AutoBox_BASE_URL=https://your-domain.com/v1

// 配置文件 AutoBox.js
require('dotenv').config();
const axios = require('axios');

class AutoBoxClient {
    constructor() {
        this.apiKey = process.env.AutoBox_API_KEY;
        this.baseUrl = process.env.AutoBox_BASE_URL;
        
        if (!this.apiKey) {
            throw new Error('AutoBox_API_KEY 环境变量未设置');
        }

        this.client = axios.create({
            baseURL: this.baseUrl,
            timeout: 30000,
            headers: {
                'Authorization': `Bearer ${this.apiKey}`,
                'Content-Type': 'application/json'
            }
        });

        // 请求拦截器
        this.client.interceptors.request.use(
            config => {
                console.log(`发送请求: ${config.method.toUpperCase()} ${config.url}`);
                return config;
            },
            error => Promise.reject(error)
        );

        // 响应拦截器
        this.client.interceptors.response.use(
            response => response.data,
            error => {
                console.error('API请求失败:', error.response?.data || error.message);
                return Promise.reject(error);
            }
        );
    }

    async chatCompletion(appId, messages, options = {}) {
        return await this.client.post(`/autobox/${appId}/sync`, {
            messages,
            model: 'gpt-3.5-turbo',
            ...options
        });
    }
}

module.exports = AutoBoxClient;

// 后台脚本
class AutoBoxExtension {
    constructor() {
        this.apiKey = null;
        this.baseUrl = 'https://your-domain.com/v1';
        this.loadConfig();
    }

    async loadConfig() {
        const result = await chrome.storage.sync.get(['apiKey', 'baseUrl']);
        this.apiKey = result.apiKey;
        this.baseUrl = result.baseUrl || this.baseUrl;
    }

    async saveConfig(apiKey, baseUrl) {
        await chrome.storage.sync.set({
            apiKey: apiKey,
            baseUrl: baseUrl
        });
        this.apiKey = apiKey;
        this.baseUrl = baseUrl;
    }

    async callAPI(endpoint, data) {
        if (!this.apiKey) {
            throw new Error('API Key 未配置');
        }

        const response = await fetch(`${this.baseUrl}${endpoint}`, {
            method: 'POST',
            headers: {
                'Authorization': `Bearer ${this.apiKey}`,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        });

        if (!response.ok) {
            const error = await response.json();
            throw new Error(error.detail || '请求失败');
        }

        return await response.json();
    }
}

const AutoBox = new AutoBoxExtension();

// 监听来自 popup 和 content script 的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.action === 'callAPI') {
        AutoBox.callAPI(request.endpoint, request.data)
            .then(result => sendResponse({ success: true, data: result }))
            .catch(error => sendResponse({ success: false, error: error.message }));
        return true; // 保持消息通道开放
    }
});

// popup.js
document.addEventListener('DOMContentLoaded', async () => {
    // 加载已保存的配置
    const result = await chrome.storage.sync.get(['apiKey', 'baseUrl']);
    if (result.apiKey) {
        document.getElementById('apiKey').value = result.apiKey;
    }
    if (result.baseUrl) {
        document.getElementById('baseUrl').value = result.baseUrl;
    }

    // 保存配置
    document.getElementById('saveConfig').addEventListener('click', async () => {
        const apiKey = document.getElementById('apiKey').value;
        const baseUrl = document.getElementById('baseUrl').value || 'https://your-domain.com/v1';
        
        if (!apiKey) {
            showStatus('请输入 API Key', 'error');
            return;
        }

        await chrome.storage.sync.set({ apiKey, baseUrl });
        showStatus('配置已保存', 'success');
    });

    // 测试 API 连接
    document.getElementById('testAPI').addEventListener('click', async () => {
        const apiKey = document.getElementById('apiKey').value;
        const baseUrl = document.getElementById('baseUrl').value || 'https://your-domain.com/v1';
        
        if (!apiKey) {
            showStatus('请先输入 API Key', 'error');
            return;
        }

        try {
            showStatus('测试连接中...', '');
            
            const response = await chrome.runtime.sendMessage({
                action: 'callAPI',
                endpoint: '/autobox/test/sync',
                data: {
                    messages: [{ role: 'user', content: 'test' }],
                    model: 'gpt-3.5-turbo'
                }
            });

            if (response.success) {
                showStatus('连接测试成功', 'success');
            } else {
                showStatus(`连接测试失败: ${response.error}`, 'error');
            }
        } catch (error) {
            showStatus(`连接测试失败: ${error.message}`, 'error');
        }
    });

    function showStatus(message, type) {
        const statusDiv = document.getElementById('status');
        statusDiv.textContent = message;
        statusDiv.className = `status ${type}`;
        
        if (type === 'success') {
            setTimeout(() => {
                statusDiv.textContent = '';
                statusDiv.className = 'status';
            }, 3000);
        }
    }
});