Trae的实战体验——小白三步也能快速开发一个浏览器插件背景介绍：我自己是一个产品经理、K12内容运营，在日常的工作中搭

我正在参加Trae「超级体验官」创意实践征文，本文所使用的 Trae 免费下载链接： www.trae.ai/?utm_source…

背景介绍：我自己是一个产品经理、K12内容运营，在日常的工作中搭建素材库和收集素材，一直以来都没有很好的解决方案，素材库的搭建包含几个方面：原素材视频、视频文案、视频数据三个方面，这个插件的启发来自于社群的一枚口子的小红书数据收集，我是不是也可以尝试用 Trae 字节复刻一个，因为是小白没有编程基础所以我花了2天的时间思考（和 AI 一起思考）

waytoagi.feishu.cn/record/Xm0s…

开源文件，大家喜欢也可以给我投一票

Thinking。。。

我的解决问题都是跟AI对话，去询问我的解决方案，因为Trae里面的3.7实在是用的人太多了，我只看到了他的思考就感觉这个是我要的答案，所以我继续和3.7对话，这里是放了一小部分对话内容

项目开展——在学中练贯彻落实

第一步，写一个清晰的项目需求

这里需要注意什么？就是不能一股脑的把你所有的需求全部丢给AI，因为我相信大部分人在开发之前并没有非常清晰的整理需求和呈现，所以我们需要做的就是先实现一个MVP，然后再把我们的天马行空的想法去实现

创建一个抖音插件
他的作用是获取抖音博主页下所有的视频链接，需要滑倒最低下
然后导出成文本格式
增加输入框，代表点赞数大于某个值
入输入填入的内容，那么你在获取视频的时候，只能获取点赞数大于这个数值的视频
并且需要优化样式
获取的链接点击写入飞书多维表格
飞书配置
app id：你的id
App Secret：你的密钥
多维表格url：你的多为表格链接
**字段配置**
   - 字段名称：链接
   - 字段类型：超链接
   - 数据格式：URL格式
新增：增加设置接口，方便后期填写各更改飞书相关令牌
优化关于点赞数提取的逻辑：目前超过万以上的内容视频无法提取

