斗魚擴展-自動帶上牌子換彈幕顏色(三)

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

開始，創建一個paiziDm 的分支 git checkout -b paiziDm ，我們再寫代碼

1. js\BaseJs 目錄里，創建個RoomObj.js 用於寫入對象方法與 類方法(被其他js調用)。
2. js目錄里 創建paizidanmu.js，用於自動換上此房間相應的徽章。

 

下面來 分析思路

就是模擬點擊 換徽章 的過程，如果沒有當前房間的徽章,則不戴。

 

查看 徽章 區域的網頁元素，可知 class="fans-entrance" 的節點在網頁加載后，鼠標沒有進入該區域主動獲取牌子列表時就存在，所以我們要 構建出  這個節點 到完成點擊節點的 元素。先看 點擊 “未佩戴的”節點。

代碼很多，我只留下了必要節點

 

 <div class="fans-entrance" data-flag="medal-entrance-warp">
   <div class="entrance-content fans-badge-second" style="display: none;" data-flag="medal-info-warp">      
    <div class="entrance-select" data-flag="medal-list-warp">
     <div class="fans-has-badge nowear-badge" data-tag="fans-medal-item" data-flag="medal-take-off">
      <label class="radiobox">        
      </label>
     </div>
    </div>
   </div>
  </div>

 

 

這節我們從   <label class="radiobox">  逐步向上構建，然寫加入到  class="fans-entrance" 的節點內，為防止有代碼殘留，事后刪除構建的節點。

 復制，直接 在Console 中即可運行

 

if ($(".radiobox").length<=0 ) {
    var label =document.createElement("label");
    label.setAttribute("class","radiobox");
    var fansHasDiv =document.createElement("div");
    fansHasDiv.setAttribute("class","fans-has-badge nowear-badge");
    fansHasDiv.setAttribute("data-tag","fans-medal-item");
    fansHasDiv.setAttribute("data-flag","medal-take-off");
    fansHasDiv.appendChild(label);
    var entranceDiv =document.createElement("div");
    entranceDiv.setAttribute("class","entrance-select");
    entranceDiv.setAttribute("data-flag","medal-list-warp");
    entranceDiv.appendChild(fansHasDiv);
    var contentDiv =document.createElement("div");
    contentDiv.setAttribute("id","tempRemovePaizi");
    contentDiv.setAttribute("class","entrance-content fans-badge-second");
    contentDiv.setAttribute("style","display: none;");
    contentDiv.setAttribute("data-flag","medal-info-warp");
    contentDiv.appendChild(entranceDiv);
    document.getElementsByClassName("fans-entrance")[0].appendChild(contentDiv);  
}
document.getElementsByClassName("radiobox")[document.getElementsByClassName("radiobox").length-1].click();
document.getElementById("tempRemovePaizi").remove();

 

對於選中當前的牌子,怎么辦呢？？我們剛打開頁面時，出現了“立即佩戴”的 快捷按鈕

 

查下它的節點

<div class="fans-entrance" data-flag="medal-entrance-warp">
 <div class="entrance-tipswrap" data-action="medal-tip-warp" data-tip-type="ownerRoomMedalRemain" style="display: block;">
  <p>
    <a href="javascript:;" data-flag="medal-get-use" data-medal-rid="4476951" class="adornbtn">立即佩戴</a>      
 </div>
</div>

 

 

構建的代碼入下 不過，要注意data-medal-rid 其實就是房間id,

 

 先要獲取一下

 

var a =document.createElement("a");
        a.setAttribute("href","javascript:;");
        a.setAttribute("data-flag","medal-get-use");
        a.setAttribute("data-medal-rid",roomId);
        a.setAttribute("class","adornbtn");
        var p =document.createElement("p");
        p.appendChild(a);
        var tipswrapDiv =document.createElement("div");
        tipswrapDiv.setAttribute("id","tempAddPaizi");
        tipswrapDiv.setAttribute("class","entrance-tipswrap");
        tipswrapDiv.setAttribute("data-action","medal-tip-warp");
        tipswrapDiv.setAttribute("data-tip-type","ownerRoomMedalRemain");
        tipswrapDiv.setAttribute("style","display: block;");
        tipswrapDiv.appendChild(p);
        document.getElementsByClassName("fans-entrance")[0].appendChild(tipswrapDiv);
        document.getElementsByClassName("adornbtn")[0].click();
        document.getElementById("tempAddPaizi").remove();

 

 

怎么 獲取 roomId 呢？

$("link[rel='canonical']")[0].href,我們把它分割成數組。

var roomUrl = $("link[rel='canonical']")[0].href;
var roomUrlArr = roomUrl.split("/");

 

 

roomUrlArr[3]就是我們要的roomId，

 

這時，打開頁面只要先移除牌子，再戴上相應的牌子即可，如果沒有則佩戴失敗 為“不佩戴徽章” 

怎么 自動 切換 彈幕顏色呢？

 

 

 

這7種顏色  放在7個li元素里

