Douyu expansion - remove ad optimization page (5)

The code can be https://pan.baidu.com/s/1uN120-18hvAzELpJCQfbXA Download

 

Next, remove the advertising elements. In the JS directory, create a removeAds.js to remove the advertising elements in the web page

Modify manifest.json

 1 "content_scripts":[{
 2         "js": [
 3             "js/BaseJs/jquery.min.js",
 4             "js/BaseJs/RoomObj.js",            
 5             "js/removeRoom.js",
 6             "js/paizidanmu.js",
 7             "js/removeAds.js",
 8             "js/content_scripts.js"
 9         ],    //Inject js
10         ...
11     }]

 

At the same time, a problem was found if https://www.douyu.com/g_wzry According to the rules of "matches": ["https://www.douyu.com/ *"], all injected JS scripts will be executed, but when js\paizidanmu.js gets the roomId, the getRoomId method of js\BaseJs will make an error, so try.. catch,

 1 //Get room id
 2     this.getRoomId = function () {
 3         try{
 4             var roomUrl = $("link[rel='canonical']")[0].href;
 5             var roomUrlArr = roomUrl.split("/");
 6             return roomUrlArr[3];
 7         }catch(err){
 8             return "";
 9         }        
10     };

 

 

We found that all the scripts to be injected are written after the page is loaded and other methods are called to perform operations. In this way, we can send a judgment that if the roomId is empty (not the live room page), it will jump out to save hardware resources and prevent errors.

paizidanmu.js

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

 

 

removeAds.js is used to remove advertising elements. Everyone has their own preferences. Here, I just remove the elements according to their own preferences. You can modify it yourself. Some elements load slowly. I used a loop, which ended 10 times later.

And added 3 buttons to enhance the viewing experience

1. Hide / show header information

 

 

 

2. Show / hide the leaderboard. When it is hidden, it will get more screen vision.

 

 

 

3. Show / hide the live announcement. If the page is opened and the live announcement is empty, it will be automatically hidden.

 

 

The complete code of removeAds.js is as follows

  1 var removeAdsIndex =0; 
  2 function removeAds() {
  3     var removeAdsTimer=self.setInterval(function(){        
  4         if (removeAdsIndex>=10) {
  5             window.clearInterval(removeAdsTimer);
  6         }
  7         $("#left").remove();    //Left side bar
  8         $(".recommendApp-cbeff7").remove();    //Download fighting fish APP
  9         $(".live-room-normal-left").remove();    //Advertisement below the video
 10         $(".yuba-group-active").remove();    //Head image of suspended anchor, group dynamics
 11         $(".recording-wrap").remove();    //TA Video
 12         $(".sq-wrap").remove();    //Share button
 13         $(".column.rec").remove();    //The anchor loves to watch
 14         $(".ft-sign-cont").remove();    //Mission area,Web game promotion
 15 
 16         $(".showdanmu-f76338").click();    //Closing barrage
 17         removeAdsIndex++;
 18     },1000);
 19 };
 20 //Make some page layout changes
 21 function youhua() {
 22     $("#header").hide();    //Hide head
 23     setFont();
 24     $("#header").css("border-bottom-width","0px");
 25     $("#mainbody").css("margin-top","0px");    //"50px"
 26     $("#mainbody").css("padding-top","0px");    //"20px"
 27     // video    region
 28     $("#anchor-info").css("border-top-width","0px");    //"1px"
 29     $("#anchor-info").css("border-left-width","0px");    //"1px"
 30     $("#anchor-info").css("border-right-width","0px");    //"1px"
 31     $("#anchor-info").css("border-bottom-width","0px");    //"1px"
 32     $("#anchor-info").css("margin-bottom","2px");    //"10px"
 33     //Mission, backpack
 34     $("#js-stats-and-actions").css("padding-top","4px");    //"14px"
 35     $("#js-stats-and-actions").css("padding-bottom","2px");    //"7px"
 36     $("#js-live-room-normal-equal-right").css("margin-top","0px");    //"24px"
 37 };
 38 
 39 function delayInset() {
 40     //Add ranking on/off Button
 41     var span =document.createElement("span");
 42     span.innerHTML = "Ranking on";
 43     var ii =document.createElement("i");
 44     ii.setAttribute("class","icon");
 45     var a =document.createElement("a");
 46     a.setAttribute("href","javascript:;");
 47     a.setAttribute("id","fansRankId");
 48     a.appendChild(ii);
 49     a.appendChild(span);
 50     document.getElementsByClassName("chat-cls")[0].appendChild(a);
 51     document.getElementById("fansRankId").onclick = function(){
 52         var fansRan =$("#fansRankId span");
 53         if (fansRan.text() == "Ranking off") {
 54             fansRan.text("Ranking on");
 55             $("#js-fans-rank").show();    //Fan contribution list
 56             $("#js-chat-cont").css("top","217px");    //"217px"
 57         }else{
 58             fansRan.text("Ranking off");
 59             $("#js-fans-rank").hide();    //Fan contribution list
 60             $("#js-chat-cont").css("top","2px");    //"217px"
 61         }
 62     };
 63 
 64     //Add hide\Display header information button
 65     var a =document.createElement("a");
 66     a.innerHTML = "Hide header information";
 67     a.setAttribute("href","javascript:;");
 68     a.setAttribute("id","headInfoId");
 69     document.getElementsByClassName("r-else clearfix")[0].appendChild(a);
 70     document.getElementById("headInfoId").onclick = function(){
 71         setFont();
 72         var headInfo =$("#headInfoId");
 73         if (headInfo.text() == "Display header information") {
 74             headInfo.text("Hide header information");
 75             $("#header").hide();    //Hide head
 76         }else{
 77             headInfo.text("Display header information");
 78             $("#header").show();    //Hide head
 79         }
 80     };
 81 
 82     //Add to on\of  display\Hide live announcement button
 83     var a =document.createElement("a");
 84     a.innerHTML = "on";
 85     if ($(".column-cotent").text() =="") {
 86         $(".live-room-normal-right.fl").hide();    //Live broadcast announcement
 87         a.innerHTML = "off";
 88     }
 89     a.setAttribute("href","javascript:;");
 90     a.setAttribute("id","roomAnnounceId");
 91     document.getElementById("js-shie-gift").appendChild(a);
 92     document.getElementById("roomAnnounceId").onclick = function(){
 93         var roomAnnounce =$("#roomAnnounceId");
 94         if (roomAnnounce.text() == "on") {
 95             roomAnnounce.text("off");
 96             $(".live-room-normal-right.fl").hide();
 97         }else{
 98             roomAnnounce.text("on");
 99             $(".live-room-normal-right.fl").show();
100         }
101     };
102 };
103 // Fish fighting others js,Triggering some events will change back to the original font style,So when clicking the status information, the font is modified once
104 function setFont() {
105     $(".cs-textarea").css("font-size","14px"); //Text input area font
106     $(".cs-textarea").css("font-weight","bold");//Text input area font bold
107 }
108 $(document).ready(function(){
109     if (roomObj.getRoomId() =="") {
110         return;
111     }
112     removeAds();
113     var youhuaTimer=setTimeout("youhua()",3000);
114     var delayInsetTimer = setTimeout("delayInset()", 2500);
115 });

 

 

 

After modification, synchronize the code.....

Tags: Javascript JSON JQuery

Posted on Thu, 09 Jan 2020 11:58:25 -0800 by JohnResig