AI Translate：基于大模型的智能翻译Chrome扩展

🌟 项目概述

AI Translate 是一款基于大模型API的智能翻译Chrome扩展，由Cursor AI辅助开发完成。该插件突破了传统翻译工具的局限性，通过上下文感知、自定义系统Prompt和多模型支持等特性，为用户提供更准确、更个性化的翻译体验。

安装链接：chromewebstore.google.com/detail/ai-t…

🎯 核心理念

• 上下文驱动：利用页面内容提供翻译上下文，显著提升翻译准确性
• 模型自主权：用户可自由选择AI模型，掌控翻译质量和成本
• 高度定制化：支持自定义系统Prompt，满足不同场景需求

🚀 核心特色功能

1. 智能上下文感知翻译

传统翻译工具往往缺乏上下文理解，导致专业术语翻译不准确。AI Translate通过以下机制解决这一问题：

// 自动提取页面上下文
function extractPageContext() {
  const title = document.title;
  const metaDesc = document.querySelector('meta[name="description"]');
  const mainContent = getMainContent(); // 获取主要内容区域
  
  return `页面标题: ${title}\n页面描述: ${description}\n页面内容: ${mainContent}`;
}

技术优势：

• 自动识别页面主要内容区域
• 提取页面标题和描述作为上下文
• 将上下文信息传递给AI模型，提升翻译准确性

2. 多模型API支持

支持主流AI模型，用户可根据需求自由选择：

模型类型	支持模型	特点
Anthropic Claude	Claude 4, Claude 3.5 Sonnet/Haiku	理解能力强，翻译自然
DeepSeek	DeepSeek V3, DeepSeek R1	性价比高，中文优化
OpenAI	GPT-4, GPT-4o, GPT-3.5	通用性强，生态完善
Google Gemini	Gemini 2.5/1.5 Pro/Flash	多模态支持，速度快
通义千问	Qwen Max/Plus/Turbo	中文本土化优化

页面交互：

技术实现：

// 统一的API适配层
function buildTranslationRequest(model, prompt, endpoint, systemPrompt) {
  // Anthropic Claude API
  if (model.includes('claude')) {
    return {
      model: model,
      max_tokens: 4000,
      messages: [{ role: "user", content: prompt }],
      system: systemPrompt,
      temperature: 0.3
    };
  }
  
  // OpenAI兼容格式
  return {
    model: model,
    messages: [
      { role: "system", content: systemPrompt },
      { role: "user", content: prompt }
    ],
    temperature: 0.3,
    max_tokens: 4000
  };
}

3. 自定义系统Prompt

用户可根据不同场景定制翻译行为：

预设模板：

• 📋 默认模式：通用翻译，保持原文格式
• 💼 专业商务：正式语调，商务用词
• 😊 轻松对话：口语化表达，生活化用词
• 🔧 技术文档：保留技术术语，准确翻译
• 📚 学术论文：学术化表达，严谨用词

页面交互：

技术实现：

const promptTemplates = {
  professional: "你是一位专业的商务翻译，请使用正式、准确的商务用词进行翻译...",
  technical: "你是一位技术文档翻译专家，请保留技术术语的准确性...",
  casual: "你是一位口语化翻译助手，请使用自然、生活化的表达..."
};

4. 智能划词翻译

核心功能：

• 🖱️ 选中文本自动显示翻译按钮
• 🖱️ 右键菜单快速翻译
• 📌 可拖拽、调整大小的翻译弹窗
• 🔄 弹窗收缩为图标，节省屏幕空间
• 💾 位置记忆功能

页面交互：

技术亮点：

// 智能边界检测
function adjustPopupPosition(popup, x, y) {
  const popupRect = popup.getBoundingClientRect();
  const viewport = { width: window.innerWidth, height: window.innerHeight };
  
  // 右边界检查
  if (x + popupRect.width > viewport.width) {
    x = viewport.width - popupRect.width - 10;
  }
  
  // 底部边界检查  
  if (y + popupRect.height > viewport.height) {
    y = y - popupRect.height - 20; // 显示在选中文本上方
  }
  
  return { x: Math.max(10, x), y: Math.max(10, y) };
}

5. 配置历史管理

功能特点：

