转自酷家乐技术博客tech.kujiale.com
作者：三笠

谷歌小插件因其具有窗口控制、网络请求控制、各类事件监听等功能而被广泛应用在浏览器中。鉴于其强大的功能，团队考虑是否可以将其与测试过程相结合，从而提升测试效率。

一、应用背景介绍
1.1 分布式全链路跟踪系统-Hunter
随着SOA的普及，各大互联网公司都拥有自己较为成熟的分布式跟踪系统，比如Google的Dapper，Twitter的Zipkin，淘宝的鹰眼，京东的Hydra，eBay的CAL，大众点评的CAT等等：
酷家乐基于自身需求，希望能够将用户的一次请求以可视化的方式完整地展示出来，这样既有利于做性能分析，也有利于丰富线上监控手段。这个系统要解决的问题是：
从业务上监控各个系统的健康状况
追踪用户一次请求的完整调用链路，提高开发人员排查和定位问题的效率
帮助服务治理，识别服务压力，给开发人员做流程优化及性能优化提供指导方向，找到瓶颈

酷家乐的Hunter系统：
图片说明

1.2 如何提升hunter查找效率
在web端测试中，时常出现因为后端接口报错从而导致的bug。在酷家乐的测试时间中，我们需要频繁得按F12打开谷歌开发工具去找到唯一的hunterid，如图

再去Hunter去查找该调用链信息。如果可以直接用谷歌插件监听页面的接口返回，当出现接口异常时，直接提示并给出调用链的链接，就可以节省很多时间。如图，红色为简化链路

二、插件开发需要的文件介绍
manifest.json

popup.html/pop.js
popup是点击browser_action或者page_action图标时打开的一个小窗口网页，焦点离开网页就立即关闭，一般用来做一些临时性的交互
background.js
后台，是一个常驻的页面，它的生命周期是插件中所有类型页面中最长的，它随着浏览器的打开而打开，随着浏览器的关闭而关闭，所以通常把需要一直运行的、启动就运行的、全局的代码放在background里面。
background的权限非常高，几乎可以调用所有的Chrome扩展API（除了devtools），而且它可以无限制跨域，也就是可以跨域访问任何网站而无需要求对方设置CORS。
关于：webRequst

三、实现原理

插件实现原理如上图，利用background.js监听网络请求，当遇到异常的接口，则通过消息传递机制，转发给popup.js。同时popup.js将结果传递给popup.html，最后呈现在用户眼中。最后呈现效果如图

四、当前结果
上线近2个月多月，已经有45位用户，反馈较良好。

五、插件开发参考文档
【谷歌官方】https://developer.chrome.com/extensions
【360翻译版】http://open.chrome.360.cn/html/dev_doc.html
【网友总结】https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html
【webRequst】https://developer.chrome.com/extensions/webRequest
【官方例子】https://developer.chrome.com/extensions/samples