以下是抖音的网页源代码：
<div><a href="/video/7474487002977586447" class="uz1VJwFY TyuBARdT IdxE71f8" target="_blank" rel="noopener noreferrer"><div class="XNarezzx"><div class="RYJmZORF"><div class="oyfanDG1 CEHfUK3A"><img src="https://p3-pc-sign.douyinpic.com/tos-cn-i-dy/0670f904654045b2b774b8f88bc5d9e4~tplv-dy-cropcenter:323:430.jpeg?biz_tag=pcweb_cover&amp;from=327834062&amp;lk3s=138a59ce&amp;s=PackSourceEnum_PUBLISH&amp;sc=cover&amp;se=true&amp;sh=323_430&amp;x-expires=2056006800&amp;x-signature=Zjts%2BkZxiFjCb%2FDOH1VsyP9JeMk%3D" alt="AIGCLINK：MCP协议开启AI员工互联网时代：Agent互联网新纪元 MCP协议开启AI员工互联网时代：1、Agent互联网新纪元开启web4.0时代；2、互联网 vs Agent互联网变迁；3、Agent互联网时代来临；4、用户实操通过agent浏览器使用AI员工；5、agent浏览器和AI员工未来预测#ai员工  #mcp协议  #agent互联网  #智能体互联网  #agent浏览器" class=""></div></div><div class="PFvtjNEb"></div><span class="uWre3Wbh author-card-user-video-like"><span role="img" class="semi-icon semi-icon-default" style="font-size: 20px;"><svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" focusable="false"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.9518 2.33333C4.0536 2.33333 1.72754 4.81748 1.72754 7.70944C1.72754 7.78107 1.72881 7.8385 1.72981 7.87813C1.72779 7.90919 1.72711 7.94044 1.7278 7.97181C1.7363 8.3596 1.8249 8.82726 1.92285 9.21776C2.01852 9.59918 2.15248 10.0237 2.30308 10.3303C2.90744 11.6314 3.96614 12.8938 4.98521 13.9311C6.32779 15.3093 7.74944 16.4495 8.41035 16.9384L8.43075 16.9548L8.44558 16.967C8.67133 17.1934 9.14897 17.6667 9.99978 17.6667L10.0162 17.6666L10.0247 17.6666C10.2656 17.6665 10.841 17.6663 11.3558 17.1652C11.3645 17.1577 11.3779 17.1463 11.3976 17.1298C11.4413 17.0932 11.5011 17.0439 11.5798 16.979L11.5838 16.9757C12.1484 16.5103 13.4691 15.4216 14.7714 14.108C15.6051 13.2721 16.4698 12.3011 17.1304 11.2988C17.2203 11.1627 17.3068 11.0255 17.389 10.8876C17.4212 10.8334 17.4487 10.7765 17.471 10.7176C17.5 10.6409 17.5141 10.6103 17.5255 10.5878C17.5381 10.5631 17.559 10.5259 17.613 10.442C17.6511 10.3828 17.6834 10.32 17.7093 10.2545C17.7462 10.161 17.7731 10.0981 17.794 10.0556L17.7985 10.0465C17.8856 9.93556 17.9502 9.80842 17.9884 9.67224C18.1502 9.09636 18.2614 8.58994 18.2723 7.96692C18.2728 7.93813 18.2722 7.90939 18.2704 7.88075C18.2712 7.84206 18.2725 7.78406 18.2725 7.70934C18.2725 7.6975 18.2723 7.68569 18.2719 7.67392C18.2529 4.79823 15.933 2.33333 13.0478 2.33333C11.9534 2.33333 10.8888 2.67214 10.0489 3.35444C9.13994 2.69677 8.09206 2.33333 6.9518 2.33333ZM16.114 7.7103C16.114 7.71976 16.1141 7.7292 16.1144 7.73861C16.1141 7.77819 16.1134 7.81005 16.1127 7.83886L16.1126 7.8439C16.1122 7.86294 16.1113 7.90117 16.1117 7.93542C16.1118 7.9456 16.1121 7.96282 16.1132 7.98471C16.1035 8.27801 16.057 8.54296 15.9572 8.9192C15.9149 8.98942 15.8817 9.05392 15.8566 9.10493C15.814 9.19182 15.7752 9.28154 15.7412 9.36442C15.6335 9.53849 15.5636 9.67525 15.4904 9.8569C15.4397 9.93986 15.3862 10.0239 15.33 10.1089L15.3292 10.1102C14.7801 10.9435 14.026 11.7995 13.2423 12.5852L13.24 12.5875C12.0168 13.8214 10.7654 14.8536 10.2071 15.3139L10.1655 15.3481C10.1155 15.3892 10.0605 15.4344 10.009 15.4779L9.94778 15.4172C9.88393 15.3533 9.79445 15.2819 9.75167 15.2477L9.74349 15.2412C9.73235 15.2323 9.72103 15.2236 9.70955 15.2151C9.12746 14.7861 7.7849 13.7127 6.52954 12.4237L6.52618 12.4203C5.55807 11.4351 4.70248 10.3785 4.25583 9.41165C4.25117 9.40157 4.24636 9.39155 4.24139 9.38162C4.19154 9.28192 4.09963 9.02601 4.01603 8.69273C3.9418 8.39678 3.89845 8.13635 3.88774 7.97689C3.88844 7.96045 3.88862 7.94816 3.88873 7.94145C3.8893 7.90387 3.88816 7.86168 3.88765 7.84308L3.88752 7.83821C3.88658 7.80185 3.88556 7.76184 3.88556 7.70944C3.88556 5.93149 5.32182 4.49135 6.9518 4.49135C7.80884 4.49135 8.61891 4.83984 9.34453 5.59322C9.5681 5.82535 9.88373 5.94539 10.2051 5.92049C10.5264 5.89559 10.8198 5.72836 11.0049 5.46456C11.4327 4.85501 12.1594 4.49135 13.0478 4.49135C14.6767 4.49135 16.114 5.93271 16.114 7.70958V7.7103Z" fill="currentColor"></path></svg></span><span class="BgCg_ebQ">126</span></span><p class="EtttsrEw">MCP协议开启AI员工互联网时代：Agent互联网新纪元 MCP协议开启AI员工互联网时代：1、Agent互联网新纪元开启web4.0时代；2、互联网 vs Agent互联网变迁；3、Agent互联网时代来临；4、用户实操通过agent浏览器使用AI员工；5、agent浏览器和AI员工未来预测#ai员工  #mcp协议  #agent互联网  #智能体互联网  #agent浏览器</p></div><p class="eJFBAbdI H4IE9Xgd">MCP协议开启AI员工互联网时代：Agent互联网新纪元 MCP协议开启AI员工互联网时代：1、Agent互联网新纪元开启web4.0时代；2、互联网 vs Agent互联网变迁；3、Agent互联网时代来临；4、用户实操通过agent浏览器使用AI员工；5、agent浏览器和AI员工未来预测#ai员工  #mcp协议  #agent互联网  #智能体互联网  #agent浏览器</p></a><div class="aWtPFSDl"></div></div·

