从0到1开发前端项目一键发布chrome插件

背景

公司的前端可视化发布系统watt，测试环境打包操作步骤比较多，于是便萌发了写一个一键发布项目的chrome插件的想法。

watt测试环境正常发布流程：

1. 进入watt
2. 从项目列表中找到需要发布的项目
3. 若是项目比较多，需要模糊查找
4. 点击发布，弹出二次确认按钮
5. 再次点击确认才能成功发布

使用插件后的发布流程：

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

此按钮，点击就会触发测试环境发布接口，同时会跳转到发布页。