用Trae做一个浏览器插件

前言

在上一篇 Trae 初体验，尝试做一个视频转动图的小工具中，我们尝试用 Trae 做一个可以将 mp4 按照指定要求转换为 gif 的小工具。 ，用 Trae 两个月之前的版本（0.6.10）体验过后发现效果不是很理想，整个流程下来错误比较多，还是需要手动解决一些问题。

现在，两个月过去了，决定再次使用 Trae 实现一个浏览器插件，功能非常简单,就是实现一键返回页面顶部。

像掘金、知乎、36氪等这类网站都提供了这个功能，但是日常使用的一些站点还是没有这个功能，比如 DeepSeek、元宝、豆包等这些大模型工具都没有提供这个功能，有时候聊天信息很长想要查看初始回复的时候，得疯狂的转动鼠标滚轮。因此为了方便决心用 Trae 手动搞一个（其实就是想顺便试试 Trae 有没有进步）

一键返回顶部插件实现

使用当前 Trae 最新版本 2.1.2 ，全程使用 auto 模式，由 Trae 自行决定使用哪个模型

插件实现

选定文件夹之后，直接给 Trae 描述需求

请帮我写一个适配于 Chrome/Edge 等浏览器的插件，在页面中添加一个按钮，点击按钮可以一键回到页面顶部

经过一番分析和思考账户，Trae 很快给出了清晰且完整的实现，插件的实现、配置，如何安装插件等等功能都描述的很详细，甚至还专门提供一个 README.MD 描述整个代码的架构（虽然很简单，但是显得很有条理）

markdown 复制代码

## 安装方法
1. 下载或克隆本仓库到本地
2. 打开浏览器的扩展管理页面
   - Chrome: `chrome://extensions/`
   - Edge: `edge://extensions/`
3. 开启"开发者模式"
4. 点击"加载已解压的扩展程序"
5. 选择本插件所在的文件夹

## 使用说明
1. 安装完成后，访问任意网页
2. 向下滚动页面超过300px，右下角会出现一个绿色的回到顶部按钮
3. 点击按钮，页面会平滑滚动到顶部
4. 按钮会根据页面滚动位置自动显示/隐藏

## 开发指南
### 项目结构

go-top-plugin/
├── manifest.json  # 插件配置文件
├── content.js     # 核心功能脚本
├── style.css      # 按钮样式
├── icon.svg       # 图标源文件
├── generate_icons.py  # 生成不同尺寸图标的脚本
└── README.md      # 说明文档


### 生成图标

如果你修改了`icon.svg`文件，需要重新生成不同尺寸的PNG图标：
1. 确保已安装Python和cairosvg库
   
   pip install cairosvg
   
2. 运行生成脚本
   
   python generate_icons.py

修改图标

这里不想通过 python 生成图标太麻烦了，于是让 Trae 直接提供可用的图标。

这个看起来很简单的过程，却出人意料的耗费了非常多的时间。

💥 生成上面两个 png 的小图标，居然用了差不多 10 分钟的时间，实在是令人大跌眼镜。而且思考过程中提示要生成 16,48,128 三种大小的 icon ,实际只生成了前两种。

在思考过程中，Trae 尝试了很多思路，都是想用各种奇技淫巧直接生成图标。什么 base64/svg 导出，甚至还想调用 mcp_server 之类的。但是，正常思路不应该是直接从开源库中直接获取一个吗？碳基程序员，想用图片或者 icon 的时候，不也是从网上找免费可用的资源吗，怎么硅基程序员偏要自己生成呢？

最终经过这个小波折，插件功能开发完成，在浏览器扩展模式选择插件文件夹之后，再次刷新页面，可以看到插件已经生效了，并且点击后可以丝滑的滚动到顶部，不像默认实现那么的突兀。

可以看到在掘金上面已经生效了，但是实测发现还存在以下问题

在上面提到的 DeepSeek、元宝、豆包这些页面依然没有生效
动态添加的按钮会被页面其他元素遮挡，没有在最顶层。

BugFix

直接把上面两个问题抛给 Trae ，看看他能不能解决

为了帮助 Trae 解决问题，我甚至还给他提供了豆包聊天页面的地址，并描述了问题。经过一番修改之后再次尝试，被遮挡的问题已解决，但是在聊天页面滚动时未生效的问题依然存在。

