编辑推荐

网易数帆开源API网关与容器云项目，让云原生生产落地“多快好

网易汪源：统一负载与多云环境的“开放姿态”，才是云原生

网易数帆如何用 Kubernetes“原语”搞定云原生中间件

快手打新挤爆券商系统，网易数帆推出券商稳定性保障方案

探索智慧校园新模式，网易有数在教育行业的实践分享

金融行业大数据治理之路——数据模型篇

网易严选定制化chrome测试插件

勿忘初心2018-09-29 14:35

本文来自网易云社区

作者：吴琪惠

背景

因为一些个人比较懒的原因，不愿意去各路管理后台查询->操作，查询->再操作，抑或是数据库查询->操作，查询->再操作…为了跳出这个查找操作链，曾经尝试过很多方式，chrome插件是其中一种。

目前，组内也有一个测试平台，能够在平台上点一下，或者输入一个id就能做一些工作，但人总在考虑是否有更佳的方式，甚至不用输入任何值，不去关心cookie等麻烦事。因为常使用chrome的接口测试插件，开始思考是否能够为严选测试环境做一个专门的测试插件。

人生苦短，我只想一键操作。

基本功能

暂时做了2个简单的功能：

第一个是进入商品详情页面之后，双击页面触发插件监听，生成每个规格ID和库存信息，页面截图如下：

第二个功能，是进入订单列表页面，双击页面触发插件监听，识别未发货订单，并在订单下增加一个发货按钮，点击发货按钮即可完成订单发货操作，效果如下：

按照以往的测试发货流程，我们需要复制订单号--> 登录后台查找订单对应的包裹号 --> 修改发货请求参数 --> 打开服务器/测试平台执行发货，目前只要双击-->点击，即可完成，无需任何查询和切换到其他系统的操作。

插件文件

chrome插件可以简单的理解为一个web应用，我们要写的是html和js代码。严选测试插件的文件列表如下：

其中，manifest配置文件里面，设置了一些必要的参数信息，具体可参考上面加的链接，有详细的说明。

{
	"manifest_version": 2,
	"name": "严选测试插件",
	"description": "严选的测试辅助插件",
	"version": "0.0.1",
	"background": { "scripts": ["js/jquery-2.0.0.min.js", "js/background.js"] },
	"page_action": {
		"default_icon": {
			"19": "19.png",
			"38": "38.png" // 插件图标
		},
		"default_title": "严选测试插件" // shown in tooltip
	},
	"permissions" : ["tabs","http://test.yx.mail.netease.com/toolbox/"],
	"content_scripts":[{
		"matches":["http://you.yxp.163.com/*","http://you.163.com/*"],
		"js":["js/jquery-2.0.0.min.js", "js/content_script.js"],
		"run_at":"document_start"
	}]
}

在background.js里面加了对页面的监听，保证插件只针对测试环境url生效，即只有在当前url下，插件图标才会生效，且图标会呈高亮显示。

function getDomainFromUrl(url){
	var host = "null";
	if(typeof url == "undefined" || null == url)
		url = window.location.href;
	var regex = /.*\:\/\/([^\/]*).*/;
	var match = url.match(regex);
	if(typeof match != "undefined" && null != match)
		host = match[1];
	return host;
}


function checkForValidUrl(tabId, changeInfo, tab) {
	console.log(getDomainFromUrl(tab.url));
	if(getDomainFromUrl(tab.url).toLowerCase()=="you.yxp.163.com"){
		chrome.pageAction.show(tabId);
	}
};

chrome.tabs.onUpdated.addListener(checkForValidUrl);

content_scrpit.js是注入到测试页面的脚本，也就是这里的代码是注入到我们待测页面的，会直接影响严选测试环境web端主页。在这里，我做了几个简单的判断，一个是区分当前是哪个页面，针对商品详情页面和订单列表页面url进行解析判断，以辨别进入到不同的事件中。

//添加监听
window.addEventListener("dblclick", (e) => {
	if (checkUrl("/order/myList")) {//订单列表页的处理
		addbutton();
		$('body').on('click', '.toolboxtest', function() {
		    console.log($(this).attr('id'));
		    $.ajax({
		        type:"post",
		        url:"http://xxxx/toolbox/aftersale/packageDeliver",
		        data:{orderId:$(this).attr('id'), packageId:""},
		        error:function(xhr,err){
		            alert('请求失败,errorcode=' + xhr.status + ', errormsg=' + err + '!')
		        },
		        success:function(data){
		            alert(JSON.stringify(data));
		            window.location.reload();
		        }
		    });
		});
	}else if(checkUrl("/item/detail")){//商品详情页的处理
		console.log("go to page /item/detail");
		var itemid = GetQueryString("id");
		$.ajax({
		    type:"get",
		    url:"http://xxxx/toolbox/itemsku/getsku/"+itemid,
		    error:function(xhr, err){
		        chrome.runtime.sendMessage({type:"yx_pc_detail", error:xhr.status + ', errormsg='+xhr.result});
		    },
		    success:function(data) {
		        var skustr = "xxx";
		        $('.m-info').append(skustr); //详细处理不加赘述
		    }
		});
	}
}, false);