不知道大家有沒有碰到這樣的問題：很多時候一個專案會存在多個環境，當瀏覽器標籤頁比較多的時候就完全分不清了
其實這裡是有3個開發環境的
但是單獨從 favicon 是沒法快速區分哪個跟哪個的，為此，我做了一個 Chrome 外掛可以很方便的解決這個問題，效果如下
是不是非常清晰呢？
安裝和使用
在 Chrome 網上商店 直接搜尋 "auto dev favicon"，或者直接訪問這個連結 https://chrome.google.com/webstore/detail/auto-dev-favicon/obgfnmomampmgjefiodpcknepcecgijg，如下
成功安裝後，需要進入到配置頁，也就是可以自定義匹配域名的頁面，有 3 個入口
- 直接點選右上角外掛圖示（推薦）
- 右鍵右上角外掛圖示，點選“選項”
- 進入外掛詳情頁，點選“擴充套件程式選項”
下面就是一個簡單的配置頁面
這裡簡單說明一下
- 顏色是指小標籤的背景色，這裡預置了 8 種顏色可供選擇
- 名稱是指小標籤的文字內容，由於寬度有限，最多支援兩個中文字元或3個英文字元
- 匹配是指域名匹配，這裡僅匹配 hostname，匹配規則是“模式匹配”，用英文逗號分隔可以填寫多個，比如這裡的
dev*表示匹配所有以dev開頭的域名，具體規則可參考 URL_Pattern_API - 操作完成之後記得點選一下儲存，會自動同步到 Chrome 賬號
其他說明
如果由於網路環境暫不可訪問應用商店，可以在 github 獲取原始檔，通過開發者模式安裝即可
https://github.com/XboxYan/auto-dev-favicon-chrome-plugin
或者安裝 Edge 外接程式 Microsoft Edge Addons，好處是對網路條件比較友好
有任何問題或者意見可以提 issue 或者與我聯絡：yanwenbin1991@live.com
Enjoy!