油猴脚本（实习生趁手的工具）

今天第一天实习，毋庸置疑。我拿到了工具人的活，就是将五百条数据手动删除，并且只能一条条搜，一条条删（毋庸置疑，实习生这种活很常见）。今天的重点：如何快速转形

（把自己包装的比较厉害，让他们刮目相看，一定要耐心看完。。。）。

他来了油猴脚本只要了解js你就可以写

了解油猴脚本

油猴脚本就是让你的浏览器把你写的js插入到打开的网站中。因此也就是说你可以操作dom。也就是说你可以为所欲为了。
首先你要下载谷歌浏览器，其次你得安装油猴插件。
点击查看保姆级安装教学
然后添加新的脚本，你就可以在编译器里面写了。现在看看基本格式。

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://127.0.0.1:8848/%E8%84%9A%E6%9C%AC%E5%A4%84%E7%90%86/index.html
// @icon         https://www.google.com/s2/favicons?sz=64&domain=0.1
// @grant        none
// ==/UserScript==(function() {'use strict';// Your code here...
})();

上面有一片注解就是油猴给留的接口可以参考
油猴脚本文档

我们的代码就在function里面写。

那就是熟悉的操作dom了。

首先我们应该去爬数据（油猴脚本爬数据万能），只要你能看见的数据都可以爬取下来。（如果可以API爬那建议API爬）

找一个网站演示一下 http://zhongguose.com/

首先我们分析dom结构
很简单吧，一片li我们只需要 ↓这样就可以拿到一片名字和色号了（懒加载可以手动，可以代码）

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://127.0.0.1:8848/%E8%84%9A%E6%9C%AC%E5%A4%84%E7%90%86/index.html
// @icon         https://www.google.com/s2/favicons?sz=64&domain=0.1
// @grant        none
// ==/UserScript==(function() {'use strict';setTimeout(() => {let name = document.querySelectorAll('.name')let rgb = document.querySelectorAll('.rgb')let newArr = []name.forEach( (r,i) => {let newJson = {}newJson.name = r.innerTextnewJson.rgb = rgb[i].innerTextnewArr.push(newJson)})console.log('所有的数据',newArr)}, 2000)// Your code here...
})();

然后你现在就有数据了，然后你就可以开始做了（这些数据你可以直接在控制台右键复制（复制不好用就多点一点））。
譬如你要开始删除后台的一些数据。同理你可以直接操作dom.。

把这些数据放在你要用的js中。然后就可以开始写一些机器化操作。譬如把这所有的数据都上传，我这里直接写一个网站，供大家测试。
https://static-9b5ca660-ec27-4069-be5f-b989dcd7c433.bspapp.com/

我们的操作就是把这两个数据放到输入框，然后点确定（操作都差不多，只不过会有很多坑，我会说这些坑的）。

查看这个网站的dom (vue的)

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://127.0.0.1:8848/%E8%84%9A%E6%9C%AC%E5%A4%84%E7%90%86/index.html
// @icon         https://www.google.com/s2/favicons?sz=64&domain=0.1
// @grant        none
// ==/UserScript==(function() {'use strict';setTimeout(() => {let one = document.getElementById('app')console.log(one)let input0 = one.getElementsByTagName('input')let button0 = one.getElementsByTagName('button')console.log(input0,button0)input0[0].value = '123'setTimeout( r => {button0[0].click()},1000)}, 2000)// Your code here...
})();

现在我们封装一下然后引入刚才抓的数据。

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://127.0.0.1:8848/%E8%84%9A%E6%9C%AC%E5%A4%84%E7%90%86/index.html
// @icon         https://www.google.com/s2/favicons?sz=64&domain=0.1
// @grant        none
// ==/UserScript==(function() {'use strict';const ourData = [{name : '这是名字'},{ name : '这是个名字'}] //这里全是刚才抓的数据 太多了//因为这里用了很多异步  所以简单来做的话自己调自己 还是挺好用的let nowIndex = 0 //设置从0开始function demo(value) {setTimeout(() => {let one = document.getElementById('app')console.log(one)let input0 = one.getElementsByTagName('input')let button0 = one.getElementsByTagName('button')console.log(input0, button0)// 要输入的值input0[0].value = valuesetTimeout(r => {button0[0].click()setTimeout(r => {if (nowIndex <= ourData.length - 1) {// 说明数据还没上传完// 进行下一个nowIndex++demo(ourData[nowIndex].name)}}, 1000)}, 1000)}, 2000)}// Your code here...
})();

这样就可以一直运行到最后了。当然肯定还有很多坑就譬如写脚本肯定很多 setTimeout() 这都是异步，一定要处理好。

为什么只写了一个脚本但是一个网站一次启动好几个。

为什么拿不到dom。

避坑指南下一章