• 💾 自动保存API配置历史（最多10个）
• 🔄 一键切换不同模型配置
• 🏷️ 智能命名（模型名 + 时间戳）
• 🗑️ 配置删除和管理

🛠️ 技术架构

架构设计

AI Translate Extension
├── Manifest V3 架构
├── Background Service Worker
│   ├── API调用管理
│   ├── 右键菜单处理
│   └── 消息路由
├── Content Script
│   ├── 页面内容注入
│   ├── 划词翻译UI
│   └── 上下文提取
├── Popup Interface
│   ├── 快速翻译
│   └── 设置入口
└── Options Page
    ├── 模型配置
    ├── 系统Prompt设置
    └── 历史管理

核心技术栈

• 框架：Chrome Extension Manifest V3
• 语言：原生JavaScript (ES6+)
• 样式：CSS3 + Flexbox/Grid
• 存储：Chrome Storage API (sync + local)
• 权限：activeTab, contextMenus, storage, scripting

API适配层设计

为了支持多种AI模型，设计了统一的API适配层：

class APIAdapter {
  // 请求头适配
  static buildHeaders(apiKey, endpoint) {
    if (endpoint.includes('anthropic.com')) {
      return {
        'x-api-key': apiKey,
        'anthropic-version': '2023-06-01',
        'anthropic-dangerous-direct-browser-access': 'true'
      };
    }
    return { 'Authorization': `Bearer ${apiKey}` };
  }
  
  // 响应解析适配
  static parseResponse(data, endpoint) {
    if (data.content?.[0]?.text) return data.content[0].text; // Anthropic
    if (data.choices?.[0]?.message) return data.choices[0].message.content; // OpenAI
    if (data.candidates?.[0]?.content) return data.candidates[0].content.parts[0].text; // Gemini
    throw new Error('未知的响应格式');
  }
}

🎨 用户体验设计

界面设计原则

1. 渐进式披露：复杂功能逐步展示，避免信息过载
2. 即时反馈：操作结果实时显示，状态清晰可见
3. 上下文保持：翻译弹窗位置记忆，减少重复操作
4. 响应式设计：适配不同屏幕尺寸和分辨率

交互优化

/* 平滑动画效果 */
.translate-popup {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

/* 拖拽状态视觉反馈 */
.translate-popup.dragging {
  transform: scale(1.02);
  box-shadow: 0 15px 50px rgba(0,0,0,0.25);
}

📊 性能优化

内存管理

// 防抖优化，避免频繁API调用
const debouncedTranslate = debounce(translateText, 300);

// 事件监听器清理
function cleanup() {
  document.removeEventListener('mouseup', handleTextSelection);
  document.removeEventListener('click', closePopupOnOutsideClick);
}

网络优化

• 请求合并：避免重复翻译相同文本
• 错误重试：网络异常时自动重试机制
• 超时控制：设置合理的请求超时时间

🛡️ 安全与隐私

数据安全

• 本地存储：API密钥仅存储在用户本地浏览器
• 加密传输：所有API请求使用HTTPS加密
• 无数据收集：插件不收集任何用户数据

权限最小化

{
  "permissions": [
    "activeTab",      // 仅访问当前活动标签页
    "contextMenus",   // 右键菜单功能
    "storage",        // 本地设置存储
    "scripting"       // 内容脚本注入
  ],
  "host_permissions": ["<all_urls>"] // 翻译功能需要
}

📈 未来规划

功能扩展

• 🎵 语音翻译：集成语音识别和TTS
• 📄 文档翻译：支持PDF、Word等文档格式
• 🌐 实时网页翻译：整页翻译功能
• 🤖 AI对话：基于翻译内容的智能问答

技术升级

• Service Worker优化：提升后台处理性能
• WebAssembly集成：本地模型推理支持
• PWA支持：跨平台使用体验

📝 总结

AI Translate 作为一款现代化的翻译工具，通过技术创新解决了传统翻译工具的痛点。其核心优势在于：

1. 技术先进性：基于最新的大模型API，翻译质量显著提升
2. 用户自主权：模型选择和配置完全由用户掌控
3. 开发效率：Cursor AI辅助开发，快速响应用户需求

---

本文档由作者结合技术实践和Cursor AI辅助编写，持续更新中...