浸入式学语言助手

illa-helper 是一个开源的浏览器插件，旨在帮助用户通过沉浸式体验学习外语。它能在用户浏览网页时提供实时翻译、发音指导和词汇解析。插件支持 Chrome 和 Firefox 浏览器，基于 Vue 3 框架开发，结构清晰且易于扩展。用户可以自定义设置，例如调整翻译模型或 API 密钥。illa-helper 特别适合希望在日常浏览中自然提升语言能力的学习者。项目托管在 GitHub 上，开发者可以自由参与贡献，优化功能。

功能列表

• 实时翻译：将网页上的外语文本翻译成用户熟悉的语言。
• 发音辅助：提供单词或短语的发音，通过 Youdao TTS 和 Web Speech API 实现。
• 词汇解析：显示单词的音标、定义和例句，支持交互式界面。
• 自定义设置：支持用户配置 API 密钥、翻译模型和温度参数。
• 跨浏览器支持：兼容 Chrome 和 Firefox，适配不同浏览器特性。
• 悬浮框界面：提供直观的悬浮框，展示翻译和发音信息。
• 离线存储：保存用户设置，确保个性化体验在不同设备上同步。

使用帮助

安装流程

1. 下载插件源码
   访问 https://github.com/xiao-zaiyi/illa-helper，点击“Code”按钮，选择“Download ZIP”下载源码，或使用 Git 命令克隆仓库：

   git clone https://github.com/xiao-zaiyi/illa-helper.git
   

2. 安装依赖
   解压文件后，进入项目目录，运行以下命令安装必要依赖：

   npm install
   

   确保已安装 Node.js 和 npm。

3. 配置环境变量
   在项目根目录创建 .env 文件，添加 API 密钥和配置，例如：

   VITE_WXT_DEFAULT_API_KEY="sk-your-real-api-key"
   VITE_WXT_DEFAULT_API_ENDPOINT="https://xxxxx/api/v1/chat/completions"
   VITE_WXT_DEFAULT_MODEL="gpt-4"
   VITE_WXT_DEFAULT_TEMPERATURE="0.2"
   

   这些设置用于连接翻译和发音服务。注意：.env 文件已加入 .gitignore，确保密钥安全。

4. 构建插件
   根据目标浏览器运行构建命令：
   • Chrome/Edge：

     npm run build:chrome
     

   • Firefox：

     npm run build:firefox
     

   构建完成后，输出文件位于 .output/chrome-mv3（Chrome）或 .output/firefox-mv2（Firefox）。

5. 加载插件
   • Chrome：打开浏览器，进入 chrome://extensions/，启用“开发者模式”，点击“加载已解压的扩展程序”，选择 .output/chrome-mv3 文件夹。
   • Firefox：进入 about:debugging#/runtime/this-firefox，点击“加载临时附加组件”，选择 .output/firefox-mv2 文件夹。插件会自动加载。

使用方法

安装完成后，illa-helper 会在浏览器中运行。以下是主要功能的详细操作流程：

实时翻译

1. 打开任意网页，选中需要翻译的文本。
2. 插件会自动检测外语内容，并在悬浮框中显示翻译结果。
3. 用户可在悬浮框中点击“复制”按钮，将翻译结果保存到剪贴板。
4. 若需更改翻译语言，进入插件选项页面（右键插件图标，选择“选项”），设置目标语言。

发音辅助

1. 选中单词或短语，悬浮框会显示发音按钮（🔊）。
2. 点击发音按钮，插件通过 Youdao TTS 或 Web Speech API 播放音频。
3. 用户可调整发音速度或语音类型（需在选项页面配置）。

词汇解析

1. 悬浮框会显示选中文本的音标、定义和例句。
2. 点击“更多”按钮，可查看详细的词典信息（如词性、近义词）。
3. 若需要保存词汇，点击“添加到生词本”，插件会将词汇存储到本地。

自定义设置

1. 打开插件选项页面，修改 API 密钥或翻译模型（默认 gpt-4）。
2. 调整 VITE_WXT_DEFAULT_TEMPERATURE 参数（0.0-1.0），控制翻译的创造性（较低值更准确，较高值更灵活）。
3. 设置完成后，点击“保存”，插件会自动同步配置。

注意事项

• 确保网络连接稳定，以保证翻译和发音功能正常运行。
• Firefox 用户需注意，插件在 Firefox 中的存储功能需要特定 ID，已在 wxt.config.ts 中配置：

  browser_specific_settings: {
  gecko: {
  id: 'illa-helper@xiao-zaiyi',
  strict_min_version: '88.0'
  }
  }
  

• 若遇到 API 连接问题，检查 .env 文件中的密钥和端点配置。

应用场景

1. 外语学习
   学生或自学者在浏览外语网站时，使用 illa-helper 获取实时翻译和发音，快速理解内容并学习新词汇。
2. 学术研究
   研究人员阅读外文文献时，通过插件翻译专业术语并保存生词，提升阅读效率。
3. 日常浏览
   非母语用户在浏览社交媒体或新闻时，借助插件快速理解外语内容，增强信息获取能力。
4. 开发者调试
   开发者可通过修改源码或配置，测试不同翻译模型或 API，优化插件性能。

QA

1. illa-helper 支持哪些浏览器？
   目前支持 Chrome 和 Firefox，分别适配 Chrome Manifest V3 和 Firefox Manifest V2。
2. 需要付费使用吗？
   illa-helper 是开源项目，免费使用。但需自行获取翻译或发音服务的 API 密钥，可能涉及费用。
3. 如何更新插件？
   从 GitHub 拉取最新代码，重新运行构建和加载流程即可更新。
4. 翻译不准确怎么办？
   检查 API 密钥和模型配置，或尝试调整 VITE_WXT_DEFAULT_TEMPERATURE 参数。
5. 可以离线使用吗？
   部分功能（如本地存储）支持离线，但翻译和发音需联网。