【标签】学习工作
**【标题】**学习工作 + Word Translator 智能单词翻译助手
【正文】
0. 先和大家打个招呼吧 
-
你是谁： 我是一个大学生，在看外文文献时用浏览器自带的翻译工具虽然能够翻译，但过于简单，而且不能将这个单词自动记录下来，想要记录还需要自己复制，这让人感觉很不方便，于是就想自己开发一个可以集翻译、记录、导出与一体的插件，在制作过程中，又慢慢加入其他很多功能，如名词解释，结合网页句子翻译等功能，最终产生了我的这个插件。
-
**你是怎么用 TRAE 把 Demo 做出来的：**我时口腔专业的，对编程不太熟练，但通过自然语言描述用trae进行编程发现效果还不错，不过有时后要增添一些功能或修改一些界面时，发现有时后trae会把整个项目改崩，完全运行不了，后来学会让trae自动保存git，发现效果好了不少，出现问题后可以随时回溯，最终也是成功做了出来。
1. Demo 简介
-
是什么：Word Translator 是一款基于 Edge 浏览器的智能单词翻译扩展插件。用户在浏览任何英文网页时，只需选中单词即可调用豆包 / DeepSeek 等大模型 API 获取精准翻译，无需切换页面或应用，实现「沉浸式阅读 + 即时学习」的流畅体验。
-
面向谁：核心用户包括：正在备考四六级 / 雅思托福的学生、需要大量阅读英文文献的科研人员、日常工作中接触英文资料的职场人士，以及任何希望提升英语阅读能力的中文用户。
-
主要功能：
-
智能划词翻译：网页选中单词后，通过 AI 大模型实时翻译，返回音标、词性、释义、例句、同义词、反义词、词源等丰富信息。支持多种触发方式（自动翻译 / 点击按钮 /
填充输入框）。 -
生词本管理：内置文件夹分类系统（默认生词本 / 四级 / 六级等），支持增删改查、批
量移动、导入导出，并可导出为 Word 文档（A4 双栏排版，便于打印背诵）。 -
名词解释与字幕翻译：支持专业术语深度解释（所属领域、相关概念、示例）；支持
视频字幕实时翻译，满足多媒体学习需求。 -
句子分析与高亮：分析单词在句子中的语法角色（主语 / 谓语 / 宾语等）；在网页中高
亮显示已收藏的生词，点击即可查看释义，实现「在阅读中复习」。 -
高度可定制：支持自定义 API（豆包 / DeepSeek / 任意 OpenAI 兼容接口）、自定义
Prompt 模板、显示字段开关、主题切换等，满足不同用户的个性化需求。。
2. Demo 创作思路
-
**灵感来源：**作为一个经常需要阅读英文技术文档和论文的开发者，我发现传统的翻译工具存在几个痛点：
• 需要复制单词 → 打开翻译软件 → 粘贴查询，流程割裂，阅读注意力被打断；
• 普通词典释义过于简单，缺少例句、词源、搭配等深度学习信息；
• 查过的单词没有系统性的收藏和复习机制，过目即忘。
因此，我希望打造一款「常驻浏览器、一键即查、深度学习、闭环复习」的翻译工具，让英文阅读不再因语言障碍而停滞。
-
**想解决的问题：**有以下几个问题
• 阅读流畅性：通过浏览器插件形态，实现「选中即译」，不打断阅读心流；
• 学习深度：利用大模型的丰富知识，提供远超传统词典的多维度信息（词根词缀、文化背景、用法注意等）；
• 复习闭环：生词本 + 网页高亮 + Word 导出，形成「查词 → 收藏 → 复习 → 导出背诵」的完整学习链路。
-
**为什么做这个方向：**语言学习是「学习工作」赛道中最普遍、最刚性的需求之一。相比做一个独立的 App 或网站，浏览器插件形态更贴近用户的真实使用场景（阅读网页时顺手查词），安装成本低、使用频率高。同时，借助大模型 API，可以用较低的技术成本实现以往需要庞大词库和 NLP pipeline 才能达到的翻译质量。
3. Demo 体验地址（三选一）
-
WordTranslator_Demo.zip (60.4 KB)（这是插件的代码，上传到edge浏览器即可体验）
-
demo.html (46.7 KB)（这是html交互演示界面，不是demo,只是演示，没有具体功能，要体验完整功能要用上面的插件源码上传edge浏览器使用）
4. TRAE 实践过程
整个插件完全使用 TRAE IDE 开发完成。首先在 TRAE 中确定产品方向，以「划词翻译 + 生词本 + 复习导出」为核心闭环，采用 Manifest V3 架构，由 TRAE 生成 manifest.json、Service Worker 和初始 UI。随后通过 Builder 模式分模块推进：background.js 接入豆包/DeepSeek API 并实现动态 Prompt 生成（根据用户勾选的音标/例句/同义词/词源等字段自动拼接提示词）；content.js 实现划词监听和浮动翻译按钮；sidebar.js 完成侧边栏 UI、生词本文件夹管理和暗色主题。开发中遇到的主要问题包括：侧边栏关闭后瞬间弹回（通过单一状态机修复竞态条件）、翻译结果释义太少（通过动态 Prompt 和用户自定义输出字段解决）、暗色主题文字看不清（补全 CSS 变量）、Word 导出排版不佳（纯 JS 生成 DOCX 并优化 A4 双列布局）。后期还扩展了名词解释、实时字幕翻译（Web Speech API）和句子分析功能。整个过程中坚持「小步快跑、及时验证」的原则，每完成一个功能立即测试，发现问题马上反馈修复，复杂功能如 Word 导出则拆解为核心逻辑和排版细节两步实现。
-
.1822330561502400:7b1a8a81ea4f6d2517498ebb5a613b07_6a4285c029ae584249c934c0.6a428cc429ae584249c934c2.6a428cc445867f627a186eca:Trae CN.T(2026/6/29 23:18:28)
-
.1822330561502400:08f35d7c0a86a0300b4a8e7939208943_6a4285c029ae584249c934c0.6a42902329ae584249c9355a.6a42902245867f627a186ecb:Trae CN.T(2026/6/29 23:32:51)
-
.1822330561502400:0ed0707832c54ab8557d433637e577de_6a4285c029ae584249c934c0.6a4296b529ae584249c935d7.6a4296b545867f627a186ed0:Trae CN.T(2026/6/30 00:00:53)
-
.1822330561502400:3c895a94e37b9fbad1b26b9d93a75b84_6a4285c029ae584249c934c0.6a429bbd29ae584249c9360c.6a429bbd45867f627a186ed2:Trae CN.T(2026/6/30 00:22:21)
-
.1822330561502400:61f5a31616de3c3b62dd56cd6e13bf87_6a4285c029ae584249c934c0.6a429f2e29ae584249c93625.6a429f2d45867f627a186ed3:Trae CN.T(2026/6/30 00:37:02)
-
.1822330561502400:efae431150b6c54df2d6caa7d714c094_6a4285c029ae584249c934c0.6a42b0ba29ae584249c93727.6a42b0ba45867f627a186ed7:Trae CN.T(2026/6/30 01:51:54)
-
.1822330561502400:b0e4abd099790dae55b1063341eab7f7_6a4285c029ae584249c934c0.6a4354b729ae584249c937d5.6a4354b745867f627a186eda:Trae CN.T(2026/6/30 13:31:35)
-
.1822330561502400:1a09866a7294cee04952e92bfd3e75f3_6a4285c029ae584249c934c0.6a43653029ae584249c93891.6a43653045867f627a186edc:Trae CN.T(2026/6/30 14:41:52)
-
.1822330561502400:23b39b1a4e0ceaae913f99d6d4dab00a_6a4285c029ae584249c934c0.6a4368d829ae584249c9394c.6a4368d845867f627a186edd:Trae CN.T(2026/6/30 14:57:28)
-
.1822330561502400:25c7e42d280cc25479477f2662a25662_6a4285c029ae584249c934c0.6a44027229ae584249c93d75.6a44027245867f627a186eec:Trae CN.T(2026/7/1 01:52:50)
-
.1822330561502400:17cbe51bed3fdd7475f553c3850c7c63_6a4285c029ae584249c934c0.6a44067429ae584249c93dac.6a44067345867f627a186eed:Trae CN.T(2026/7/1 02:09:56)
-
.1822330561502400:6b278b15f4466dbd1aceeff0a643fbbf_6a4285c029ae584249c934c0.6a447eaa29ae584249c93dfd.6a447ea945867f627a186ef0:Trae CN.T(2026/7/1 10:42:50)
5. 对应的报名审核通过的帖子链接