需求来源
上次开每周例会的时候，大家一起嗨皮的聊天，聊到了测试是怎么做测试的。
然后测试就给我们演示了一下，每次编写测试用例，都要通过 chrome 获取元素的 xpath，很麻烦。
我就多嘴问了一句，为什么不自己弄一个自动获取 xpath 然后读成想要格式的浏览器插件呢？
测试：我不会，没研究过。老板：那你来帮他实现一个吧。***，你把需求理顺了放进tapd。我：。。。
好在之前对 chrome 插件也略有所闻，嘿嘿。
需求梳理
通过沟通和需求的梳理，简单总结了一下要实现的逻辑：
鼠标双击一个元素的时候，自动读取该元素的 xpath
然后将读取的结果放到另一个页面中展示，以方便用户直接选取复制
成功以后提示用户“auto saved”
为什么要实现 chrome 插件呢？
因为 chrome 插件支持几乎所有的 webkit 内核的浏览器，例如 360、搜狗、QQ等，使用起来非常方便
另外，对于 chrome 插件开发者而言，chrome 做了最大的努力使得插件的开发简单而高效。
ok，开搞。
目录结构
chrome 插件的项目结构十分简单，一个插件目录结构可以包含以下几个文件夹，使目录看起来非常像一个网站目录
├──html├──js├──img├──manifest.json└──style
因此开发者可以自由的将精力和时间放置在真正的代码和逻辑层面，而不必关注额外的事情
但是插件目录没有严格的标准，即便你只有一个manifest.json也是可以的，因为只有这个文件使必须的，其他都是可选择的，比如我要开发的插件十分简单，因此项目结构也做的非常简单。
├──background.html├──background.js├──icon.png├──manifest.json└──xpath.js
大概说一下：
manifest.json 是必须的文件，必须放在根目录下，用来记录这个插件相关的信息和配置
background.html 常驻页面，生命周期最长，随浏览器打开而打开，随浏览器关闭而关闭，所以把需要一直运行的、启动就运行的、全局的代码放在 background 里面
background.js 常驻页面的 js 逻辑
icon 插件安装到 chrome 后在浏览器右上角显示的插件图标
xpath.js 插件要实现的需求具体的逻辑代码
manifest.json 简介
请注意，manifest.json 是插件的入口文件，因此它是必须的文件，这个文件内配置了许多参数
其中有些必须参数如下：
"manifest_version":2,//manifest文件的版本，推荐值是2或者3"name":"myplus",//插件的名称"version":"1.0.0",//插件的版本
推荐的参数：
"default_locale":"zh_CN",//默认语言"description":"我的第一个扩展插件",//插件的描述"icons":{"16":"img/icon.png","48":"img/icon.png","128":"img/icon.png"},//图标"permissions":[//声明插件所需要的权限"contextMenus",//右键菜单"tabs",//标签"notifications",//通知"webRequest",//web请求"webRequestBlocking","storage",//插件本地存储"http://*/*",//可以通过executeScript或者insertCSS访问的网站"https://*/*"//可以通过executeScript或者insertCSS访问的网站"cookies",//cookie信息]其他的参数，我挑选了一些放在这里
"background":{//常驻的后台JS或后台页面//第一种方式"page":"background.html"//通过指定html文件//第二种方式"scripts":[//通过指定的js文件，PS:如果指定了这种方式，会自动生成一个html"scripts/background.js",]},//browser_action和page_action只能添加一个"browser_action":{//浏览器级别行为，所有页面均生效"default_icon":"images/16x16.png",//图标的图片"default_title":"myplus",//鼠标移到图标显示的文字"default_popup":"html/popup.html"//单击图标后弹窗页面},"page_action":{//页面级别的行为，只在特定页面下生效"default_icon":{"24":"images/custom/24x24.png","38":"images/custom/38x38.png"},"default_popup":"html/popup.html","default_title":"myplus"},"content_scripts":[//定义对页面内容进行操作的脚本{"js":["js/insert.js"],//多个文件会按顺序加载"css":["css/insert.css"],//同上"matches":["<all_urls>"],//匹配所有地址"run_at":"document_start"//可选的值还有为"document_end",默认为"document_idle"}],"devtools_page":"devtools.html"//devtools页面入口，只能是HTML文件manifest 参数内容很多很长，而且版本2 和 3 还有些不同，所以这里我就不细说了，详细了解请点击
background.html
这个页面用于展示 xpath 的结果，所有的 xpath 结果都会以换行的方式展示在#app这个div中
<!doctypehtml><html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><style>#app{margin:0;padding:0;font-size:12px;background-color:#fff;color:silver;padding:10px;}</style></head><body><divid=app></div><scriptsrc="background.js"></script></body></html>下面开始进入正题了
代码
获取元素的 xpath
首先，我们要完成获取元素的 xpath 的逻辑，这部分是我们插件最主要的逻辑，放在 xpath.js 中。
那么什么是元素的 xpath 呢？我们打开浏览器的开发者模式，选中一个元素，鼠标右击，会弹出一个对话框如下：
这里我们能找到一个正常的 xpath 是这样的：
//*[@id="juejin-web-editor"]/div[2]/div/header/div[2]/button
或者一个全路径的 xpath 是这样的：
/html/body/div/div[2]/div/header/div[1]
所以 xpath 本质上就是遍历某个元素的父节点和兄弟节点，然后拼成节点层级的路径，这个元素在兄弟节点中的位置，用[n]来表示
所以我们先来写一个查找元素在兄弟元素位置中的函数，这个函数返回元素在兄弟中的位置 n，注意的 n 只的是相同的标签，比如：
<headerclass="headereditor-header"><divclass="left-box"></div><inputclass="title-input"><divclass="right-box"></div></header>
在上面这段代码中
.left-box 的 xpath 是/header/div[1]
.title-input 的 xpath 是/header/input
.right-box 的 xpath 是/header/div[2]
所以我们得出获取 n 的方法：
functionelementsShareFamily(pre,sib){//判断是否是相同的tagnamereturn(pre.tagName===sib.tagName&&(!pre.id||pre.id===sib.id));}functiongetElementIndex(el){varsib,index=1;//默认为1for(sib=el.previousSibling;sib;sib=sib.previousSibling){//前面有兄弟元素且tagname相同if(sib.nodeType===Node.ELEMENT_NODE&&elementsShareFamily(el,sib)){index++;}}if(index>1){returnindex;}for(sib=el.nextSibling;sib;sib=sib.nextSibling){//后面有兄弟元素且tagname相同if(sib.nodeType===Node.ELEMENT_NODE&&elementsShareFamily(el,sib)){return1}}return0;}我们已经成功拿到了 n，下面要获取元素的祖先元素以及祖先元素的 n：
functionmakeQueryForElement(el){varquery='';for(;el&&el.nodeType===Node.ELEMENT_NODE;el=el.parentNode){varcomponent=el.tagName.toLowerCase();varindex=getElementIndex(el);if(index>=1){component+='['+index+']';}query='/'+component+query;}returnquery;};将 xpath 传递给 background
上面的 query 就是/header/div[1]这种形式的 xpath，到这里我们已经实现了获取元素的 xpath，接下来要做的就是把结果传递到background.html中，并在当前页面给用户一个提示auto saved
这里跨页面通信，我们使用的是谷歌拓展的一个 API，叫做 extension，这个 API 有用于发送和接收信息的方法：
chrome.extension.sendRequest(obj, callBack)
chrome.extension.onRequest.addListener(function)
我们获取了完整的 xpath 后，用sendRequest方法将它发送给background.js
├──html├──js├──img├──manifest.json└──style0
接受 xpath 数据并显示在页面
发送以后，我们需要在background.js中接受这个数据
├──html├──js├──img├──manifest.json└──style1
到这里我们的主要逻辑就写完了，然后来补充下manifest.json
manifest.json
在manifest.json写好必须的数据就可以了
├──html├──js├──img├──manifest.json└──style2
打包和发布
写好的插件可以直接按照文件夹的形式拖动到chrome://extensions/下
安装以后就会在扩展管理中列出来
如果想发布的话，需要到https://chrome.google.com/webstore/developer/dashboard/上，访问这里需要登录谷歌账号
然后缴纳 5 美元的注册费
成功注册为开发者之后，就可以上传打包后的.zip文件包了
上传之后可以在“开发者信息中心”查看，我就不多赘述了。
作者：晴天同学