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

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

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

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

他来了 油猴脚本只要了解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() 这都是异步，一定要处理好。

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

为什么拿不到dom。

避坑指南 下一章