插件背景及项目描述

公司最近在进行蓝绿部署（旧版本可称为蓝色环境，而新版本则可称为绿色环境）的相关工作 💻，旨在提升系统的稳定性，降低线上故障大面积影响客户。

蓝绿环境的本质，是通过动态配置☁️ 实现指定相关公司的客户访问绿环境，但此要求用户对用户暴露的信息是一样的，所以前后端域名上要保持一致，通过网关规则判断进入不同容器来实现蓝绿环境。

而要想让网关能区分前端资源应该路由到哪个环境，我们要在 Cookie 中存储公司 ID 信息，这样网关可以根据资源的请求头中的信息进行判断。但由于系统允许同一浏览器登录多个账号，所以登录不同环境的公司账号会覆盖 Cookie 中的信息（测试人员经常会登录不同账号验证功能），可能导致可能进错环境，最终导致测试环境不准确但并没发现。

其实响应头中返回了环境信息，但是测试时不可能每个请求都去关注一下响应头信息，所以想能快速知道环境信息，但又不想此功能影响项目代码，那是不是可以开发一个浏览器插件，用于监听所有请求响应头后进行提示，于是 AB-Plugin 应运而生 🐣🐣

使用 Trae AI 的原因

Trae 由字节开源的免费 AI 编程 IDE，提供了智能问答、实时代码建议、代码片断生成、从 0 到 1 开发项目。

由于 Chrome 插件的开发规范现在已经到了第三个版本，相比于之前发生了不少的调整，借助 AI IDE 能减少不少查阅文档的时间。但使用它开发的主要原因是因为免费，同时想验证下其能力如何。

使用 Trae 实现 AB-Plugin 插件

1、开发前准确

Trae 支持 Mac 和 Windows 版本，根据官方的下载地址安装软件。安装 Trae 时的相关设置不在此处介绍。若之前使用 Vscode, Cursor 可以同步相关的配置，减少一些配置信息。

2、插件功能

根据要实现的结果，大致实现的功能如下：

（1. 监听当前浏览器页签中所有请求的响应头

（2. 将获取到的信息提示给用户

3、使用 Trae-Builder 快速搭建

创建 AB-Plugin 文件夹，使用 Trae 打开此文件夹。Trae 提供了 Trae-Builder 模式，能轻松完成从零到一的项目构建。在 Builder 模式下，对代码文件的任何更改都会自动保存。

借助 Trae-Builder 模式，我们可以快速搭建 Chrome 插件所需项目结构，给出相应的提示即可：

我想开发一个名为 AB-Plugin 的 Chrome 插件，用于监听当前页签所有请求的响应头，若根据响应头中的 evnLabel 值为 B, 则在页面中提示用户当前为 B 环境，麻烦帮我生成相关文件及权限配置。

Trae-Builder 会根据提示，自动帮我们创建项目文件。当 Trae-Builder 运行完成后，项目文件就都被创建出来了，这时我们只需要审查相关文件，保留或者调整代码即可。

如下图， Trae-Builder 生成的代码基本满足了我的需求，先点击全部接受后。这时我们借助 Trae-Builder 快速创建一个了 Chrome 插件所需要的基本文件。

通过审查后发现代码生成为监听了所有页签的请求，这时我们再次进行提示：

希望只监听当前激活页签，需要调整一下

代码进行一次调整，共两个文件发生变更，其中 manifest.json 中添加了 tabs 权限。backgrouns.js 中添加了当前页签的相关逻辑。至此， Trae-Builder 已经实现了检测环境的功能。

4、验证基本功能

（1. 打开浏览器管理扩展程序功能 > 加载已解压的扩展程序 > 选中当前文件夹

（2. 使用不同环境账号登录系统，查看提示是否正确。

——A 环境账号没有提示

——B 环境账号有提示

我们发现：功能正常✌️

以为到这就结束了？噢no 天真了😜😜😜～

前面提到，同一个浏览器可以通过多个账号，但是同一个域名下相同名称的 Cookie 信息只有一个，所以当一个浏览器登录了一个 A 环境和一个 B 环境两个账号时，则会出现异常。异常分为两种：

（1. 先登录 B 再登录 A 后，则会导致 B 环境账号的前端项目路由到 A 环境。这时 B 账号还是会提示 为B环境，但是前端资源已经是 A 了，前后端不一致。

（2. 先登录 A 环境再登录 B 后，则会导致 A 环境账号的前端项目路由到 B 环境，这是 A 环境账号和 B环境账号都提示为 B 环境。

因为前端采用了 Cookie信息判断，后端则是通过 token 信息处理不受影响。但以上两种都导账号可能测试不准确，我们要对此进行提示。

5、完善功能

通过已上得知相同域名下的 Cookie 为一份，但是每个浏览器页签中也存储了当前账号的公司 Id，我们只需要将两个值进行对比，不一致对客户提示。我们继续对 Trae-Builder 进行完善功能的提示：

获取当前页签下的 sessionStorage 中的 bNo字段值，与响应头中url的顶级域名下的cookie信息中的 companyId 字段值，将两个值进行对比，将比较结果是否一致同环境信息都展示给客户。

以下为生成的相关逻辑，审核后发现基本满足了，只是cookies的获取并非顶级域名，点击全接受。

引用当前代码并进行提示：

background.js 11-11 获取顶级域名，需要调整下

6、验证结果

（1. 正常结果，但是没换行，太长了，不方便查看 😭

（2. 又出问题，提示：未能获取完整的比较信息 😭

代码优化

生成代码还是存在相关小问题，我们手动进行以下调整

+ let notification = null;

// 创建提示元素

function create Notification(message) {

+ if (!notification) {

+ notification = document.createElement("div");

- const notification = document.createElement("div");

notification.id = "ab-plugin-notification";

notification.style.cssText = `

....

`;

- notification.textContent = message;

document.body.appendChild(notification);

+ }

+ notification.innerText = message;

}

// 监听来自background.js的消息

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {

if (request.type === "ENV_CHECK" && request.isEnvB) {

....

// 确保提示只显示一次

- // if (!document.getElementById('ab-plugin-notification')) {

createNotification(message);

- // }

}

});

同时调整了插件的可以访问的网站，以及脚本生效的网站和兼听的域名都从之前的 "<all_urls"> 调整为业务相关的域名 "*://*.sobot.io/*" 和 "*://*.sobot.com/*"。

完成上述调整后，组件相关功能已经完成 ✅，但icon图片没有生成 ，应该是不具备相关功能，只是把名称列了出来，可以根据自己的喜好找两个图标，一个48像素，一个128像素的。

结论

Trae IDE 能帮助我们在不太熟悉的领域生成核心功能代码，如关键性 api 。本文插件的完成几乎完全依赖 Trae 的 Builder 模式，可以根据我们的要求快速实完成了代码片断的编写，实现了真正的「中文」编程👍👍👍

借助 AI IDE 🫰，的确能快速提升我们的开发效率，同时能辅助我们在一些不太熟悉的领域实现一些功能进而辅助我们的工作😄

——作者：建超 ｜研发中心 - 前端工程师