$(".fans-barrage-list.clearfix li"); 獲取里7個li 元素，從后往前 遍歷class名，如果 包含 "fans-barrage-lock" ，則為能使用 的最高級顏色，但有時，沒有class,就會出現值為null,則要再加個判斷。

 

var danmuYs = $(".fans-barrage-list.clearfix li");
for (var i = danmuYs.length - 1; i >= 0; i--) {
    var liClass = danmuYs[i].getAttribute("class");
    if (liClass == null||liClass.indexOf("fans-barrage-lock") ==-1) {
        var divClass = danmuYs[i].childNodes[0].getAttribute("class");
        document.getElementsByClassName(divClass)[0].click();
        break;
    }    
}

 

 

 

則會 自動使用最高等級的 顏色 了。

 

好了，，思路與 代碼都有了，現在 寫入 相應文件中。

我把上面 的代碼 寫入RoomObj.js  ，然后在 paizidanmu,js 調用，

上代碼

 

 

manifest.json 修改要引用的文件

"content_scripts":[{

              "js": [

                     "js/BaseJs/jquery.min.js",

                     "js/BaseJs/RoomObj.js",                 

                     "js/removeRoom.js",

                     "js/paizidanmu.js",

                     "js/content_scripts.js"

              ],     //要注入的js

              。。。。。

}]

 

 

RoomObj.js  的代碼

function RoomObj() {
};
var roomObj = new RoomObj();
//獲取房間id
RoomObj.prototype.getRoomId=function () {
        var roomUrl = $("link[rel='canonical']")[0].href;
        var roomUrlArr = roomUrl.split("/");
        return roomUrlArr[3];
    };
//點擊"未佩戴"
RoomObj.prototype.removePaiZi=function () {
    if ($(".radiobox").length<=0 ) {
        var label =document.createElement("label");
        label.setAttribute("class","radiobox");
        var fansHasDiv =document.createElement("div");
        fansHasDiv.setAttribute("class","fans-has-badge nowear-badge");
        fansHasDiv.setAttribute("data-tag","fans-medal-item");
        fansHasDiv.setAttribute("data-flag","medal-take-off");
        fansHasDiv.appendChild(label);
        var entranceDiv =document.createElement("div");
        entranceDiv.setAttribute("class","entrance-select");
        entranceDiv.setAttribute("data-flag","medal-list-warp");
        entranceDiv.appendChild(fansHasDiv);
        var contentDiv =document.createElement("div");
        contentDiv.setAttribute("id","tempRemovePaizi");
        contentDiv.setAttribute("class","entrance-content fans-badge-second");
        contentDiv.setAttribute("style","display: none;");
        contentDiv.setAttribute("data-flag","medal-info-warp");
        contentDiv.appendChild(entranceDiv);
        document.getElementsByClassName("fans-entrance")[0].appendChild(contentDiv);  
    }
    document.getElementsByClassName("radiobox")[document.getElementsByClassName("radiobox").length-1].click();
    document.getElementById("tempRemovePaizi").remove();    
};

//點擊相應的牌子
RoomObj.prototype.addPaiZi=function (roomId) {
        var a =document.createElement("a");
        a.setAttribute("href","javascript:;");
        a.setAttribute("data-flag","medal-get-use");
        a.setAttribute("data-medal-rid",roomId);
        a.setAttribute("class","adornbtn");
        var p =document.createElement("p");
        p.appendChild(a);
        var tipswrapDiv =document.createElement("div");
        tipswrapDiv.setAttribute("id","tempAddPaizi");
        tipswrapDiv.setAttribute("class","entrance-tipswrap");
        tipswrapDiv.setAttribute("data-action","medal-tip-warp");
        tipswrapDiv.setAttribute("data-tip-type","ownerRoomMedalRemain");
        tipswrapDiv.setAttribute("style","display: block;");
        tipswrapDiv.appendChild(p);
        document.getElementsByClassName("fans-entrance")[0].appendChild(tipswrapDiv);
        document.getElementsByClassName("adornbtn")[0].click();
        document.getElementById("tempAddPaizi").remove();
};
//設置彈幕顏色
RoomObj.prototype.setDanMuYanSe=function () {
    var danmuYs = $(".fans-barrage-list.clearfix li");
    for (var i = danmuYs.length - 1; i >= 0; i--) {
        var liClass = danmuYs[i].getAttribute("class");
        if (liClass == null||liClass.indexOf("fans-barrage-lock") ==-1) {
            var divClass = danmuYs[i].childNodes[0].getAttribute("class");
            document.getElementsByClassName(divClass)[0].click();
            break;
        }    
    }
};


Paizidanmu.js 的代碼 
var roomId="";

function delayOnload() {
    roomObj.removePaiZi();
    var ss = setTimeout("roomObj.addPaiZi(roomId);", 2000);//與移除牌子設置下時間間隔
    roomObj.setDanMuYanSe();
        
};
window.onload=function(){
    roomId = roomObj.getRoomId();
    var delayOnloadTimer = setTimeout("delayOnload()", 1500);
};

 

 

 

然后 打開自己喜歡的 直播間，就會自動 帶牌子，彈幕顏色 也會切換啦。

 

更新 github上的代碼。