浏览器标签页工具插件
遇到的问题
在进行业务开发时，代码写完之后会在本地启动服务进行接口测试，一般用 swagger 文档，如果需要服务间调用可能需要启动多个服务，这样就要打开多个 swagger 文档，如果服务关闭后，标签页全是 localhost，不一个个点都不知道是哪个服务的，如下图所示：
同时，代码调试完上到开发环境后，如果打开了同一个服务的 swagger 文档，都不知道是本地的还是开发环境的，更何况还有测试环境的 swagger 文档。
简单的解决方法
在浏览器标签页上右击 | 将标签页添加到组，给本地、开发、测试分别设置蓝色、黄色、绿色，后续打开的 swagger 文档都添加到对应的分组：
复杂的解决方法
可以写一个插件来修改 swagger 网页的图标和标题。
插件目录结构
tab-tool // 标签页工具插件
│ .gitignore // git 忽略文件
│ background.js // 插件后台脚本
│ manifest.json // 插件清单文件
│ README.md // 项目说明
│ update.bat // Windows 更新插件脚本
│ update.sh // Linux 更新插件脚本
│
├─icons
│ tab-96.png // 插件图标
│
└─popup
popup.html // 插件弹出页面
具体代码已上传到 Gitee。
存在的问题
最终的效果如下：
可以发现，如果服务没有启动，标签页的图标何标题都没有被改变，经过多方查找，根据关键词“Chrome 修改错误页面”，找到一篇 Stack Overflow 上的帖子：Customize Chromium/Google Chrome error pages，其指出错误页面是运行时动态生成的，无法修改。对应的 Chromium 引擎开源的 C++ 代码链接为：https://chromium.googlesource.com/chromium/chromium/+/master/chrome/renderer/localized_error.cc
拓展阅读
如果是自己的网站，可以使用 Service Worker 来进行代理，将错误页面替换为自定义 HTML。
