自動區分不同的開發環境?我做了一個Chrome外掛

XboxYan發表於2022-05-16

不知道大家有沒有碰到這樣的問題:很多時候一個專案會存在多個環境,當瀏覽器標籤頁比較多的時候就完全分不清了

image-20220507145845604

其實這裡是有3個開發環境的

image-20220507150944407

但是單獨從 favicon 是沒法快速區分哪個跟哪個的,為此,我做了一個 Chrome 外掛可以很方便的解決這個問題,效果如下

image-20220507151813352

是不是非常清晰呢?

安裝和使用

Chrome 網上商店 直接搜尋 "auto dev favicon",或者直接訪問這個連結 https://chrome.google.com/webstore/detail/auto-dev-favicon/obgfnmomampmgjefiodpcknepcecgijg,如下

image-20220507153210100

成功安裝後,需要進入到配置頁,也就是可以自定義匹配域名的頁面,有 3 個入口

  1. 直接點選右上角外掛圖示(推薦)
  2. 右鍵右上角外掛圖示,點選“選項”
  3. 進入外掛詳情頁,點選“擴充套件程式選項”

image-20220507153910905

下面就是一個簡單的配置頁面

image-20220507155723294

這裡簡單說明一下

  1. 顏色是指小標籤的背景色,這裡預置了 8 種顏色可供選擇
  2. 名稱是指小標籤的文字內容,由於寬度有限,最多支援兩個中文字元或3個英文字元
  3. 匹配是指域名匹配,這裡僅匹配 hostname,匹配規則是“模式匹配”,用英文逗號分隔可以填寫多個,比如這裡的dev*表示匹配所有以dev開頭的域名,具體規則可參考 URL_Pattern_API
  4. 操作完成之後記得點選一下儲存,會自動同步到 Chrome 賬號

其他說明

如果由於網路環境暫不可訪問應用商店,可以在 github 獲取原始檔,通過開發者模式安裝即可

https://github.com/XboxYan/auto-dev-favicon-chrome-plugin

或者安裝 Edge 外接程式 Microsoft Edge Addons,好處是對網路條件比較友好

image-20220509132724265

有任何問題或者意見可以提 issue 或者與我聯絡:yanwenbin1991@live.com

Enjoy!

相關文章