从零到一：用Trae轻松编写你的第一个浏览器插件

已于 2025-02-17 09:32:33 修改
阅读量1.3w 收藏 46
点赞数 51
分类专栏： 前端面试题 文章标签： 前端 trae
于 2025-02-17 09:32:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33681891/article/details/145674874
版权

我正在参加 Trae「超级体验官」创意实践征文， 本文所使用的 Trae 免费下载链接：https://www.trae.ai/?utm_source=juejin&utm_medium=juejin_trae&utm_campaign=techcall

文章目录

什么是 Trae

Trae 是一款集成 AI 的编程工具，提供智能问答、代码补全和自动编程功能，以提升开发效率。它拥有完整的 IDE 功能，包括代码编写和项目管理等。AI 助手能够提供实时代码建议、生成代码片段，甚至帮你从零开始开发项目，简化编程过程。

Trae 能力探寻

一款 AI IDE 的能力取决于多个方面， 以下是我对 Trae 使用过程中总结的六个维度

功能实用性

  • 功能丰富程度：涵盖代码补全、代码审查、错误检测、代码优化等常用功能。
  • 特点创新性：具有独特的功能亮点，如智能代码生成、个性化编程建议等。

用户体验

  • 界面设计：界面美观、简洁，操作便捷。
  • 交互体验：是否支持自然语言编程，用户与产品的交互是否流畅。
  • 学习成本：用户上手简单， 提供详细的帮助文档和教程，教程文档链接：https://docs.trae.ai/docs/builder?_lang=zh。

界面展示（类 vscode 界面）

在体验 AI IDE 产品时，对于开发者而言，流畅的交互体验至关重要，它直接影响到整个开发过程的舒适度和效率。

性能效率

  • 运行速度：代码补全、错误检测等功能的响应速度很快。
  • 资源占用：产品运行时对硬件资源的消耗情况较低，甚至是无感的。

如下图所示当项目出现问题时，会自我检测并进行修改，最终保证错误的解决

输入方面

在 Trae 中用 #符号 对文件进行引用　,从而更加准确的让Trae 知道需求所在的代码位置

输出方面

Prompt 输入之后 Trae 的交互体验尤其丝滑，从项目的创建到依赖的安装，以及代码层的实现，完全不需要我敲一行代码。

兼容性与集成

  • 兼容性：支持多种编程语言和开发环境， 详细可以参考下文中的 功能实用性 小节。
  • 集成度： 可以与其他开发工具（如 IDE、代码托管平台等）无缝集成。

如下图所示在安装Trae的过程在会有导入配置这一选项，已安装VS Code或Cursor的用户，可点击“从 VS Code 导入”或“从 Cursor 导入”按钮，一键导入插件、设置和快捷键至 Tra，实现 IDE 的快速切换。

准确性

  • 代码补全准确性：推荐代码的正确率和适用性。
  • 错误检测能力：能够准确识别代码中的潜在问题和风险。

社区与支持

  • 社区活跃度：截止到目前为止，长期在线人员有 901 人， 总人数 10536 人 。

  • 技术支持：遇见的问题可以及时在交流群内反馈，并得到有效解决

让我们一同深入本章节的核心议题，共同探讨国产 AI 驱动的 IDE——它的名字是Trae。

安装 Trae

访问 Trae 链接： https://www.trae.ai/?utm_source=juejin&utm_medium=juejin_trae&utm_campaign=techcall 进行 IDE 的下载

注意：在撰写本文时，Trae 尚未推出 Windows 版本。然而，通过以下截图我们可以预见，Windows 版本的 Trae 即将与用户见面，敬请大家拭目以待，满怀期待地迎接这一刻的到来。

登录 Trae

如下图所示是 Trae 默认的启动页面， 我们点击右侧的登录按钮 进行登录

注意：Trae 支持的地区如下图所示， 因此在注册过程中请选择科学上网哦！

登录成功如下图所示

Trae 界面

登录成功之后 Trae 界面如下图所示

