鬥魚擴展--移除廣告優化頁面(五)

代碼可以在 https://pan.baidu.com/s/1uN120-18hvAzELpJCQfbXA  處下載

下麵來 移除 廣告元素,在js目錄下,創建一個 removeAds.js， 用來移除網頁中的廣告元素

修改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         ],    //要註入的js
10         …
11     }]

同時， 發現了一個問題，如果打開的是 https://www.douyu.com/g_wzry  符合，"matches": ["https://www.douyu.com/*"] 的規則，就會執行所有 註入的js腳本，但是js\paizidanmu.js  獲取 roomId時，js\BaseJs的getRoomId 方法就會出錯，所以try ..catch一下，

 1 //獲取房間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     };

我們發現，需要註入腳本都寫在了 頁面載入之後 調用其他方法執行操作，這樣，我們可發判斷roomId 如果為空(不是直播房間頁面)，則跳出，節省硬體資源，防止產生錯誤。

paizidanmu.js

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

removeAds.js 用來 移除 廣告元素，每個人 都有自己的喜好，這裡，我只是按自己的 喜好移除元素的，大家可 自行修改。有的元素載入慢，我用了 迴圈，迴圈10次後終止。

並添加了 3 個 按鈕，用來提升 觀看體驗

1.隱藏\顯示頭部信息

2.顯示\隱藏 排行榜，隱藏時，會獲取更多的彈幕視野。

3.顯示\隱藏 直播公告 ,如果打開頁面且直播公告為空，則自動 隱藏。

removeAds.js 完整代碼 如下

  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();    //左邊側欄
  8         $(".recommendApp-cbeff7").remove();    //下載鬥魚APP
  9         $(".live-room-normal-left").remove();    //視頻下方廣告
 10         $(".yuba-group-active").remove();    //懸浮主播頭像，小組動態
 11         $(".recording-wrap").remove();    //TA的視頻
 12         $(".sq-wrap").remove();    //分享按鈕
 13         $(".column.rec").remove();    //主播也愛看
 14         $(".ft-sign-cont").remove();    //任務區,網頁游戲推廣
 15 
 16         $(".showdanmu-f76338").click();    //關閉彈幕
 17         removeAdsIndex++;
 18     },1000);
 19 };
 20 //進行一些頁面排版修改
 21 function youhua() {
 22     $("#header").hide();    //隱藏頭部
 23     setFont();
 24     $("#header").css("border-bottom-width","0px");
 25     $("#mainbody").css("margin-top","0px");    //"50px"
 26     $("#mainbody").css("padding-top","0px");    //"20px"
 27     // 視頻    區域
 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     //任務 、背包
 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     //添加 排行on/off 按鈕
 41     var span =document.createElement("span");
 42     span.innerHTML = "排行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() == "排行off") {
 54             fansRan.text("排行on");
 55             $("#js-fans-rank").show();    //粉絲貢獻榜
 56             $("#js-chat-cont").css("top","217px");    //"217px"
 57         }else{
 58             fansRan.text("排行off");
 59             $("#js-fans-rank").hide();    //粉絲貢獻榜
 60             $("#js-chat-cont").css("top","2px");    //"217px"
 61         }
 62     };
 63 
 64     //添加 隱藏\顯示頭部信息 按鈕
 65     var a =document.createElement("a");
 66     a.innerHTML = "隱藏頭部信息";
 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() == "顯示頭部信息") {
 74             headInfo.text("隱藏頭部信息");
 75             $("#header").hide();    //隱藏頭部
 76         }else{
 77             headInfo.text("顯示頭部信息");
 78             $("#header").show();    //隱藏頭部
 79         }
 80     };
 81 
 82     //添加 on\of  顯示\隱藏直播公告 按鈕
 83     var a =document.createElement("a");
 84     a.innerHTML = "on";
 85     if ($(".column-cotent").text() =="") {
 86         $(".live-room-normal-right.fl").hide();    //直播公告
 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 // 鬥魚的其他js，觸發一些事件會修改回原來的字體樣式,所以放在了點擊狀況信息時，修改一次字體
104 function setFont() {
105     $(".cs-textarea").css("font-size","14px"); //文字輸入區  字體
106     $(".cs-textarea").css("font-weight","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 });

修改完畢，同步 代碼。。。。。