浸入式学语言助手是什么？

现在浏览器的翻译插件确实很方便，但长期依赖下来我们发现一个问题：外语能力不但没提升，反而越来越依赖翻译了。这时候，不妨试试浸入式学语言助手（illa-helper）这款浏览器插件，可帮助我们在日常网页浏览中自然地学习语言。

浸入式学语言助手可以智能地将网页中部分词汇替换为目标语言，还配备完整的发音学习系统，让我们在日常浏览中自然提升词汇量。目的是帮助大家在日常网页浏览中自然地学习语言，通过智能替换网页上的部分词语为目标语言词汇，让用户在沉浸式阅读中提升词汇量和语感。

核心特性

  • 核心翻译引擎：具备智能语言检测、智能文本处理、精确替换控制、上下文感知、多语言支持、翻译位置控制以及括号显示控制等功能。

  • 发音学习系统：拥有交互式发音工具提示、双层学习体验、多TTS服务支持、智能音标检索、AI定义解释、渐进式加载、音频缓存和快捷键支持等特性。

  • 丰富的视觉体验：提供7种翻译样式、学习模式、发光动画、响应式设计以及浮动工具球等功能。

  • 高度可配置：支持智能翻译模式、用户级别适应、多种触发模式、原始文本显示控制、段落长度控制、发音功能切换、多API配置以及数据导入/导出等功能。

  • 开放API集成：兼容OpenAI API，支持灵活配置，具备智能提示、错误处理和多API支持等特性。

  • 性能与优化：采用智能缓存、增量处理、DOM安全和内存管理等策略。

技术架构

  • 框架：使用WXT这一现代WebExtension开发框架。

  • 前端：采用Vue 3 + TypeScript + Vite技术栈。

  • UI库：使用Tailwind CSS + Lucide Icons。

  • 工具：集成ESLint + Prettier + TypeScript编译工具。

  • API集成：支持OpenAI兼容接口、Dictionary API和Youdao TTS。

  • 架构模式：采用提供者模式、模块化设计和事件驱动架构。

  • 跨浏览器兼容性：支持Chrome、Edge、Firefox，部分支持Safari。

性能

  • 智能缓存系统：翻译结果、音标数据、TTS音频多级缓存策略。

  • 增量处理机制：DOM监听、防抖优化、Range API精确操作。

安装与运行步骤

  1. 先决条件：Node.js（版本18或更高）、npm或其他包管理器。

  2. 安装：克隆仓库、安装依赖。

  3. 配置：通过.env文件管理本地开发环境的配置，需提供有效的API Key。

  4. 构建扩展：根据目标浏览器执行相应的构建命令。

  5. 加载扩展：按照不同浏览器的指南加载扩展。

浸入式学语言助手(图1)

浸入式学语言助手基于MIT License开源，大家可以自由使用、修改和分发此代码，包括用于商业目的。