油猴脚本（实习生趁手的工具）
今天第一天实习，毋庸置疑。我拿到了工具人的活，就是将五百条数据手动删除，并且只能一条条搜，一条条删（毋庸置疑，实习生这种活很常见）。今天的重点 ：如何快速转形
（把自己包装的比较厉害，让他们刮目相看，一定要耐心看完。。。）。
他来了 油猴脚本只要了解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.innerText
newJson.rgb = rgb[i].innerText
newArr.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 = value
setTimeout(r => {
button0[0].click()
setTimeout(r => {
if (nowIndex <= ourData.length - 1) {
// 说明数据还没上传完
// 进行下一个
nowIndex++
demo(ourData[nowIndex].name)
}
}, 1000)
}, 1000)
}, 2000)
}
// Your code here...
})();这样就可以一直运行到最后了。当然肯定还有很多坑 就譬如 写脚本肯定很多 setTimeout() 这都是异步，一定要处理好。