探索 Trae 界面时，我们很快发现它与 VSCode 编辑器非常相似。这是因为 Trae 是基于 VSCode 二次开发而成，其底层架构由强大的 Agent workflow 提供支持。Trae 的一个显著优势是，在安装过程中，它允许用户直接导入 VSCode 插件，一键操作即可完成，极大地考虑了用户的使用习惯，体现了人性化的设计。

如图所示，左侧的侧边栏中展示的插件，正是我在 VSCode 中已经安装的。在 Trae 中，我无需重新配置这些插件，这一功能极大地节省了我的设置时间。

AI 能力

Trae 的 Ai 能力如下：

Trae 的 AI 能力为开发者提供了全方位的编程支持。Builder 模式智能读取和执行项目任务，而 Chat 模式则是一个多功能的编码助手，解答问题、生成代码等。内嵌对话保持编码连贯性，上下文感知功能确保 AI 助手提供精准帮助。多模态输入和 AI 代码补全提高编码效率，源代码管理功能则简化了版本控制。

功能实用性

Trae 是符合中文程序员的需求的，　整体界面显示都符合中文程序员操作习惯

编码需求 Trae 支持全栈开发，涵盖 JavaScript/TypeScript、HTML、CSS、Python、Java、Go、Rust、Swift、Kotlin 等语言，以及 React、Vue、Angular、Spring Boot、Django、Express 等框架，并提供智能提示和类型推导

用户体验

用 Trae 写一个浏览器插件

需求如下：

 我现在要做一个Google 的浏览器插件， 该浏览器插件的核心功能是一款贪吃蛇的游戏， 此外我不希望这款游戏中存在任何图片素材， 关于该游戏的具体开发思路我没有相关规划， 请你先帮我生成一份具体的规划，然后根据这个规划开始生成前端的相关代码，
 技术栈要求：vite/ts/vue3/支持 vue3 的 UI 框架等，我拥有相关的开发环境，需要你从创建项目到代码编写一步一步的实现功能

Trae 智能识别了我的需求，并自动启动工具进行分析。即便我跳过了某些指令，它仍能准确把握当前进度和我的意图。分析完成后，效果如下图所示。

项目完成之后又给了我关于该项目的介绍：

难度提升

基本的编码没有问题， 接下来我们开始上难度

  1. 美化UI界面
  现在的UI界面不够美观， 请帮我美化一下， 需要加上计时器以及关卡等功能

注意此时我完全不去操作代码部分， 只会安装 Trae 的指示执行，
如下图所示， 我点击的是全部接收 , 但是我的编辑器界面并没有在需要修改的文件上 ， 他依旧可以识别我的意图

修改后的效果如下：

  1. 发布
    项目完成了，接下来我开始将其发布到插件中
现在项目很完美，我想将其发布到Google 的插件中

如下图所示 在执行 build 的过程中报错了 ， Trae 依旧可以识别并给出相关操作

经过多轮尝试 打包成功 ，并告诉我接下来应该如和操作

使用总结

  1. 界面全面中文化
  • 操作提示与文件说明均采用中文，贴合中文开发者的使用习惯。
  1. 交互方式升级
  • Trae 提供直观的文件路径创建指南，明确每个文件的具体用途与功能。
  • 行数变更提示以"+xx"形式突出显示，一目了然。
  • 批量操作选项包含“全部拒绝”与“全部接受”，简化决策流程。
  1. 代码生成艺术
  • Trae 以任务描述为引领，展现完整的功能模块说明。
  • 重视业务逻辑的连贯性，确保生成的代码逻辑清晰。
  1. 用户引导与提示
  • 提供详尽的中文引导说明，确保用户每一步操作都有明确指导。
  • 每个文件都有清晰的功能描述，操作步骤直观易懂。

性能效率

体验 Trae 通过 Google 插件的全流程开发，显著提升了开发效率。从项目启动到竣工，整个过程仅耗时不到 15 分钟，相较于个人独立开发所需时间大幅缩短。同时，项目优化也得以根据个人意愿灵活实施。

总结

