AI Translate 是一款利用大模型API的智能翻译Chrome扩展，由Cursor AI辅助开发。它通过上下文感知、多模型支持和自定义系统Prompt等功能，提供更准确、个性化的翻译体验。用户可自由选择AI模型，定制翻译风格，并享受划词翻译、配置历史管理等便捷功能。该扩展注重用户体验和性能优化，同时保障数据安全与隐私，并规划了语音、文档翻译等未来功能，旨在成为更智能、高效的翻译工具。

💡 **上下文感知翻译：** AI Translate 能够自动提取页面标题、描述和主要内容，并将这些上下文信息传递给AI模型，从而提高翻译的准确性，尤其是在处理专业术语时。

🌐 **多模型API支持：** 扩展支持多种主流AI模型，包括Anthropic Claude、DeepSeek、OpenAI、Google Gemini和通义千问。用户可以根据需求自由选择模型，从而控制翻译质量和成本。

📝 **自定义系统Prompt：** 用户可以根据不同场景定制翻译行为，预设了通用、商务、技术文档、轻松对话和学术论文等多种翻译风格，满足多样化的翻译需求。

🖱️ **智能划词翻译：** 扩展提供划词翻译功能，包括选中文本自动显示翻译按钮、右键菜单快速翻译、可拖拽和调整大小的翻译弹窗，以及位置记忆功能，提升用户的使用效率和体验。

💾 **配置历史管理：** 扩展自动保存API配置历史，方便用户一键切换不同模型配置，并提供智能命名和配置删除等功能，方便用户管理和使用。

🌟 项目概述

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('未知的响应格式');  }}

🎨 用户体验设计

界面设计原则

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

交互优化

/* 平滑动画效果 */.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 作为一款现代化的翻译工具，通过技术创新解决了传统翻译工具的痛点。其核心优势在于：

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

---

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