记录一次开发油猴脚本的demo

前言：之前听别人讲油猴脚本怎么怎么地，怎么怎么样，一直以为是个很难的东西，所以在上周五的时候，就自己看了一下，这个东西也不太难。主要还是js玩的6就行了。当然了我的js就算了。勉勉强强的。废话不多说，进入正题。

这个油猴脚本在爬虫这块的应用就是发送cookie，有时候，我们在抓取网站的时候，需要携带网站的cookie，或者是token这些东西的，要是自己能逆向出来，自己生成cookie，token这些东西还好说，要是能力不够的话，这些东西每次都需要自己复制，这样子就很麻烦，所以我们就可以通过脚本的方式，获取到当前页面的cookie，发送到数据库中。用的时候py脚本从数据库中获取就好了，这样就解决了cookie这些东西获取不到，或者是经常失效的问题了。

https://photo.fengniao.com/f_101.html#p=2
先看一下目标地址吧

网站在脚本生成之后的样子

1.先准备好开发工具

   准备一个油猴的插件，外加一个谷歌浏览器。

2.安装完成后出现下面这个东西。

点击后出现下面的这个界面

点击添加新脚本会出现类似js

// ==UserScript==
// @name         蜂鸟网图库下载助手
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  下载图片
// @author       Mr.王
// @match        https://photo.fengniao.com/*
// @require      http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js
// @grant        GM_addStyle
// @grant        GM_download
// ==/UserScript==SS
(function() {})();

3.大体的给说一下这里面的东西是什么意思

 3.1前几个都没啥实际意思啊，直接从@match开始@match这个是匹配我们的目标网站，通俗点说就是我们的脚本是对哪个网站生效的。外插一个@include这个也是用来匹配目标网站的，个人感觉@include好用点。@require  这个是用来引入外部文件的 这里我引入了一个jquery，这样子好开发。@grant  因为油猴本身也具备一些功能，所以我们要是需要引用的话我们就的提前声明， 比如现在，我们需要给写的js加入css，就需要用GM_addStyle ，还需一个下载的功能再添加一个GM_download 这两个，具体还有什么功能自己百度吧。如果什么都不要，那就写成none，就是什么都不需要。

4.

