KISS Translator终极指南开源双语翻译工具的技术架构与高效应用【免费下载链接】kiss-translatorA simple, open source bilingual translation extension Greasemonkey script (一个简约、开源的 双语对照翻译扩展 油猴脚本)项目地址: https://gitcode.com/gh_mirrors/ki/kiss-translatorKISS Translator是一款简约、开源的双语翻译工具支持浏览器扩展和油猴脚本两种形式。它通过创新的双语对照翻译技术在保留原文完整性的同时提供精准译文为技术文档阅读、学术论文研读、新闻浏览等场景提供专业级翻译解决方案。跨语言阅读的挑战与KISS Translator的解决方案在技术开发、学术研究、国际资讯获取等场景中开发者、研究人员和普通用户都面临一个共同挑战如何在保持原文上下文的同时获得准确翻译传统翻译工具要么完全替换原文要么破坏页面布局要么译文生硬难懂。KISS Translator采用「非侵入式双语对照」设计理念通过src/libs/translator.js实现智能文本识别与渲染引擎在网页中为原文添加精确对应的译文。这种技术架构确保了翻译过程不破坏原始页面结构同时提供流畅的阅读体验。图1KISS Translator在React官方文档中的双语翻译效果保留代码块原貌的同时翻译说明文字核心架构与技术特点模块化架构设计KISS Translator采用高度模块化的架构设计主要分为以下几个核心模块翻译引擎模块(src/apis/) - 集成多种翻译服务API规则管理系统(src/config/rules.js) - 网站特定翻译规则配置界面组件层(src/views/) - React组件实现用户界面核心逻辑层(src/libs/) - 翻译、DOM操作、缓存等核心功能多翻译服务支持项目内置支持超过15种翻译服务包括商业服务Google、Microsoft、DeepL、Tencent、VolcengineAI模型OpenAI GPT、Claude、Gemini、DeepSeek、Ollama自定义接口通过custom-api_v2.md支持任意翻译API// API配置示例 - 支持多种翻译服务 export const OPT_ALL_TRANS_TYPES [ OPT_TRANS_BUILTINAI, // Chrome内置AI翻译 OPT_TRANS_GOOGLE, // Google翻译 OPT_TRANS_MICROSOFT, // Microsoft翻译 OPT_TRANS_DEEPL, // DeepL翻译 OPT_TRANS_OPENAI, // OpenAI GPT OPT_TRANS_GEMINI, // Google Gemini OPT_TRANS_CLAUDE, // Anthropic Claude OPT_TRANS_OLLAMA, // 本地Ollama模型 OPT_TRANS_CUSTOMIZE, // 自定义接口 ];智能规则引擎通过src/config/rules.js中的规则系统KISS Translator可以为不同网站配置专属翻译策略// 规则配置示例 export const DEFAULT_RULE { pattern: github.com, // 域名匹配 selector: [itemproptext], // 翻译元素选择器 keepSelector: code, pre, // 保留元素不翻译 terms: commit,pull request, // 专业术语 apiSlug: Microsoft, // 使用的翻译服务 autoScan: true, // 自动识别文本节点 hasRichText: true, // 启用富文本翻译 };快速上手基础配置与使用安装方式选择KISS Translator提供两种安装方式浏览器扩展- 功能完整支持所有浏览器APIChrome/Edge通过官方商店安装Firefox通过Firefox Add-ons安装KiwiAndroid、OrioniOS支持移动端油猴脚本- 无需安装扩展跨浏览器兼容支持Tampermonkey、Violentmonkey等脚本管理器适合有跨域限制的环境基础配置步骤选择翻译服务在设置中选择Google、Microsoft或DeepL等翻译服务配置语言对设置源语言和目标语言支持自动检测调整译文样式选择下划线、高亮或背景色等显示效果设置快捷键默认使用AltQ开启翻译AltS翻译选中文本图2翻译设置面板支持多种翻译服务和样式配置三种核心翻译模式网页双语翻译自动识别页面内容为原文添加双语对照划词翻译选中文本后弹出翻译框支持多服务对比鼠标悬停翻译鼠标悬停时显示翻译结果适合快速查阅进阶应用定制化与扩展网站专属规则配置对于特定网站可以创建精细化翻译规则。以GitHub为例// GitHub专属规则配置 { domain: github.com, selectors: [ .markdown-body p, .markdown-body li, .markdown-body h1, .markdown-body h2, .markdown-body h3 ], ignore: [ .blob-code, // 忽略代码块 .highlight, // 忽略代码高亮 pre // 忽略预格式化文本 ], terms: commit,merge,pull request,issue,fork, // 技术术语保留 apiSlug: Microsoft, // 使用Microsoft翻译 textStyle: underline // 译文使用下划线样式 }自定义翻译接口通过custom-api_v2.md文档可以接入任意翻译API// 自定义API配置示例 { name: MyCustomAPI, type: custom, url: https://api.example.com/translate, method: POST, headers: { Content-Type: application/json, Authorization: Bearer YOUR_API_KEY }, body: JSON.stringify({ text: {{text}}, source: {{fromLang}}, target: {{toLang}} }), path: result.translatedText }翻译记忆与术语库KISS Translator支持翻译记忆功能自动记录用户修正的译文个人术语库在设置中启用「翻译记忆」功能跨设备同步通过src/libs/storage.js实现IndexedDB存储术语一致性确保专业术语在所有文档中翻译一致性能优化与最佳实践批量请求优化通过src/libs/batchQueue.js实现智能批量处理// 批量请求配置 export const DEFAULT_BATCH_SIZE 10; // 每次最多发送10个段落 export const DEFAULT_BATCH_LENGTH 10000; // 每次最多10000字符 export const DEFAULT_BATCH_INTERVAL 400; // 批处理间隔400ms这种设计显著减少API调用次数提升翻译性能特别适合长文档翻译。缓存策略优化项目采用多层缓存策略内存缓存当前会话的翻译结果本地存储IndexedDB存储用户术语和翻译历史请求去重相同内容避免重复翻译YouTube字幕翻译优化针对YouTube等视频平台KISS Translator提供专门的字幕处理// YouTube字幕翻译配置 { domain: youtube.com, selectors: .ytp-caption-segment, // 字幕选择器 splitParagraph: punctuation, // 按标点分割 hasRichText: false, // 禁用富文本 transOnly: false // 显示双语对照 }图3YouTube视频字幕的双语翻译效果支持实时字幕同步开发与扩展指南项目结构与构建项目基于React Material-UI构建支持多平台打包# 克隆项目 git clone https://gitcode.com/gh_mirrors/ki/kiss-translator cd kiss-translator # 安装依赖 pnpm install # 构建不同平台 pnpm build:chrome # Chrome扩展 pnpm build:firefox # Firefox扩展 pnpm build:web # 网页版本 pnpm build:userscript # 油猴脚本核心模块解析翻译管理器(src/libs/translatorManager.js) - 协调所有翻译任务DOM管理器(src/libs/domManager.js) - 处理页面DOM操作样式管理器(src/libs/style.js) - 管理译文样式注入快捷键系统(src/libs/shortcut.js) - 全局快捷键处理自定义钩子开发项目提供丰富的React钩子便于功能扩展// 使用自定义钩子示例 import { useTranBoxState } from ./hooks/useTranBoxState; import { useSelectionController } from ./hooks/useSelectionController; import { useAutoHideTranBtn } from ./hooks/useAutoHideTranBtn; // 在组件中使用 const { isOpen, toggle } useTranBoxState(); const { selectedText, clearSelection } useSelectionController(); useAutoHideTranBtn(isOpen);技术架构优势与对比分析与传统翻译工具对比特性KISS Translator传统浏览器翻译划词翻译插件双语对照✅ 完整保留原文❌ 替换原文⚠️ 有限支持页面布局✅ 完全保持❌ 可能破坏✅ 基本保持代码处理✅ 智能识别❌ 错误翻译⚠️ 部分支持自定义规则✅ 高度可配置❌ 不支持⚠️ 有限配置多翻译服务✅ 15服务❌ 单一服务⚠️ 少数服务技术架构优势模块化设计各功能模块独立便于维护和扩展规则引擎支持网站级精细控制翻译效果更优性能优化批量请求、缓存策略提升响应速度跨平台支持扩展脚本双模式覆盖所有浏览器未来发展方向KISS Translator项目持续演进未来计划包括AI上下文理解利用大语言模型提升翻译质量规则共享社区建立用户规则共享平台离线翻译支持集成本地翻译模型PDF/EPUB支持扩展文档格式支持范围翻译质量评估引入自动翻译质量评分机制总结KISS Translator通过创新的双语对照翻译技术为跨语言阅读提供了专业级解决方案。其开源特性、高度可配置的规则系统、多翻译服务支持使其成为开发者、研究人员和国际信息获取者的理想工具。无论是阅读英文技术文档、研究国际学术论文还是浏览海外资讯KISS Translator都能在保留原文完整性的同时提供准确翻译真正实现「鱼与熊掌兼得」的阅读体验。通过合理的规则配置和性能优化用户可以构建个性化的翻译工作流大幅提升跨语言信息获取效率。【免费下载链接】kiss-translatorA simple, open source bilingual translation extension Greasemonkey script (一个简约、开源的 双语对照翻译扩展 油猴脚本)项目地址: https://gitcode.com/gh_mirrors/ki/kiss-translator创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
KISS Translator终极指南：开源双语翻译工具的技术架构与高效应用
KISS Translator终极指南开源双语翻译工具的技术架构与高效应用【免费下载链接】kiss-translatorA simple, open source bilingual translation extension Greasemonkey script (一个简约、开源的 双语对照翻译扩展 油猴脚本)项目地址: https://gitcode.com/gh_mirrors/ki/kiss-translatorKISS Translator是一款简约、开源的双语翻译工具支持浏览器扩展和油猴脚本两种形式。它通过创新的双语对照翻译技术在保留原文完整性的同时提供精准译文为技术文档阅读、学术论文研读、新闻浏览等场景提供专业级翻译解决方案。跨语言阅读的挑战与KISS Translator的解决方案在技术开发、学术研究、国际资讯获取等场景中开发者、研究人员和普通用户都面临一个共同挑战如何在保持原文上下文的同时获得准确翻译传统翻译工具要么完全替换原文要么破坏页面布局要么译文生硬难懂。KISS Translator采用「非侵入式双语对照」设计理念通过src/libs/translator.js实现智能文本识别与渲染引擎在网页中为原文添加精确对应的译文。这种技术架构确保了翻译过程不破坏原始页面结构同时提供流畅的阅读体验。图1KISS Translator在React官方文档中的双语翻译效果保留代码块原貌的同时翻译说明文字核心架构与技术特点模块化架构设计KISS Translator采用高度模块化的架构设计主要分为以下几个核心模块翻译引擎模块(src/apis/) - 集成多种翻译服务API规则管理系统(src/config/rules.js) - 网站特定翻译规则配置界面组件层(src/views/) - React组件实现用户界面核心逻辑层(src/libs/) - 翻译、DOM操作、缓存等核心功能多翻译服务支持项目内置支持超过15种翻译服务包括商业服务Google、Microsoft、DeepL、Tencent、VolcengineAI模型OpenAI GPT、Claude、Gemini、DeepSeek、Ollama自定义接口通过custom-api_v2.md支持任意翻译API// API配置示例 - 支持多种翻译服务 export const OPT_ALL_TRANS_TYPES [ OPT_TRANS_BUILTINAI, // Chrome内置AI翻译 OPT_TRANS_GOOGLE, // Google翻译 OPT_TRANS_MICROSOFT, // Microsoft翻译 OPT_TRANS_DEEPL, // DeepL翻译 OPT_TRANS_OPENAI, // OpenAI GPT OPT_TRANS_GEMINI, // Google Gemini OPT_TRANS_CLAUDE, // Anthropic Claude OPT_TRANS_OLLAMA, // 本地Ollama模型 OPT_TRANS_CUSTOMIZE, // 自定义接口 ];智能规则引擎通过src/config/rules.js中的规则系统KISS Translator可以为不同网站配置专属翻译策略// 规则配置示例 export const DEFAULT_RULE { pattern: github.com, // 域名匹配 selector: [itemproptext], // 翻译元素选择器 keepSelector: code, pre, // 保留元素不翻译 terms: commit,pull request, // 专业术语 apiSlug: Microsoft, // 使用的翻译服务 autoScan: true, // 自动识别文本节点 hasRichText: true, // 启用富文本翻译 };快速上手基础配置与使用安装方式选择KISS Translator提供两种安装方式浏览器扩展- 功能完整支持所有浏览器APIChrome/Edge通过官方商店安装Firefox通过Firefox Add-ons安装KiwiAndroid、OrioniOS支持移动端油猴脚本- 无需安装扩展跨浏览器兼容支持Tampermonkey、Violentmonkey等脚本管理器适合有跨域限制的环境基础配置步骤选择翻译服务在设置中选择Google、Microsoft或DeepL等翻译服务配置语言对设置源语言和目标语言支持自动检测调整译文样式选择下划线、高亮或背景色等显示效果设置快捷键默认使用AltQ开启翻译AltS翻译选中文本图2翻译设置面板支持多种翻译服务和样式配置三种核心翻译模式网页双语翻译自动识别页面内容为原文添加双语对照划词翻译选中文本后弹出翻译框支持多服务对比鼠标悬停翻译鼠标悬停时显示翻译结果适合快速查阅进阶应用定制化与扩展网站专属规则配置对于特定网站可以创建精细化翻译规则。以GitHub为例// GitHub专属规则配置 { domain: github.com, selectors: [ .markdown-body p, .markdown-body li, .markdown-body h1, .markdown-body h2, .markdown-body h3 ], ignore: [ .blob-code, // 忽略代码块 .highlight, // 忽略代码高亮 pre // 忽略预格式化文本 ], terms: commit,merge,pull request,issue,fork, // 技术术语保留 apiSlug: Microsoft, // 使用Microsoft翻译 textStyle: underline // 译文使用下划线样式 }自定义翻译接口通过custom-api_v2.md文档可以接入任意翻译API// 自定义API配置示例 { name: MyCustomAPI, type: custom, url: https://api.example.com/translate, method: POST, headers: { Content-Type: application/json, Authorization: Bearer YOUR_API_KEY }, body: JSON.stringify({ text: {{text}}, source: {{fromLang}}, target: {{toLang}} }), path: result.translatedText }翻译记忆与术语库KISS Translator支持翻译记忆功能自动记录用户修正的译文个人术语库在设置中启用「翻译记忆」功能跨设备同步通过src/libs/storage.js实现IndexedDB存储术语一致性确保专业术语在所有文档中翻译一致性能优化与最佳实践批量请求优化通过src/libs/batchQueue.js实现智能批量处理// 批量请求配置 export const DEFAULT_BATCH_SIZE 10; // 每次最多发送10个段落 export const DEFAULT_BATCH_LENGTH 10000; // 每次最多10000字符 export const DEFAULT_BATCH_INTERVAL 400; // 批处理间隔400ms这种设计显著减少API调用次数提升翻译性能特别适合长文档翻译。缓存策略优化项目采用多层缓存策略内存缓存当前会话的翻译结果本地存储IndexedDB存储用户术语和翻译历史请求去重相同内容避免重复翻译YouTube字幕翻译优化针对YouTube等视频平台KISS Translator提供专门的字幕处理// YouTube字幕翻译配置 { domain: youtube.com, selectors: .ytp-caption-segment, // 字幕选择器 splitParagraph: punctuation, // 按标点分割 hasRichText: false, // 禁用富文本 transOnly: false // 显示双语对照 }图3YouTube视频字幕的双语翻译效果支持实时字幕同步开发与扩展指南项目结构与构建项目基于React Material-UI构建支持多平台打包# 克隆项目 git clone https://gitcode.com/gh_mirrors/ki/kiss-translator cd kiss-translator # 安装依赖 pnpm install # 构建不同平台 pnpm build:chrome # Chrome扩展 pnpm build:firefox # Firefox扩展 pnpm build:web # 网页版本 pnpm build:userscript # 油猴脚本核心模块解析翻译管理器(src/libs/translatorManager.js) - 协调所有翻译任务DOM管理器(src/libs/domManager.js) - 处理页面DOM操作样式管理器(src/libs/style.js) - 管理译文样式注入快捷键系统(src/libs/shortcut.js) - 全局快捷键处理自定义钩子开发项目提供丰富的React钩子便于功能扩展// 使用自定义钩子示例 import { useTranBoxState } from ./hooks/useTranBoxState; import { useSelectionController } from ./hooks/useSelectionController; import { useAutoHideTranBtn } from ./hooks/useAutoHideTranBtn; // 在组件中使用 const { isOpen, toggle } useTranBoxState(); const { selectedText, clearSelection } useSelectionController(); useAutoHideTranBtn(isOpen);技术架构优势与对比分析与传统翻译工具对比特性KISS Translator传统浏览器翻译划词翻译插件双语对照✅ 完整保留原文❌ 替换原文⚠️ 有限支持页面布局✅ 完全保持❌ 可能破坏✅ 基本保持代码处理✅ 智能识别❌ 错误翻译⚠️ 部分支持自定义规则✅ 高度可配置❌ 不支持⚠️ 有限配置多翻译服务✅ 15服务❌ 单一服务⚠️ 少数服务技术架构优势模块化设计各功能模块独立便于维护和扩展规则引擎支持网站级精细控制翻译效果更优性能优化批量请求、缓存策略提升响应速度跨平台支持扩展脚本双模式覆盖所有浏览器未来发展方向KISS Translator项目持续演进未来计划包括AI上下文理解利用大语言模型提升翻译质量规则共享社区建立用户规则共享平台离线翻译支持集成本地翻译模型PDF/EPUB支持扩展文档格式支持范围翻译质量评估引入自动翻译质量评分机制总结KISS Translator通过创新的双语对照翻译技术为跨语言阅读提供了专业级解决方案。其开源特性、高度可配置的规则系统、多翻译服务支持使其成为开发者、研究人员和国际信息获取者的理想工具。无论是阅读英文技术文档、研究国际学术论文还是浏览海外资讯KISS Translator都能在保留原文完整性的同时提供准确翻译真正实现「鱼与熊掌兼得」的阅读体验。通过合理的规则配置和性能优化用户可以构建个性化的翻译工作流大幅提升跨语言信息获取效率。【免费下载链接】kiss-translatorA simple, open source bilingual translation extension Greasemonkey script (一个简约、开源的 双语对照翻译扩展 油猴脚本)项目地址: https://gitcode.com/gh_mirrors/ki/kiss-translator创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
