### [浸入式学语言助手：一款基于”可理解输入”理论的浏览器扩展，帮助你在日常网页浏览中自然地学习语言。](https://www.appmiao.com/article/1390)

**Published:** 2025-07-01T06:19:22

**Author:** 阿喵

**Excerpt:** 项目介绍 浸入式学语言助手，一款基于”可理解输入”理论的浏览器扩展，帮助你在日常网页浏览中自然地学习语言。 集成了完整的发音学习生态系统和智能多语言翻译功能，包括自动语言检测、音标显示、AI词义解释、双TTS语音合成和交互式悬浮框，为用户提

## 项目介绍

浸入式学语言助手，一款基于”可理解输入”理论的浏览器扩展，帮助你在日常网页浏览中自然地学习语言。

集成了完整的发音学习生态系统和智能多语言翻译功能，包括自动语言检测、音标显示、AI词义解释、双TTS语音合成和交互式悬浮框，为用户提供从智能翻译到发音学习的一站式沉浸式体验。

## 项目截图

![](https://pic.amiao.app/2025/07/26052018/19305.png)

## 功能特性[](https://github.com/xiao-zaiyi/illa-helper/blob/master/README_ZH.md#-%E5%8A%9F%E8%83%BD%E7%89%B9%E6%80%A7)

### 🎯 核心翻译引擎[](https://github.com/xiao-zaiyi/illa-helper/blob/master/README_ZH.md#-%E6%A0%B8%E5%BF%83%E7%BF%BB%E8%AF%91%E5%BC%95%E6%93%8E)

-   **智能语言检测**: AI自动识别网页源语言，无需用户手动指定语言类型
-   **智能文本处理**: 使用大语言模型分析网页内容，智能选择适合用户水平的词汇进行翻译
-   **精确替换控制**: 可精确控制翻译比例（1%-100%），支持字符级精确计算
-   **上下文感知**: 考虑语境和用户水平，选择最合适的翻译词汇
-   **多语言支持**: 支持20+种语言的智能翻译（英语、日语、韩语、法语、德语、西班牙语、俄语、意大利语、葡萄牙语、荷兰语、瑞典语、挪威语、丹麦语、芬兰语、波兰语、捷克语、土耳其语、希腊语等）**理论上依赖大模型能力**。
-   **翻译位置控制**: 新增翻译文本位置自定义功能，更灵活的显示方式
-   **括号显示控制**: 可选择是否显示翻译文本的括号，提供更清爽的阅读体验

### 🔊 发音学习生态系统 ⭐[](https://github.com/xiao-zaiyi/illa-helper/blob/master/README_ZH.md#-%E5%8F%91%E9%9F%B3%E5%AD%A6%E4%B9%A0%E7%94%9F%E6%80%81%E7%B3%BB%E7%BB%9F-)

-   **交互式悬浮框**: 鼠标悬停翻译词汇即可查看音标、AI词义和朗读功能，智能定位避免边界溢出
-   **双层学习体验**: 短语显示可交互的单词列表，点击单个单词查看详细信息，支持嵌套悬浮框
-   **多TTS服务支持**: 集成有道TTS（高质量）和Web Speech API（备用），支持英式/美式发音切换
-   **智能音标获取**: 自动获取Dictionary API音标数据，24小时TTL缓存优化性能
-   **AI词义解释**: 实时调用AI生成中文词义解释，理解更准确，支持上下文语境分析
-   **渐进式加载**: 先显示基础信息，再异步加载详细内容，优化用户体验
-   **音频缓存**: 内存级TTS音频缓存，同一单词无需重复生成语音
-   **快捷键支持**: 新增发音弹出框快捷键设置，提升操作效率

### 🎨 丰富的视觉体验[](https://github.com/xiao-zaiyi/illa-helper/blob/master/README_ZH.md#-%E4%B8%B0%E5%AF%8C%E7%9A%84%E8%A7%86%E8%A7%89%E4%BD%93%E9%AA%8C)

-   **7种翻译样式**: 默认、微妙、粗体、斜体、下划线、高亮、学习模式（模糊效果）
-   **学习模式**: 翻译词汇初始模糊显示，鼠标悬停时清晰化，增强记忆效果
-   **辉光动画**: 新翻译词汇出现时的柔和提示效果，不干扰阅读体验
-   **响应式设计**: 自适应深色/浅色主题，智能悬浮框定位
-   **悬浮工具球**: 新增可配置的悬浮工具球，快速访问常用功能

### ⚙️ 高度可配置性[](https://github.com/xiao-zaiyi/illa-helper/blob/master/README_ZH.md#%EF%B8%8F-%E9%AB%98%E5%BA%A6%E5%8F%AF%E9%85%8D%E7%BD%AE%E6%80%A7)

-   **智能翻译模式**: 用户只需选择目标语言，AI自动检测源语言并进行翻译
-   **用户水平适配**: 从初级到精通5个级别，AI智能调整词汇难度和选择策略
-   **触发模式**: 支持自动触发（页面加载时处理）和手动触发两种工作方式
-   **原文显示控制**: 可选择显示、隐藏或学习模式（模糊效果）显示被翻译的原文
-   **段落长度控制**: 自定义AI单次处理的最大文本长度
-   **发音功能开关**: 可独立控制发音悬浮框功能的启用状态
-   **多API配置**: 支持配置多个API服务，可灵活切换不同的翻译服务提供商
-   **数据导入导出**: 新增配置数据的导入导出功能，方便备份和迁移

### 🔌 开放式API集成[](https://github.com/xiao-zaiyi/illa-helper/blob/master/README_ZH.md#-%E5%BC%80%E6%94%BE%E5%BC%8Fapi%E9%9B%86%E6%88%90)

-   **兼容OpenAI API**: 支持任何兼容 OpenAI 格式的AI服务（ChatGPT、Claude、豆包等国产大模型）
-   **灵活配置**: 自定义API Key、Endpoint、模型名称、Temperature参数
-   **智能提示词**: 根据翻译方向和用户水平动态生成最优提示词
-   **错误处理**: 完善的API错误处理和重试机制
-   **多API支持**: 支持配置多个API服务并灵活切换，提供更可靠的服务保障

### 🚀 性能与优化[](https://github.com/xiao-zaiyi/illa-helper/blob/master/README_ZH.md#-%E6%80%A7%E8%83%BD%E4%B8%8E%E4%BC%98%E5%8C%96)

-   **智能缓存**: 翻译结果、音标数据、TTS音频多级缓存策略
-   **增量处理**: 只处理新增内容，避免重复翻译
-   **DOM安全**: 使用Range API确保DOM结构完整性
-   **内存管理**: 及时清理监听器，优化内存使用

### 💻 现代技术架构[](https://github.com/xiao-zaiyi/illa-helper/blob/master/README_ZH.md#-%E7%8E%B0%E4%BB%A3%E6%8A%80%E6%9C%AF%E6%9E%B6%E6%9E%84)

-   **框架**: [WXT](https://wxt.dev/) – 现代WebExtension开发框架
-   **前端**: Vue 3 + TypeScript + Vite
-   **UI库**: Tailwind CSS + Lucide Icons
-   **构建**: ESLint + Prettier + TypeScript编译
-   **API集成**: OpenAI兼容接口 + Dictionary API + 有道TTS
-   **跨浏览器兼容**: 支持Chrome、Edge、Firefox，部分支持Safari

## 🌐 浏览器兼容性[](https://github.com/xiao-zaiyi/illa-helper/blob/master/README_ZH.md#-%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7)

本扩展基于 [Web Extension API](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions) 和 [WXT](https://wxt.dev/) 构建，支持以下浏览器：

| 浏览器 | 支持状态 | 特殊说明 |
| --- | --- | --- |
| Chrome | ✅ 完全支持 | 推荐环境，所有功能可用 |
| Edge | ✅ 完全支持 | 基于Chromium，完整兼容 |
| Firefox | ✅ 支持 | 需配置addon ID，详见[Firefox安装指南](https://github.com/xiao-zaiyi/illa-helper/blob/master/README_ZH.md#firefox-%E5%AE%89%E8%A3%85%E6%8C%87%E5%8D%97) |
| Safari | ⚠️ 部分支持 | 需要额外配置，自行查询 |

## 项目链接

[https://github.com/xiao-zaiyi/illa-helper](https://github.com/xiao-zaiyi/illa-helper)

**Tags:** 浏览器扩展, 语言学习

**Categories:** 浏览器扩展

---