Env Guard：让浏览器一眼分清生产、测试和开发环境

Env Guard让浏览器一眼分清生产、测试和开发环境写在前面做后端、测试或者运维的朋友应该都经历过这样一幕你以为自己在测试环境里点了一个删除按钮结果页面跳了一下URL 看起来差别不大但其实是生产环境。这种“环境误操作”轻则浪费排查时间重则直接出事故。很多时候并不是不认真而是页面长得太像地址栏又一眼看不准。为了解决这个痛点我给自己写了一个 Chrome 扩展Env Guard。它会按你配置的 URL 规则在页面上方自动挂一个醒目的环境标记比如“生产环境”“测试环境”“开发环境”颜色、透明度、位置都能自己调拖到哪就停在哪。这是什么Env Guard 是一个 Chrome 浏览器扩展主要面向需要频繁切换多个环境的用户帮助你在打开一个页面时一眼看清楚当前是哪种环境降低误操作生产环境数据的风险。它的核心理念很简单环境是重要的上下文不应该只藏在 URL 后面。核心功能按 URL 自动识别环境根据配置的 URL 匹配规则自动判断当前页面属于哪个环境。自定义环境名称和颜色生产环境、测试环境、开发环境或者你自己定义的任何环境名都可以。透明度可调标记背景支持透明度调节在不遮挡业务的同时依然显眼。默认位置可配支持左上、顶部居中、右上、左中、居中、右中、左下、底部居中、右下九宫格位置。字体大小可调从 12 到 80 px按屏幕和习惯自己调。支持正则匹配URL 匹配字段支持正则表达式写错了会回退到普通包含匹配不至于直接失效。自由拖拽标记可以直接在页面上拖动避开遮挡内容的区域。记住拖拽位置拖动后的位置会自动保存下次命中同一条规则时会自动恢复。SPA 友好监听前端路由变化URL 切换后会立刻重新判断环境标记不用手动刷新。规则测试配置页内置 URL 测试框输入地址就能看到命中哪条规则。导入/导出配置支持 JSON 导入导出换电脑或者团队内部分享都很方便。使用场景举几个我自己用下来最常见的场景多套环境并行同时有prod.xxx.com、staging.xxx.com、dev.xxx.com一眼分清。本地开发用localhost、127.0.0.1区分本地开发版本。内网测试用 IP 或特定子域名标识测试环境。灰度环境自定义一个“预发环境”标记单独配色。演示场景录屏或对外演示时避免误打开生产数据。安装方式从 GitHub Release 下载最新的Env_Guard.zip。解压到任意目录。打开 Chrome访问chrome://extensions/。打开右上角的开发者模式。点击加载已解压的扩展程序。选择刚才解压出来的目录即可。如果你是开发者也可以直接克隆仓库gitclone https://github.com/Linlei-dev/Env_Guard.git配置示例打开扩展的“选项”页面你会看到一张规则表每条规则包含字段说明启用是否启用这条规则名称页面上显示的环境名比如“生产环境”URL 匹配用于匹配页面 URL支持正则颜色标记背景颜色透明度标记背景透明度默认位置首次显示的位置字体大小标记文字大小默认会带三条示例规则https://www.example.com/生产环境https://test.example.com/测试环境localhost|127.0.0.1|dev.example.com开发环境你可以基于这些示例改成自己的项目地址。性能优化之前拖动标记时会有点卡主要原因有两个transform频繁重排。监听事件没有节流。这次重写之后做了几件事拖动过程统一改用translate3d。用requestAnimationFrame合并位置更新。用pointer events统一鼠标/触控。实测下来拖动手感顺滑多了不再有掉帧感。隐私说明Env Guard 只做一件事把配置和当前页面 URL 在本地做匹配决定显示哪种环境标记。它不会上传任何页面内容上传任何用户配置收集任何浏览历史接入任何第三方服务所有规则、颜色、拖动位置都只保存在浏览器本地chrome.storage.sync里。写在最后Env Guard 是一个非常“个人化”的小工具它解决的问题很具体但确实能减少一次又一次的“环境恍惚”。如果你也经常在多套环境之间来回切欢迎试试看反馈和建议都很欢迎。仓库地址https://github.com/Linlei-dev/Env_Guard如果你想看更详细的使用说明可以继续看仓库 README如果你想交流插件思路或者推荐类似的小工具欢迎在评论区聊。