// ==UserScript==
// @name         蜂鸟网图库下载助手
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  下载图片
// @author       Mr.王
// @match        https://photo.fengniao.com/*
// @require      http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js
// @grant        GM_addStyle
// @grant        GM_download
// ==/UserScript==SS
(function() {//https://photo.fengniao.com/   图库选项let down_css=`.down_pic{background:#3d83fa;color: #fefefe;position: absolute;left: 230px;border: 1px solid #1AAD19;cursor: pointer;border-radius: 3px;width: 50px;height: 18px;border:none;margin-top: 10px;}`//通过这种方式引入自己定义的cssGM_addStyle(down_css);function saveAs(data, name) {//触发弹窗的出现var urlObject = window.URL || window.webkitURL || window;var export_blob = new Blob([data]);//createElementNS() 方法可创建带有指定命名空间的元素节点。//此方法可返回一个 Element 对象。var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');save_link.href = urlObject.createObjectURL(export_blob);save_link.download = name;save_link.click();}function down_file(a){//下载文件var url = a.replace(/\\/g, '/');var fileName = url.substring(url.lastIndexOf("/")+1);var xhr = new XMLHttpRequest();xhr.open('GET', a, true);xhr.responseType = 'blob';// 为了避免大文件影响用户体验，建议加loadingxhr.onload = () => {if (xhr.status === 200) {// 获取文件blob数据并保存saveAs(xhr.response, fileName);}};xhr.send();}var lis=$('div.picList li');if(lis.length>0){for(var i=lis.length-1;i>=0;i--){var $findDivElements=$("div.peopleBox");if($(lis[i]).find('div.down_pic').length>0){break;}$(lis[i]).find($findDivElements).before("<button class='down_pic'>下载</button>");}}$('div.picList li').on('click','button',function(){var a_url=$($(this).parents('.noRight')[0]).find("a.pic").attr('style');var reg= new RegExp('url.*(https\:\/\/.*\.jpg)');var a=reg.exec(a_url)[1];//这个是用脚本自己提供的函数写的下载，第一个参数是url，第二个参数是文件名的意思GM_download(a,a.substring(a.lastIndexOf("/")+1));//down_file(a);});//下面这种是用jquery写的// $('div.picList li').each(function(){//     var $findDivElements=$("div.peopleBox");//    $(this).find($findDivElements).before("<button class='down_pic'>下载</button>");// }); //下面的这个函数是当发生滚动条滑动的时候触发的函数window.onscroll=function(){var lis=$('div.picList li');if(lis.length>0){for(var i=lis.length-1;i>=0;i--){var $findDivElements=$("div.peopleBox");if($(lis[i]).find('button.down_pic').length>0){break;}$(lis[i]).find($findDivElements).before("<button class='down_pic'>下载</button>");$($(lis[i]).find('button.down_pic')[0]).click(function(){var a_url=$($(this).parents('.noRight')[0]).find("a.pic").attr('style');var reg= new RegExp('url.*(https\:\/\/.*\.jpg)');var a=reg.exec(a_url)[1];GM_download(a,a.substring(a.lastIndexOf("/")+1));});}}};})();

里面的js就还是当作一般js文件写就行了，独有的是用了油猴自己带的那些GM_addStyle和GM_download 这些东西，别的没有了。

读者把上面的代码粘贴到油猴中，就可以看到一个具有下载功能的页面。

5.在分享一个脚本。具体网站你看代码吧，代码里面有。网站有点不正经。

// ==UserScript==
// @name         屏蔽广告助手
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  屏蔽片站的广告
// @author       Mr.王
// @include      https://www.*.com/index/home.html
// @include      https://www.*.com/*/list-*.html
// @include      https://www.d9289e7489d07952.com/*.html*
// @include      https://*.com/shipin/*.html*
// @require      http://cdn.bootcss.com/jquery/1.8.3/jquery.min.jss
// @grant        GM_addStyle
// @grant        GM_download
// @grant        GM_xmlhttpRequest
// @connect      *
// ==/UserScript==SS
(function(){//中间的广告
$('div#photo-header-content').remove();
//顶部轮播图
$('section.section-banner').remove();
//下边的广告
$('div.close_discor').remove();
//两侧的广告
//    $('div.photo-content-title-foot').remove();
//    GM_xmlhttpRequest({//        method: "get",
//                url: 'https://www.baidu.com',
//                headers: { "Content-Type": "application/x-www-form-urlencoded" },
//        onload: function(res) {//            console.log(res.status);
//        }
//    });})();

这个脚本里面又引用了一个油猴脚本带的发送请求的功能，我自己测试了一下，怎么用
上面是给百度发送了一个请求，要是post请求的话，需要加要给data，值写成str就好。
这样的话，我们就可以通过js获取到当前页面的cookie等一些信息，再写一个接口。通过访问接口的方式把cookie信息存到数据库中就好了。

6.下面是我写js的时候查的一些资料，再复习一下jquery。

parents（“这里可以写选择器”）寻找父元素。他是一直向上找的。一直到根元素为止，他会返回一个数组。来存放

closest（“这里可以写选择器”）寻找父元素。他是从自己开始找，然后向上找，如何发现一个符合的元素，就返回，所以他返回的是0/1个元素
网上找的它两的区别
losest和parents的主要区别是：1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；2，前者逐级向上查找，直到发现匹配的元素后就停止了，
后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；3，前者返回0或1个元素，后者可能包含0 个，1个，
或者多个元素。

find（“这里可以写选择器”）寻找子元素 find()是用来查找后代元素，next()是用来查找同级元素的。
find()可以查找后代任意一个元素，但需要进行匹配。
next()只能查找后一个同级元素，如果想查找下下个元素，就多用一个next()

通过children获取的是该元素的下级元素，而通过find获取的是该元素的下级所有元素。

var element=$(“ul li”).eq(1); 获取第二个元素

或者 $(“ul li:eq(1)”)

//二、在元素内添加，依次（往后）添加：对象.append(元素) 或者元素.appendTo(对象)
　　KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲box').append((’#main’));
　　$(’#box’).append§;

//三、在元素内添加，依次（往前）添加：对象.prepend(元素)；
　　$(’#box’).prepend§;

//四、在元素前添加兄弟元素,依次（往后）添加：对象.before(元素);
　　$(’#box’).before§;

//五，在元素后添加兄弟元素,依次（往前）添加：对象.after(元素)；
　　$(’#box’).after§;

js中正则的写法啊
两种啊

var reg=/正则/ig; //这个意思是说，我们进行全局匹配
var str=“要匹配的字符串啊”;
var c = reg.exec(str)[1] 后面的1是说获取第一个分组中的东西。正则中要是写上括号就是说要进行分组，其中0是匹配到的所有的东西，而从1开始对应的是
第一个括号中匹配到的内容，依次类推

2 var reg=正则 //这个意思是说，我们进行全局匹配
var str=“要匹配的字符串啊”;
var c = str.match(reg)
这种的没办法分组。但是也可以返回。没研究啊。自己看一下

记录一次油猴脚本开发的Demo（入门级）、开发过程相关推荐

[油猴脚本开发指南]脚本ajax的跨域请求
转载自油猴中文网:bbs.tampermonkey.net.cn 李恒道QQ4548212 油猴中文网bbs.tampermonkey.net.cn TamperMonkey GreaseMonkey ...
[油猴脚本开发指南]脚本自动化之模拟点击和表单填写
转载自油猴中文网:bbs.tampermonkey.net.cn 李恒道QQ4548212 油猴中文网bbs.tampermonkey.net.cn TamperMonkey GreaseMonkey ...
[油猴脚本开发指南]脚本往页面上添加新元素
本节主要内容转载自油猴中文网:https://bbs.tampermonkey.net.cn/ 李恒道QQ4548212 油猴中文网https://bbs.tampermonkey.net.cn/ ...
[油猴脚本开发指南]h5视频倍速,时间加速和run-at
转载自油猴中文网:bbs.tampermonkey.net.cn 李恒道QQ4548212 油猴中文网bbs.tampermonkey.net.cn TamperMonkey GreaseMonkey ...
Tampermonkey油猴脚本开发视频教程-3.脚本配置和权限申请UserScript
视频和代码https://www.toolchest.cn/static/mv3.html 脚本头部2个"// ==UserScript=="之间编写脚本相关的配置信息和权限申请等 ...
油猴脚本开发学习1--豌豆荚快速查看所有版本
文章目录 1.需求来源: 2.开发者工具开发: 3.油猴插件开发: 1).油猴学习: 2).可以自己找几个学习简单一下 3).我最终的脚本: 4).你可以选择新建 4.注意点: 1.油猴,run at ...
【javascript】油猴脚本开发整理
前言油猴脚本有挺多用处,这玩意不用审核,可以做点效率工具. 文档油猴官网油猴插件发布搜索商店油猴插件开发者文档谷歌防csp插件 vercel用于部署api或者js 开发开发简单的就直接上面 ...
Chrome插件与油猴脚本
Chrome插件与油猴脚本简介油猴脚本编写要点简介开发过Chrome插件的开发者,都会被Chrome插件的content,background(service),popup,inject 等各 ...
为了不手动命名驼峰变量名，我开发了一套油猴脚本...
前言你知道程序员最经常做的事是什么吗?是取变量名! 我们常规取变量名的方式是这样的,打开谷歌搜索或者有道搜索,输入变量的中文名,然后复制翻译结果,转到编译器改为驼峰命名,大致流程如下: 我个人对这种 ...

记录一次油猴脚本开发的Demo（入门级）、开发过程