我极力推荐初学者使用 Trae 来启动他们的编程之旅，并开发出符合个人需求的项目。Trae 以其低门槛的特性，让编程变得轻松有趣。 对于开发者也提供了很大的助力。
尽管 Trae 作为一款新兴的 IDE 尚有改进空间，例如当前可能需要特定的网络环境才能访问，或是对某些特定语言环境（如 HarmonyOS）的支持尚不完善，但作为一款免费软件，它的表现已经非常卓越。展望未来，我们期待 Trae 能够继续保持免费政策，因为高质量且免费的工具总是能够带来极大的使用满足感。

附上原文链接地址：https://juejin.cn/post/7471659406524399654

字节跳动AI编程工具Trae深度研究报告：创新功能、应用场景与发展趋势
daqsdfas的博客
03-25 182
Trae 是字节跳动面向专业开发者推出的一款 AI 集成开发环境（IDE），它将 AI 技术与编程流程深度融合，旨在通过智能协作和先进的人工智能技术提升开发效率。Trae 尤其针对中文开发者的使用习惯和需求进行了深度优化，致力于解决中文开发者在使用国际主流编程工具时面临的语言和功能适配问题，为中文开发者提供了一个高效、智能的编程环境。Trae 作为一款具有创新性的 AI 原生集成开发环境工具，为开发者带来了诸多便利和优势。其原生中文支持极大地降低了中文开发者的使用门槛，使编程过程更加流畅和高效。
打工人必备！请查收「字节AI编程神器Trae的保姆级使用指南」
不能不吃肉不能不进步的博客
02-20 1万+
Trae是字节跳动推出的智能编程助手，像我们的"编程小老师"，无需懂复杂代码，用中文描述需求就能自动生成代码，可以几分钟搞定贪吃蛇、扫雷等小游戏，分析数据等重复性工作，尤其适合非技术岗的职场新人。请注意：敏感数据建议先脱敏再喂给AI！！需求提的越详细，结果也会越精准哦！欢迎大家一起切磋AI的具体使用场景～希望大家在这个AI横行的时代，不要惊慌不要焦虑（大不了打不过就加入），虽然有些人是乙方（比如我），但！我们可以做Trae做AI的甲方吖！我们都会在这个时代留下独特的印记，就像同一个指令会有不同的结局。
五分钟快速入门：使用 Trae 开发你的第一个VS Code插件
止于至善
03-12 876
最近改用 Trae 作为开发工具，想体验一下它的 Builder 功能，当然也有程序员，都是一群能过够自动化，绝不多写一行代码的人，因此就使用 Builder 功能开发一个 vscode 的插件。插件开发什么功能呢？Taro React 快速创建新页面，官方就有这个命令脚本，当然 vscode 的插件市场也是存在这个插件的，不过我们这里就以这个功能为基础开发一个我们自己的插件，必定主要是为了体验 Builder 功能，因此开整！！！
关于字节旗下 Trae 国内版代码编辑工具的详细使用教程
cuijiying的博客
03-04 9048
Trae 是一款专为开发者设计的现代化代码编辑器，具有轻量、高效和可扩展等特点。它支持多语言语法高亮、自动补全、内置终端、调试工具以及插件扩展功能，适合前端、后端甚至全栈开发。Trae 的界面简洁直观，新用户可以很快上手，而丰富的扩展功能也能满足专业开发者对个性化工作环境的需求。
Trae，字节跳动推出的 AI 编程助手插件
xiangzhihong8的专栏
04-19 1162
Trae 插件是 Trae 旗下全新一代的人工智能编程助手（前身为 MarsCode 编程助手），以插件形式集成在本地开发环境中，具备极高的兼容性和灵活性，旨在提升开发效率和代码质量。它支持超过100种编程语言，兼容主流的VSCode和JetBrains编辑器。
基于AI的智能开发环境—Trae在Web开发中的应用实战与性能评估【Trae项目实战】
热门推荐
一键难忘的博客
02-21 2万+
Trae 是一款与 AI 深度集成的开发工具，提供智能问答、代码自动补全和基于 Agent 的 AI 自动编程能力，极大提升开发效率。它具备完备的 IDE 功能，如代码编写、项目管理和源代码管理等，同时还具备强大的 AI 助手，能够提供智能问答、实时代码建议、代码片段生成等服务。开发者可以通过自然语言与 AI 协作，从 0 到 1 开发项目，AI 会根据需求自动生成代码或创建文件。
Trae使用教程，帮助您快速上手这款编程神器。
weixin_53587261的博客
03-24 1215
Trae是一款由字节跳动推出的AI驱动集成开发环境（IDE），旨在通过智能代码补全、多模态交互以及对整个代码库的上下文分析等功能，帮助开发者更高效地编写代码。其强大的AI能力能够理解开发者的需求并提供精准的代码生成和修改建议。目前，Trae提供免费版本，集成了Claude-3.5-Sonnet和GPT-4o等主流大模型。rae使用教程，帮助您快速上手这款编程神器。
Trae 项目使用教程
gitblog_00022的博客
05-25 1866
Trae 项目使用教程 trae :postbox: Minimalistic Fetch based HTTP client 项目地址: https://gitcode.com/gh_mirrors/tr/trae ...
小白喂饭级掌握Trae使用：从安装到你的app（含MCP的使用方法）
最新发布
水滴爬呀爬
04-27 1185
喂饭级，一步步实操，从trae的下载，安装到使用ai创建第一个应用，用builder创建你的应用，再到现在最新的MCP的使用方法，逐步，手把手的教会你使用。一文让你轻松入手AI开发，价值极高。
Trae，国产Cursor来了？Claude3.5 免费用？
Jay的个人博客
01-28 4551
备注：评论区回复“AI编程”，送超全 AI 编程资料。这次字节的更新，确实让人眼前一亮。Cursor、Windsurf、GitHub Copilot 已经占据了 AI IDE 的半壁江山。而 Trae 的出现，意味着国内也开始拥有一款能与之对标的工具，这对于国内开发者来说，不仅是一个选择，更是一种被倾听的信号。即使现在 Trae 还存在不少瑕疵，但我相信，未来这款产品会倾听国内开发者的声音，成为更有价值的 IDE。隐约之中，Trae 的出现，让我看到了 Coze 的过去。
控制台新玩法：输入指令，打印隐藏“私货”——用Trae急速实现！
weixin_46769087的博客
02-19 1634
Trae提供了一个Trae-Chat模式，它可以对我们的代码或编程问题进行提问。通过Trae-Chat，可以极大提升开发效率。在本文中，我们通过Trae实现了dist-info插件的开发。dist-info是一个兼容Webpack 5和Vite项目的前端插件，能够将Git信息或自定义内容注入到HTML文件中。使用该插件后，我们可以直接在浏览器控制台查看相关信息，提升开发和调试效率。
Trae 保姆级使用指南，零基础小白也能实现编程。
Mr.L-OAM的博客
04-16 965
Trae 使用指南 Trae AI 使用 零基础编程 满血版 DeepSeek-R1&V3 AI IDE 深度理解中文开发场景 傻瓜式编程 编程入门 开发入门
Trae使用学习指南
m0_64196863的博客
02-28 9499
与 AI 助手对话时，你可以指定 Trae 中的内容（包括代码、文件、文件夹、工作空间）作为上下文供 AI 助手阅读和理解，从而确保 AI 助手的答复更符合你的要求。系统将会从对应的 IDE 中获取插件、IDE 设置、快捷键设置等信息并一键导入到 Trae 中，帮助你快速从其他 IDE 切换到 Trae。后，终端将运行该命令。根据你的需求，AI 助手会自动创建新文件或编辑已有文件，并自动保存生成的代码。在内嵌对话输入框中输入你的需求，包括为代码添加注释、解释选中的代码、优化选中的代码等等，然后点击右侧的。
Trae 开源项目使用教程
gitblog_01122的博客
08-26 700
Trae 开源项目使用教程 trae:postbox: Minimalistic Fetch based HTTP client项目地址:https://gitcode.com/gh_mirrors/tr/trae 项目介绍 Trae 是一个高效、灵活的日志处理框架，旨在简化日志收集、处理和分析的过程。它支持多种日志格式，并提供了丰富的插件和扩展机制，使得用户可以根据自己的需求定制日志处理流程。...
Trae IDE 介绍与使用教程
ahualong1的博客
03-14 2152
Trae IDE是由字节跳动推出的国内首个原生AI集成开发环境，专为中文开发者深度定制，旨在通过智能化工具降低编程门槛，提升开发效率。作为对标国外Cursor的国产替代方案，Trae不仅继承了AI驱动的代码生成与补全功能，还通过免费策略、中文优化及多模态交互等特性，成为编程领域的革新者。
玩转大模型——Trae AI IDE国内版使用教程
e891377的专栏
03-04 6838
工作空间” 通常为一个在 Trae 中打开的文件夹。若你的项目较为复杂，也可以将多个文件夹添加至一个 “工作空间”。Trae Builder 模式可以帮你从零开始开发一个完整的项目。你可以轻松地把它融入到你的项目开发过程中。在 Builder 模式下，AI 助手会根据你的需求使用各种工具来回应。这些工具包括分析代码文件、编辑代码文件、运行命令等等，让回应更准确、更有效。
Trae AI IDE 全网最全的使用教程
子冉冰清的博客
03-02 2万+
近期，字节发布了一款 AI Coding 产品 ——其优雅的 UI、丝滑的交互、母语级的支持、更高的 AI 集成度、更‮然自‬的交‮式互‬对话开发、更‮‬精准的 AI 生‮效成‬果，都让你感到亲切和惊艳！它不再是一个工具，而是一个能 “思考” 和 “共创” 的协作者，帮助你更灵活的调用 AI 参与项目，实现更高效率、更好效果的开发体验。
TRAE 国内版的组件和使用教程
qq_31156563的博客
03-10 3628
Trae 国内版的两种工作模式分别是 Builder 模式和 Chat 模式，总的来说，Builder 模式更适合从头开始构建项目，具有更强的工程能力和自动化程度，而 Chat 模式则更侧重于解答问题和优化代码，适合在开发过程中进行即时的咨询和优化。trae 国内版对比海外版和cursor 功能上还是有一定的差距，比如Trae 国内版不支持上传图片生成代码的功能，支持的大模型相对较少等，但是我相信只是时间问题。TRAE#功能 ，#和我们聊天一样，具体指向某个对象，这里就是告诉AI具体的上下文信息来源。
国产AI代码编辑器TRAE使用详解！对标Cursor
技术Z先生的博客
02-20 2万+
不过，就在本月，字节推出了国产最强AI编码工具：TRAE，直接对标的Cursor，博主也试用了一段时间，编码效果已经快接近Cursor了，最主要的是：**它支持免费不限量使用gpt-4o和claude-3.5-sonnet，**这款产品从制作来看，还是略显仓促，很多功能都没有完全对标 Cursor 进行开发，不过字节的研发实力还是很强的，可以期待他们后续版本的更新。从扣费情况可以看出，每月都会超出它的额度，算下来每月花费需要30美元左右，对于使用AI依赖不多的老铁们来说也是笔不小费用！
trae插件
03-10
<think>好的，我现在需要帮助用户查找关于Traefik插件的使用说明、配置和示例。首先，用户提到他们想了解与Traefik插件相关的信息，特别是使用说明、配置和示例。根据用户提供的引用内容，我需要整理这些信息，并按照用户的要求进行结构化回答。 首先，我要回顾用户提供的引用内容。引用[1]提到了在静态配置文件中添加插件的配置示例，引用[3]和[5]介绍了GitHub上的示例插件demo，说明插件是通过Yaegi动态执行的，并提到了开发指南。引用[4]提到了使用Helm chart部署Traefik，这可能与插件的安装有关。引用[2]可能是一个Terraform的示例，但具体内容不明确，暂时可能用不上。 接下来，我需要确定用户的需求：他们需要知道如何配置和使用Traefik插件，包括具体的步骤和示例。根据引用内容，可以分步骤说明配置方法，比如静态配置文件中的设置，以及插件的开发或使用现有插件的步骤。可能还需要提到动态加载和注意事项，如实验性功能、版本兼容性等。 需要确保回答符合用户的要求，结构清晰，分步骤说明。同时，要引用提供的引用内容，正确标注引用标识。例如，引用[1]中的配置示例，引用[3]关于GitHub仓库的信息，引用[4]提到的Helm安装方法，以及引用[5]的项目介绍部分。 另外，用户可能对插件的实际应用场景和如何开发自己的插件感兴趣，所以可能需要包含这些信息。还要生成相关问题，如如何开发自定义插件、动态加载机制、性能影响等。 需要注意的是，用户提供的引用中有部分内容可能不直接相关，比如引用[2]的Terraform示例，但如果没有更相关的信息，可以暂时忽略。确保回答中的引用准确对应到相关的部分。 总结回答结构： 1. 插件配置步骤，包括静态配置文件示例和Helm安装。 2. 使用现有插件的步骤，比如demo插件的安装。 3. 开发自定义插件的基本流程。 4. 注意事项，如实验性功能、版本要求等。 5. 相关问题部分，生成相关问题。 现在需要将这些信息整合成自然的中文回答，正确引用来源，并确保LaTeX格式符合要求，虽然用户的问题可能不涉及数学公式，但如果有变量或代码，需要使用正确的格式。例如，配置示例中的代码块需要用反引号包裹，并注明语言类型。 检查是否有遗漏的信息，比如引用[3]提到的Yaegi解释器，可能需要解释动态加载机制。同时，引用[5]提到插件是扩展Traefik功能的强大工具，可以用于流量管理，这部分可以在应用场景中提及。 最后，生成的相关问题需要与Traefik插件的使用、开发、配置相关，确保问题有针对性，能够引导用户进一步探索。</think>### Traefik 插件使用说明与配置示例 #### 1. 插件配置基础步骤 Traefik 插件通过静态配置文件或动态加载实现。以下为静态配置示例（需在 Traefik 的 YAML 配置文件中添加）： ```yaml experimental: localPlugins: example: moduleName: github.com/traefik/plugindemo # 插件模块路径[^1] ``` 此配置声明了一个名为 `example` 的本地插件，指向 GitHub 上的示例仓库[^3]。 若使用 Helm 安装 Traefik，需在 `values.yaml` 中启用插件支持： ```yaml experimental: plugins: enabled: true # 启用插件功能[^4] ``` #### 2. 使用现有插件（以 demo 插件为例） 1. **安装插件** 通过修改 Traefik 部署配置，将插件代码编译到 Traefik 二进制文件中，或通过动态加载（需 Yaegi 支持）。 2. **配置路由规则** 在 `IngressRoute` 中引用插件： ```yaml apiVersion: traefik.io/v1alpha1 kind: Middleware metadata: name: demo-plugin spec: plugin: example: # 插件名称 headerName: "X-Custom-Header" headerValue: "Hello from Plugin" ``` #### 3. 开发自定义插件 1. **代码结构** 遵循 Traefik 插件接口规范，实现 `New` 初始化方法和 `Handle` 请求处理逻辑[^3]。 2. **动态加载** 利用 Yaegi 解释器实时加载插件（无需重启 Traefik）： ```go // 示例插件逻辑 func New(ctx context.Context, config *Configuration) (http.Handler, error) { return &demoPlugin{config}, nil } ``` #### 4. 注意事项 - **实验性功能**：插件功能标记为实验性，需在配置中显式启用[^4]。 - **版本兼容性**：确认 Traefik 版本支持插件（建议 v2.3+）[^4]。 - **安全限制**：动态加载插件需注意代码安全性，建议审核第三方插件[^5]。 --- ###
评论 28
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

全栈若城

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值