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/。
- 打开右上角的 开发者模式。
- 点击 加载已解压的扩展程序。
- 选择刚才解压出来的目录即可。
如果你是开发者，也可以直接克隆仓库：
配置示例
打开扩展的“选项”页面，你会看到一张规则表，每条规则包含：
字段 | 说明 |
启用 | 是否启用这条规则 |
名称 | 页面上显示的环境名，比如“生产环境” |
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 是一个非常“个人化”的小工具，它解决的问题很具体，但确实能减少一次又一次的“环境恍惚”。
如果你也经常在多套环境之间来回切，欢迎试试看，反馈和建议都很欢迎。
如果你想看更详细的使用说明，可以继续看仓库 README；如果你想交流插件思路或者推荐类似的小工具，欢迎在评论区聊。
- 作者:leolin
- 链接:https://leolin66.top/article/env_guard
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
.svg?table=collection&id=70c79658-1b5e-4da7-8bcb-b6abb506a861&t=70c79658-1b5e-4da7-8bcb-b6abb506a861)
