背景

公司的前端可視化發(fā)布系統(tǒng)watt，測試環(huán)境打包操作步驟比較多，于是便萌發(fā)了寫一個一鍵發(fā)布項目的chrome插件的想法。

watt測試環(huán)境正常發(fā)布流程：

1. 進入watt
2. 從項目列表中找到需要發(fā)布的項目
3. 若是項目比較多，需要模糊查找
4. 點擊發(fā)布，彈出二次確認按鈕
5. 再次點擊確認才能成功發(fā)布

使用插件后的發(fā)布流程：

image.png

點擊跳轉(zhuǎn)watt并發(fā)布測試即可發(fā)布。

項目思路

image.png

只做頁面跳轉(zhuǎn)。

項目實現(xiàn)原理

一 使用正則解析當前頁面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)) {
        // 針對開發(fā)環(huán)境，域名是純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
    },

項目名稱也會出現(xiàn)在url路徑中，項目名稱也是watt中的應(yīng)用名稱，這是能夠應(yīng)用正則解析出應(yīng)用名稱的基礎(chǔ)。 上面兩個正則分別處理開發(fā)環(huán)境和其他場景。

二 獲取cookie

    async fetchCookie (name, url) {
      return new Promise(resolve => {
        chrome.cookies.get({ name, url }, (info) => {
          resolve(info)
        })
      }

使用上述chrome api獲取watt域名使用的cookie

三 根據(jù)應(yīng)用名獲取watt項目詳情

調(diào)用watt對應(yīng)的api接口，獲取應(yīng)用名對應(yīng)的應(yīng)用詳情，watt應(yīng)用名在不同的bu下是不保證唯一的，此插件目前并未處理應(yīng)用名重復(fù)的問題，若有多個，只會使用第一個。（將來會處理這種情況）
若是獲取到應(yīng)用信息，則會拼接watt部署頁面鏈接，可以直接跳轉(zhuǎn)到該應(yīng)用的發(fā)布頁；
若是未獲取到應(yīng)用信息，則會跳轉(zhuǎn)到watt個人應(yīng)用頁面；

四 根據(jù)應(yīng)用信息，調(diào)用測試環(huán)境發(fā)布接口

image.png

此按鈕，點擊就會觸發(fā)測試環(huán)境發(fā)布接口，同時會跳轉(zhuǎn)到發(fā)布頁。