油猴脚本 开发使用jquery 油猴脚本开发教程

记录一次开发油猴脚本的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;
    }
    `
    //通过这种方式引入自己定义的css
    GM_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';
        // 为了避免大文件影响用户体验，建议加loading
        xhr.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中正则的写法啊
两种啊

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

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