背景
因为一些个人比较懒的原因，不愿意去各路管理后台查询->操作，查询->再操作，抑或是数据库查询->操作，查询->再操作…为了跳出这个查找操作链，曾经尝试过很多方式，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); |
popup.js/popup.html是插件点击之后弹出框，最早期的时候是做了这样一个版本，但因为这个框当鼠标移开的时候，框就会消失，不便于查看和操作，早期版本如下图
插件的安装和打包
1、打开chrome浏览器，输入chrome://extensions/ 进入到chrome插件管理页面
2、开启右上角的“开发者模式”，点击“加载已解压的扩展程序”
3、选择“yanxuan-chrome-testplugin”所在文件夹根目录，确定
4、导入之后点击开关开启插件
5、也可对插件进行打包，在插件页面点击“打包扩展程序”，生成扩展程序打包文件，使用时拖入到chrome中即可完成插件安装
遇到的坑
1、最早开始的时候，在 manifest.json文件里面，设置了run_at参数的值为document_start，发现总是找不到发货的订单所在位置，左思右想发现页面尚未加载如何找到控件，改成了默认值document_idle，等页面加载完成再查找；
然而问题又来了，页面加载完了，再添加监听已经来不及了，导致按钮添加不上去，后来修改为"run_at":"document_start"并且添加了window.addEventListener监听事件解决了问题
2、查询和操作功能是调用了ajax请求实现的，请求的是目前现有的一个测试平台的接口，也是将原有的接口平台尽可能的二次利用。
后续
1、前端小白，伤痕累累，没有基础的前提下做的还是略感吃力
2、插件尚未做开关服务，目前只能手动开启关闭
3、功能还很简单，但是个思路拉~
上文内容不用于商业目的，如涉及知识产权问题，请权利人联系博为峰小编(021-64471599-8017)，我们将立即处理。
