不知道大家有没有碰到这样的问题：很多时候一个项目会存在多个环境，当浏览器标签页比较多的时候就完全分不清了
其实这里是有3个开发环境的
但是单独从 favicon 是没法快速区分哪个跟哪个的，为此，我做了一个 Chrome 插件可以很方便的解决这个问题，效果如下
是不是非常清晰呢？
安装和使用
在 Chrome 网上商店 直接搜索 "auto dev favicon"，或者直接访问这个链接 chrome.google.com/webstore/de…，如下
成功安装后，需要进入到配置页，也就是可以自定义匹配域名的页面，有 3 个入口
- 直接点击右上角插件图标（推荐）
- 右键右上角插件图标，点击“选项”
- 进入插件详情页，点击“扩展程序选项”
下面就是一个简单的配置页面
这里简单说明一下
- 颜色是指小标签的背景色，这里预置了 8 种颜色可供选择
- 名称是指小标签的文本内容，由于宽度有限，最多支持两个中文字符或3个英文字符
- 匹配是指域名匹配，这里仅匹配 hostname，匹配规则是“模式匹配”，用英文逗号分隔可以填写多个，比如这里的
dev*表示匹配所有以dev开头的域名，具体规则可参考 URL_Pattern_API - 操作完成之后记得点击一下保存，会自动同步到 Chrome 账号
其他说明
如果由于网络环境暂不可访问应用商店，可以在 github 获取源文件，通过开发者模式安装即可
或者安装 Edge 外接程序 Microsoft Edge Addons，好处是对网络条件比较友好
有任何问题或者意见可以提 issue 或者与我联系：yanwenbin1991@live.com
Enjoy!
