背景
公司的前端可视化发布系统watt，测试环境打包操作步骤比较多，于是便萌发了写一个一键发布项目的chrome插件的想法。
watt测试环境正常发布流程：
- 进入watt
- 从项目列表中找到需要发布的项目
- 若是项目比较多，需要模糊查找
- 点击发布，弹出二次确认按钮
- 再次点击确认才能成功发布
使用插件后的发布流程：
image.png
点击跳转watt并发布测试即可发布。
项目思路
该项目主要是为了在项目开发时，可以快速发布测试环境。同时为了避免误操作，只有判定当前为开发环境时，跳转watt并发布测试的功能才会开启，而且只会发布测试环境。其他环境只会显示
image.png
只做页面跳转。
项目实现原理
一 使用正则解析当前页面url
const LOCAL_URL_REGX = /^(https|http)?:\/\/[0-9.]+:[0-9]+\/bixin\/([\w-_]+)\/index.*/
const DOMAIN_URL_REGX = // 出于安全考虑此正则就不展示出来了
async getApplicationName () {
const url = this.currentUrl
let applicationName = ''
if (url.match(LOCAL_URL_REGX)) {
// 针对开发环境，域名是纯IP地址的问题
applicationName = url.replace(LOCAL_URL_REGX, '$2')
this.currentEnv = 'dev'
} else if (url.match(DOMAIN_URL_REGX)) {
applicationName = url.replace(DOMAIN_URL_REGX, '$2')
this.currentEnv = 'online'
}
return applicationName
},
项目名称也会出现在url路径中，项目名称也是watt中的应用名称，这是能够应用正则解析出应用名称的基础。 上面两个正则分别处理开发环境和其他场景。
二 获取cookie
async fetchCookie (name, url) {
return new Promise(resolve => {
chrome.cookies.get({ name, url }, (info) => {
resolve(info)
})
}
使用上述chrome api获取watt域名使用的cookie
三 根据应用名获取watt项目详情
调用watt对应的api接口，获取应用名对应的应用详情，watt应用名在不同的bu下是不保证唯一的，此插件目前并未处理应用名重复的问题，若有多个，只会使用第一个。（将来会处理这种情况）
若是获取到应用信息，则会拼接watt部署页面链接，可以直接跳转到该应用的发布页；
若是未获取到应用信息，则会跳转到watt个人应用页面；
四 根据应用信息，调用测试环境发布接口
若是开发环境，并且获取到应用项目详情，则会显示
image.png
此按钮，点击就会触发测试环境发布接口，同时会跳转到发布页。
