谷歌插件在测试的应用

转载自酷家乐技术博客：https://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

{
// 清单文件的版本，这个必须写
"manifest_version": 2,
// 插件的名称
"name": "demo",
// 插件的版本
"version": "1.0.0",
// 插件描述
"description": "简单的Chrome扩展demo",
// 图标，一般偷懒全部用一个尺寸的也没问题
"icons":
{
"16": "img/icon.png",
"48": "img/icon.png",
"128": "img/icon.png"
},
// 会一直常驻的后台JS或后台页面
"background":
{
// 2种指定方式，如果指定JS，那么会自动生成一个背景页
"page": "background.html"
//"scripts": ["js/background.js"]
},
// 浏览器右上角图标设置，browser_action、page_action、app必须三选一
"browser_action":
{
"default_icon": "img/icon.png",
// 图标悬停时的标题，可选
"default_title": "这是一个示例Chrome插件",
"default_popup": "popup.html"
},
// 当某些特定页面打开才显示的图标
/*"page_action":
{
"default_icon": "img/icon.png",
"default_title": "我是pageAction",
"default_popup": "popup.html"
},/
// 需要直接注入页面的JS
"content_scripts":
[
{
//"matches": ["http:///*", "https:///"],
// "<all_urls>" 表示匹配所有地址
"matches": ["<all_urls>"],
// 多个JS按顺序注入
"js": ["js/jquery-1.8.3.js", "js/content-script.js"],
// JS的注入可以随便一点，但是CSS的注意就要千万小心了，因为一不小心就可能影响全局样式
"css": ["css/custom.css"],
// 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle
"run_at": "document_start"
},
// 这里仅仅是为了演示content-script可以配置多个规则
{
"matches": [":///.png", ":///.jpg", ":///.gif", ":///.bmp"],
"js": ["js/show-image-content-size.js"]
}
],
// 权限申请
"permissions":
[
"contextMenus", // 右键菜单
"tabs", // 标签
"notifications", // 通知
"webRequest", // web请求
"webRequestBlocking",
"storage", // 插件本地存储
"http:///", // 可以通过executeScript或者insertCSS访问的网站
"https:///" // 可以通过executeScript或者insertCSS访问的网站
],
// 普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的
"web_accessible_resources": ["js/inject.js"],
// 插件主页，这个很重要，不要浪费了这个免费广告位
"homepage_url": "https://www.baidu.com",
// 覆盖浏览器默认页面
"chrome_url_overrides":
{
// 覆盖浏览器默认的新标签页
"newtab": "newtab.html"
},
// Chrome40以前的插件配置页写法
"options_page": "options.html",
// Chrome40以后的插件配置页写法，如果2个都写，新版Chrome只认后面这一个
"options_ui":
{
"page": "options.html",
// 添加一些默认的样式，推荐使用
"chrome_style": true
},
// 向地址栏注册一个关键字以提供搜索建议，只能设置一个关键字
"omnibox": { "keyword" : "go" },
// 默认语言
"default_locale": "zh_CN",
// devtools页面入口，注意只能指向一个HTML文件，不能是JS文件
"devtools_page": "devtools.html"
}</all_urls></all_urls>