自动区分不同的开发环境？我做了一个Chrome插件

不知道大家有没有碰到这样的问题：很多时候一个项目会存在多个环境，当浏览器标签页比较多的时候就完全分不清了

其实这里是有3个开发环境的

但是单独从 favicon 是没法快速区分哪个跟哪个的，为此，我做了一个 Chrome 插件可以很方便的解决这个问题，效果如下

是不是非常清晰呢？

安装和使用

在 Chrome 网上商店 直接搜索 "auto dev favicon"，或者直接访问这个链接 https://chrome.google.com/webstore/detail/auto-dev-favicon/obgfnmomampmgjefiodpcknepcecgijg，如下

成功安装后，需要进入到配置页，也就是可以自定义匹配域名的页面，有 3 个入口

1. 直接点击右上角插件图标（推荐）
2. 右键右上角插件图标，点击“选项”
3. 进入插件详情页，点击“扩展程序选项”

下面就是一个简单的配置页面

这里简单说明一下

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，好处是对网络条件比较友好

有任何问题或者意见可以提 issue 或者与我联系：[e-mail]

Enjoy!