ChatGPT Extension开发实战：从零构建高效AI助手插件

1次阅读

没有评论

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

在实际开发中，直接调用 ChatGPT API 会遇到几个典型问题：

响应延迟高：普通 HTTP 请求需要等待完整响应，对话体验不流畅
token 限制严格：长对话容易触发 4096 token 限制（gpt-3.5-turbo 模型）
状态维护复杂：多轮对话需要自行管理上下文关联
成本不可控：频繁调用可能产生意外费用

Web App 方案
优点：开发简单，无需处理浏览器兼容性
缺点：无法深度集成浏览器功能，每次访问需重新加载
Browser Extension 方案
优点：常驻内存、支持后台运行、可访问浏览器 API
缺点：需处理 manifest 版本兼容问题

最终采用的技术组合：

Service Worker：处理后台网络请求
IndexedDB：本地存储对话历史
Streaming API：实现实时响应
Protobuf：压缩存储数据

/**
 * 带指数退避的 API 调用
 * @param prompt 用户输入
 * @param maxRetries 最大重试次数（默认 3 次）*/
async function callWithRetry(prompt: string, maxRetries = 3) {
  let delay = 1000;

  for (let attempt = 0; attempt < maxRetries; attempt++) {
    try {return await fetchAPI(prompt);
    } catch (error) {if (attempt === maxRetries - 1) throw error;
      await new Promise(resolve => setTimeout(resolve, delay));
      delay *= 2; // 指数退避
    }
  }
}

// 处理 Server-Sent Events (SSE)
function parseSSE(response: Response) {const reader = response.body?.getReader();
  const decoder = new TextDecoder();

  return new ReadableStream({async start(controller) {while (true) {const { done, value} = await reader!.read();
        if (done) break;

        const chunk = decoder.decode(value);
        controller.enqueue(chunk.split('\n\n')
            .filter(line => line.startsWith('data:'))
            .map(line => JSON.parse(line.slice(6)))
        );
      }
      controller.close();}
  });
}

// protobuf 定义
syntax = "proto3";
message Conversation {
  repeated Message messages = 1;

  message Message {
    string role = 1;
    string content = 2;
    int64 timestamp = 3;
  }
}

// 基础过滤规则
const SENSITIVE_PATTERNS = [/\b(密码 | 银行卡 | 身份证)\d{4,}/,
  /\b(暴力 | 色情 | 毒品)\b/i
];

function sanitizeInput(text) {return SENSITIVE_PATTERNS.reduce((str, pattern) => 
    str.replace(pattern, '[REDACTED]'), 
    text
  );
}

{
  "permissions": [
    "storage",
    "scripting",
    "activeTab"
  ],
  "host_permissions": ["https://api.openai.com/*"],
  "content_security_policy": {"extension_pages": "script-src'self'; object-src'self'"}
}