斗鱼扩展--移除广告优化页面(五)

代码可以在 https://pan.baidu.com/s/1uN120-18hvAzELpJCQfbXA  处下载

下面来 移除 广告元素,在js目录下,创建一个 removeAds.js， 用来移除网页中的广告元素

修改manifest.json 

"content_scripts":[{
        "js": [
            "js/BaseJs/jquery.min.js",
            "js/BaseJs/RoomObj.js",            
            "js/removeRoom.js",
            "js/paizidanmu.js",
            "js/removeAds.js",
            "js/content_scripts.js"
        ],    //要注入的js
        …
    }]

同时， 发现了一个问题，如果打开的是 https://www.douyu.com/g_wzry  符合，"matches": ["https://www.douyu.com/*"] 的规则，就会执行所有 注入的js脚本，但是jspaizidanmu.js  获取 roomId时，jsBaseJs的getRoomId 方法就会出错，所以try ..catch一下，

//获取房间id
    this.getRoomId = function () {
        try{
            var roomUrl = $("link[rel='canonical']")[0].href;
            var roomUrlArr = roomUrl.split("/");
            return roomUrlArr[3];
        }catch(err){
            return "";
        }        
    };

 

我们发现，需要注入脚本都写在了 页面加载之后 调用其他方法执行操作，这样，我们可发判断roomId 如果为空(不是直播房间页面)，则跳出，节省硬件资源，防止产生错误。

paizidanmu.js

window.onload=function(){
    roomId = roomObj.getRoomId();
    if (roomId =="") {return}
    …
};

 

removeAds.js 用来 移除 广告元素，每个人 都有自己的喜好，这里，我只是按自己的 喜好移除元素的，大家可 自行修改。有的元素加载慢，我用了 循环，循环10次后终止。

并添加了 3 个 按钮，用来提升 观看体验

1.隐藏显示头部信息

 

2.显示隐藏 排行榜，隐藏时，会获取更多的弹幕视野。

 

3.显示隐藏 直播公告 ,如果打开页面且直播公告为空，则自动 隐藏。

 

removeAds.js 完整代码 如下

var removeAdsIndex =0; 
function removeAds() {
    var removeAdsTimer=self.setInterval(function(){        
        if (removeAdsIndex>=10) {
            window.clearInterval(removeAdsTimer);
        }
        $("#left").remove();    //左边侧栏
        $(".recommendApp-cbeff7").remove();    //下载斗鱼APP
        $(".live-room-normal-left").remove();    //视频下方广告
        $(".yuba-group-active").remove();    //悬浮主播头像，小组动态
        $(".recording-wrap").remove();    //TA的视频
        $(".sq-wrap").remove();    //分享按钮
        $(".column.rec").remove();    //主播也爱看
        $(".ft-sign-cont").remove();    //任务区,网页游戏推广

        $(".showdanmu-f76338").click();    //关闭弹幕
        removeAdsIndex++;
    },1000);
};
//进行一些页面排版修改
function youhua() {
    $("#header").hide();    //隐藏头部
    setFont();
    $("#header").css("border-bottom-width","0px");
    $("#mainbody").css("margin-top","0px");    //"50px"
    $("#mainbody").css("padding-top","0px");    //"20px"
    // 视频    区域
    $("#anchor-info").css("border-top-width","0px");    //"1px"
    $("#anchor-info").css("border-left-width","0px");    //"1px"
    $("#anchor-info").css("border-right-width","0px");    //"1px"
    $("#anchor-info").css("border-bottom-width","0px");    //"1px"
    $("#anchor-info").css("margin-bottom","2px");    //"10px"
    //任务 、背包
    $("#js-stats-and-actions").css("padding-top","4px");    //"14px"
    $("#js-stats-and-actions").css("padding-bottom","2px");    //"7px"
    $("#js-live-room-normal-equal-right").css("margin-top","0px");    //"24px"
};

function delayInset() {
    //添加 排行on/off 按钮
    var span =document.createElement("span");
    span.innerHTML = "排行on";
    var ii =document.createElement("i");
    ii.setAttribute("class","icon");
    var a =document.createElement("a");
    a.setAttribute("href","javascript:;");
    a.setAttribute("id","fansRankId");
    a.appendChild(ii);
    a.appendChild(span);
    document.getElementsByClassName("chat-cls")[0].appendChild(a);
    document.getElementById("fansRankId").onclick = function(){
        var fansRan =$("#fansRankId span");
        if (fansRan.text() == "排行off") {
            fansRan.text("排行on");
            $("#js-fans-rank").show();    //粉丝贡献榜
            $("#js-chat-cont").css("top","217px");    //"217px"
        }else{
            fansRan.text("排行off");
            $("#js-fans-rank").hide();    //粉丝贡献榜
            $("#js-chat-cont").css("top","2px");    //"217px"
        }
    };

    //添加 隐藏显示头部信息 按钮
    var a =document.createElement("a");
    a.innerHTML = "隐藏头部信息";
    a.setAttribute("href","javascript:;");
    a.setAttribute("id","headInfoId");
    document.getElementsByClassName("r-else clearfix")[0].appendChild(a);
    document.getElementById("headInfoId").onclick = function(){
        setFont();
        var headInfo =$("#headInfoId");
        if (headInfo.text() == "显示头部信息") {
            headInfo.text("隐藏头部信息");
            $("#header").hide();    //隐藏头部
        }else{
            headInfo.text("显示头部信息");
            $("#header").show();    //隐藏头部
        }
    };

    //添加 onof  显示隐藏直播公告 按钮
    var a =document.createElement("a");
    a.innerHTML = "on";
    if ($(".column-cotent").text() =="") {
        $(".live-room-normal-right.fl").hide();    //直播公告
        a.innerHTML = "off";
    }
    a.setAttribute("href","javascript:;");
    a.setAttribute("id","roomAnnounceId");
    document.getElementById("js-shie-gift").appendChild(a);
    document.getElementById("roomAnnounceId").onclick = function(){
        var roomAnnounce =$("#roomAnnounceId");
        if (roomAnnounce.text() == "on") {
            roomAnnounce.text("off");
            $(".live-room-normal-right.fl").hide();
        }else{
            roomAnnounce.text("on");
            $(".live-room-normal-right.fl").show();
        }
    };
};
// 斗鱼的其他js，触发一些事件会修改回原来的字体样式,所以放在了点击状况信息时，修改一次字体
function setFont() {
    $(".cs-textarea").css("font-size","14px"); //文字输入区  字体
    $(".cs-textarea").css("font-weight","bold");//文字输入区  字体加粗
}
$(document).ready(function(){
    if (roomObj.getRoomId() =="") {
        return;
    }
    removeAds();
    var youhuaTimer=setTimeout("youhua()",3000);
    var delayInsetTimer = setTimeout("delayInset()", 2500);
});

 

修改完毕，同步 代码。。。。。