油猴脚本-自己写的脚本,处理百度搜索结果(直链)

闲的太闲了花了一下午写的js脚本,说不上高大上吧,倒是学到了一些东西,也当作复习学习过的知识

直接上代码:

(function() {
    'use strict';
    var observe_dom = document.getElementById('wrapper_wrapper');
    var r_bg = "rgb(203, 240, 216)"; //护眼色
    var r_descstyle = "inline"; //结果条目描述-布局方式
    var r_cabstract = document.querySelectorAll(".c-abstract");//结果描述块
    var r_head_wrapper = document.getElementsByClassName("head_wrapper")[0];
    var r_result_logo = document.getElementById("result_logo");
    var r_head = document.getElementById("head");

    var r_MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
    var r_MutationObserverConfig={
        childList: true,
        subtree: true,
        characterData: true
    };
    var r_observer=new r_MutationObserver(function(mutations){
        restar_content();console.log("--R--");
    });
    r_observer.observe(observe_dom,r_MutationObserverConfig);

    async function restar_content() {
        console.log("restar_content runing...");
        document.getElementById("page").style.backgroundColor = r_bg;//页码

        var r_content_right = document.getElementById("content_right");
        var r_content_left = document.getElementById("content_left");
        r_result_logo?.remove(); //去logo
        //搜索栏修改
        r_head_wrapper.style.display = "flex";
        r_head_wrapper.style.justifyContent = "center";
        r_head_wrapper.style.backgroundColor = "rgba(203, 240, 216, 0.59)";
        document.querySelector(".wrapper_new .s_ipt_wr").style.border = "0";
        r_head.style.background = "transparent";

        //护眼
        document.getElementById('wrapper_wrapper').style.backgroundColor = r_bg;
        document.querySelector(".wrapper_new .s_form").style.backgroundColor = "rgba(203, 240, 216, 0.59)";
        document.querySelector(".wrapper_new #s_tab").style.backgroundColor = r_bg;
        document.querySelector("#foot").style.backgroundColor = r_bg;
        document.querySelector(".hint_PIwZX").style.color = "rgb(26, 104, 49)";

        //100%左边栏
        if(r_content_left==null){return;}
        if(r_content_right!=null&&r_content_right!=undefined){r_content_right.remove();}
        r_content_left.style.width = "100%";

        for (var item of r_content_left.children) {
            if (item.className.indexOf("result") >= 0) {
                //结果条目阴影
                item.style.width = "100%";
                item.style.marginBottom = "55px";
                item.style.boxShadow = "2px 3px 6px 0px rgba(117, 150, 255, 0.75)";
                item.style.padding = "15px";
                item.style.borderRadius = "8px";

                if (item.children[1] != undefined&&item.children[1].tagName!="STYLE") {
                    item.children[1].style.width = "100%";
                    if(item.children[1].className != "c-abstract"){ //结果描述块布局改行内
                        r_descstyle = "inline-flex";
                    }
                    item.children[1].style.display = r_descstyle;
                    if(item.children[1].children[1]!=undefined && item.children[1].children[1].tagName!="EM"){ //排除desc中的某些em标签
                        item.children[1].children[1].style.width = "100%";
                    }

                    //结果条目标题
                    if(item.firstChild.firstChild){
                        item.firstChild.firstChild.style.textDecoration = "none";
                        item.firstChild.firstChild.style.fontSize = "0.21rem";
                        item.firstChild.firstChild.style.fontWeight = "bold";
                        Array.prototype.slice.call(item.firstChild.firstChild.getElementsByTagName("em")).forEach((em_item,em_index)=>{ //结果条目标题-关键字样式化
                              em_item.style.color = "#367731";
                              em_item.style.textDecoration = "none";
                        });

                        /*标题获取真实链接*/
                        var yll_x = item.firstChild.firstChild.getBoundingClientRect().left+18;
                        var yll_y = item.firstChild.firstChild.getBoundingClientRect().top+10;
                        var evObj = document.createEvent('MouseEvents');
                        evObj.initMouseEvent('mousedown',true,true,window,1,yll_x,yll_y,yll_x,yll_y,false,false,false,false,2,null);//模拟右键元素
                        item.firstChild.firstChild.dispatchEvent(evObj);
                        var r_link = item.firstChild.firstChild.getAttribute("href");
                            r_link = r_link.replace("http://","https://");
                        await fetch(r_link, {credentials: 'same-origin',mode: 'cors',method: 'GET'})
                            .then(response => response.text())
                            .then(data => {
                                  var r_lmatch;
                                  if(r_lmatch = data.match(new RegExp("(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]"))){
                                     var r_nlink = r_lmatch[0].replace("http://","https://");
                                     item.firstChild.firstChild.setAttribute("href",r_nlink);
                                  }
                        });
                    }
                }
            }else{
                item.style.display = "none"; //除广告
            }

            if(item.lastChild.lastChild!=null&&item.lastChild.lastChild.innerText === "广告"){ //除广告
                item.style.display = "none";
            }
        }

        Array.prototype.slice.call(r_cabstract).forEach((item, index) => {item.style.fontSize = "0.18rem";});//结果描述块

        //页码更改
        document.getElementById("page").style.backgroundColor = r_bg;
    }
})();

有意思的是,我发现搜索结果的”假链接”别有用心.看下面我的经历?

起初我想到直接fetch这个假链接,通过解析返回的html文本去获取真实链接

比如我fetch这个http://www.baidu.com/link?url=DIna_EV2mFiXksNSTXrKwBIIPayOWt2SrDDFpzkoDHZ1cq0ifEI9YXZD5bj9taba

然后我发现当我右键这个搜索结果的标题时再把鼠标放上去发现链接变化成了http://www.baidu.com/link?url=DIna_EV2mFiXksNSTXrKwBIIPayOWt2SrDDFpzkoDHZ1cq0ifEI9YXZD5bj9taba&wd=&eqid=94bff485000174390000000661f3e114

再次fetch,成功返回

那么加下来的事情就简单了,使用正则获取链接并替换假链接

效果:

百度搜索结果