使用TRAE2 SOLO模式0经验开发一款浏览器插件

#TRAE2.0SOLO出道

看到TRAE2 SOLO让我眼前一亮，只需要一句提示词就可以开发一个应用，强大的能力让我震撼，得到邀请码后我第一时间进行了测试，目前的结果我相当满意!

首先介绍一下我的背景，我是一名后端工程师，对于前端和浏览器的开发知识相对匮乏，对于插件开发，毫无头绪，索性我就直接是用SOLO模式开发了，现在我讲记录一下我开发的过程。

我要开发的是一个有真实需求的浏览器收藏插件，目前浏览器的收藏功能很简单，当我想收藏网址时，我需要选择对应的文件夹，默认的浏览器收藏功能是没有搜索功能的，我需要凭着我的记忆去寻找对应的文件夹，当文件夹很多的时候就存在很多问题，这就是我开发这个项目的初衷。

这是默认的浏览器收藏夹功能：

这是我是用SOLO模式开发的浏览器插件：

整个项目用时不到半小时，我从0完整的开发了一个插件！！！

BookmarkManager 浏览器收藏扩展开发记录

项目概述

BookmarkManager是一个基于Chrome Manifest V3的浏览器扩展，旨在提供高效的书签管理功能。项目采用Vue.js 3框架，使用渲染函数实现响应式界面，完全符合现代浏览器扩展的安全要求。

开发历程

开发环境搭建

打开TRAE SOLO模式后需要建立一个文件夹，然后在@SOLO Builder聊天窗口输入你的需求即可，我没有在输入窗口直接用白话文沟通，我使用了普通模式下多轮对话方式确认了我的项目需求内容，至于为什么这么做，我想的是一旦我直接在SOLO模式下沟通，会直接进行项目构建，多轮对话下上下文爆炸会影响我的项目构建。

所以在这里我可以直接复制我普通模式下确认无误的开发内容，SOLO根据我提交的内容很快构建了项目构建

项目规划与文档设计

产品需求文档：制定了完整的产品功能规划，包括书签展示、一键收藏、文件夹搜索等核心功能
技术架构文档：确定了技术栈（Vue.js 3 + Chrome Extension APIs），设计了项目结构和API接口
项目初始化：创建了基础的项目文件结构，包括manifest.json、popup.html等核心文件

在这里其实项目已经开发结束了。对就是这么快。整个过程我只需要确认!!!确认!!!

但是这里SOLO已经自动完成了很多工作，包括命令行进行文件下载，文件夹创建，ICON自动生成，体现了SOLO强悍的外部调用能力和集成能力，

细节！！！

由于我编写的是浏览器插件，无法使用终端环境下的浏览器测试。SOLO自动生成了模拟测试文件，仅仅是在我多次提出问题后而已！！！

技术亮点

1. Manifest V3合规性

完全符合Chrome扩展的最新安全标准
使用Service Worker替代Background Pages
避免使用eval和unsafe-eval，确保代码安全

2. Vue.js Runtime架构

采用Vue 3的仅运行时版本，避免模板编译
使用h()渲染函数实现复杂的组件逻辑
保持Vue的响应式特性和组件化优势

3. 用户体验设计

文件夹树的展开/收起交互
实时搜索和路径显示
现代化的视觉设计和交互反馈

4. Chrome API集成

Bookmarks API：书签的读取、创建和管理
Tabs API：获取当前页面信息
Notifications API：书签操作的用户提醒

项目结构

bash 复制代码

BookmarkManager/
├── manifest.json          # 扩展配置文件
├── popup.html             # 弹窗页面
├── css/popup.css          # 样式文件
├── js/
│   ├── popup.js           # 主要逻辑（Vue应用）
│   ├── background.js      # 后台服务
│   └── vue.runtime.global.js # Vue运行时
├── icons/                 # 扩展图标
└── README.md             # 项目说明

核心功能

书签树展示：层级化显示用户的书签结构
一键收藏：快速将当前页面添加到书签
文件夹搜索：搜索并选择特定的书签文件夹
路径显示：完整显示文件夹的层级路径
展开控制：文件夹的展开和收起管理

开发挑战与解决方案

挑战1：Manifest V3的CSP限制

问题：Vue.js的模板编译需要eval函数，但Manifest V3完全禁止unsafe-eval 解决：采用Vue Runtime-only版本，使用渲染函数替代模板编译

挑战2：复杂的书签树渲染

问题：需要递归渲染嵌套的书签结构，同时支持展开/收起解决：使用Vue组件的递归渲染和状态管理

挑战3：搜索结果的路径显示

问题：重名文件夹难以区分，需要显示完整路径解决：构建路径信息，在搜索结果中展示完整的层级结构

项目成果

BookmarkManager扩展成功实现了所有预期功能，提供了现代化的书签管理体验。项目完全符合Chrome Manifest V3的安全要求，代码结构清晰，用户界面友好，为用户提供了高效的书签管理工具。

通过这个项目，让我看到了SOLO强大的上下文理解能力，特别是在多次提出问题后自动生成测试页面，这是有点让我震惊的！难道AI真的有了自我意识么？？？