到这里感觉明显是一个兼容性问题，可以简单看一下实现这个功能的核心代码

javascript 复制代码

  const handleScroll = () => {
    const scrollPosition = window.pageYOffset；
    console.log("--------- 滚动位置:", scrollPosition);

    if (scrollPosition > 300) {
      button.style.display = 'flex';
      setTimeout(() => {
        button.style.opacity = '0.9';
      }, 10);
    } else {
      button.style.opacity = '0';
      setTimeout(() => {
        button.style.display = 'none';
      }, 300);
    }
  };

就是通过监听窗口的滚动位置，实现按钮的隐藏和现实。本着再试一次的态度，再次尝试让 Trae 解决问题

重新加载插件后再次尝试，在掘金首页功能正常,控制台可以看到如下日志

shell 复制代码

--------- 滚动位置: 100
content.js:75 --------- 滚动位置: 200
content.js:75 --------- 滚动位置: 300
content.js:75 --------- 滚动位置: 400
content.js:75 --------- 滚动位置: 500
content.js:75 --------- 滚动位置: 700

而在 DeepSeek 聊天页面，滚动位置始终是 0 ，按钮自然也无法在滚动时显示出来。

此时此刻，如果我是一个非常资深的前端开发，通过在浏览器手动查看页面结构可能会发现一些蛛丝马迹甚至是问题的根源，给 Trae 提出一些有价值的建议，让他尝试解决，但是我不是，我不知道该问一个什么样的问题才可以快速解决这个问题，只能去阅读源码。

好在最终通过 ChatGTP、DeepSeek 的帮助，找到解决问题的思路，基本上解决了问题。需要动态查找页面中的滚动容器，用多种滚动检测方法作为备选方案，监听页面有滚动事件发生，并基于滚动距离确定是否显示返回顶部按钮。

页面可配置

通过以上实现，返回顶部按钮会在所有页面显示。实际使用时，对于已经有这个功能的页面我们希望不再展示，因此需要添加黑名单机制，在某些站点对这个插件进行屏蔽。

后续流程可以说是一言难尽，经过长时间的修改之后，直接把整个功能搞挂了（好在我提前添加了 git 版本控制，在可用的时候做了 commit ）。经过中间来回多次的提示之后，最终生成的结果是读取一个本地的 json 配置文件，可以配置黑名单。

markdown 复制代码

## 配置
插件的配置文件位于`blacklist_config.json`，您可以修改以下参数：


{
  "blacklist": [
    "example.com",
    "test.com",
    "localhost"
  ],
  "scrollThreshold": 300
}


- `blacklist`: 黑名单域名列表，插件在这些域名下不会显示按钮
- `scrollThreshold`: 滚动阈值，当页面滚动超过此值时显示按钮

## 自定义黑名单
1. 打开`blacklist_config.json`文件
2. 在`blacklist`数组中添加或删除域名
3. 保存文件
4. 重新加载插件

功能算是实现了，但是这样实在太不友好了。需要一个可以直接进行配置的 UI，而不是动态的修改 json 文件。

到这里，算上最初的 content.js 到后面管理黑名单、动态处理黑名单、json 配置等文件，源码已经很多了，Trae 的返回变得越来越慢了（应该是上下文太大的原因），效率也变得很低了，我甚至想让 Trae 只生成大致框架代码，想去自己完善细节了。

万万没想到的是这一步耗费了巨大的时间和精力。通过各种提示，甚至给 Trae 提供屏幕截图，他始终无法解决一个 UI 兼容性的问题。

无论怎么改，始终无法解决这个配置黑名单的页面宽度只有这么窄的问题。

到此，使用 Trae 来完全实现这个插件的想法感觉已经不切实际了。需要我自己去深入到细节中，自己想办法搞定了。

小结

虽然借助 AI 辅助编程不能代替真实的程序员解决所有问题，但是通过这样一个过程，你可以理解到某些功能点的难点和要点，同时在借助 AI 帮助你实现功能的过程中，对于产品最终的形态又会有不同的思考和想法，总之要试着拥抱 AI，掌握 AI。

一个经验是，使用 AI Coding 时应该想清楚产品最终的模样，尽量一次性通过详细而精确的文字将需求描述清楚。基于一个模棱两可的想法去不断修改，借助 AI 不断完善功能，似乎并不是一个很好的选择。