需求的整理思路：

1、先描述清楚你要做什么东西，要实现什么功能，记住（小白的先实现最小mvp）

2、把一些api的调用和密钥的配置内容写清楚

写入飞书表格的方式：需要通过机器人做中介数据传输的媒介，因为多维表格是没有办法直接外部写入的（就是多维表格没有开对外权限，因为要保证数据安全

机器人的调用需要获取他的密钥和id，这个内容黄叔的指标分享里面是详细的说的

步骤：（后面有详细的步骤）

打开开发者平台

创建应用

权限设置（搜索多维表格，把读写的权限全部打开就行）这一步是重点

然后发布

然后在多维表格的侧面，添加应用

第二步，找一个prompt

AI的思维太发散了，需要做一些约束，类似我们约法三章，要求他按我们的规则做事情

这个可以自己写，

也可以直接让AI写（写一个可以自己帮你写prompt的智能体）

也可以直接抄

#Role
你是一名精通Chrome浏览器扩展开发的高级工程师，拥有20年的浏览器扩展开发经验。你的任务是帮助用户设计和开发易于使用的Chrome扩展。你的工作对用户来说非常重要，完成后将获得相应的奖励。
#Goal
你的目标是以用户容易理解的方式帮助他们完成Chrome扩展的设计和开发工作。你应该主动完成所有工作，而不是等待用户多次推动你。
在理解用户需求、编写代码和解决问题时，你应始终邀循以下原则:
## 第一步:项目初始化
当用户提出任何需求时，首先浏览项目根目录下的 README.md 文件和所有代码文档，理解项目目标、架构和实现方式。
如果还没有README.md 文件，创建一个。这个文件将作为项目功能的说明书和你对项目内容的规划。
-在README.md中清晰描述所有功能的用途、使用方法、参数说明和返回值说明，确保用户可以轻松理解扩展的设计和使用方法。
## 第二步:需求分析和开发
### 理解用户需求时:
充分理解用户需求，站在用户角度思考，
作为产品经理，分析需求是否存在缺漏，与用户讨论并完善需求。选择最简单的解决方案来满足用户需求
###编写代码时:
必须使用ManifestV3，不使用已过时的V2版本。
.优先使用Service Workers而不是Background Pages。
使用Content scripts时要遵循最小权限原则。
遵循Chrome的安全性要求(如CSP、权限限制等)，确保扩展安全可靠。
确保代码结构清晰，易于维护和扩展。
每个功能模块都要添加详细的中文注释。
确保代码符合Chrome扩展开发的最佳实践和安全标准。
-优化扩展的性能，减少对浏览器资源的占用。
### 解决问题时:
全面阅读相关代码和文档，理解页面结构和样式。
分析显示异常的原因，提出解决问题的思路。
与用户进行多次交互，根据反馈调整页面设计。
##第三步:项目总结和优化
完成任务后，反思完成步骤，思考项目可能存在的问题和改进方式。
更新 README.md 文件，包括页面结构说明和优化建议。
考虑使用高级特性，如WebAssembly、OAuth2集成等，增强扩展功能。
优化扩展性能，包括减少资源消耗和提高响应速度。
测试扩展在不同版本的 Chrome 浏览器中的兼容性。
在整个过程中，始终参考[Chrome扩展开发者文档]，确保使用最新的Chrome扩展开发最佳实践。