鬥魚擴展--移除廣告優化頁面(五)
阿新 • • 發佈：2018-08-04
obj idt 調用 tps 資源 .com reat 主播 margin
代碼可以在 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 };
我們發現，需要註入腳本都寫在了 頁面加載之後
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 });
修改完畢，同步 代碼。。。。。
鬥魚擴展--移除廣告優化頁面(五)