⽃鱼扩展-⾃动带上牌⼦换弹幕颜⾊（三）
开始，创建⼀个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" 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 中即可运⾏
1if ($(".radiobox").length<=0 ) {
2var label =ateElement("label");
3 label.setAttribute("class","radiobox");
4var fansHasDiv =ateElement("div");
5 fansHasDiv.setAttribute("class","fans-has-badge nowear-badge");
6 fansHasDiv.setAttribute("data-tag","fans-medal-item");
7 fansHasDiv.setAttribute("data-flag","medal-take-off");
8 fansHasDiv.appendChild(label);
9var entranceDiv =ateElement("div");
10 entranceDiv.setAttribute("class","entrance-select");
11 entranceDiv.setAttribute("data-flag","medal-list-warp");
12 entranceDiv.appendChild(fansHasDiv);
13var contentDiv =ateElement("div");
14 contentDiv.setAttribute("id","tempRemovePaizi");
15 contentDiv.setAttribute("class","entrance-content fans-badge-second");
16 contentDiv.setAttribute("style","display: none;");
17 contentDiv.setAttribute("data-flag","medal-info-warp");
18 contentDiv.appendChild(entranceDiv);
19 ElementsByClassName("fans-entrance")[0].appendChild(contentDiv);
20 }
ElementsByClassName("radiobox")[ElementsByClassName("radiobox").length-1].click();
ElementById("tempRemovePaizi").remove();
对于选中当前的牌⼦，怎么办呢？？我们刚打开页⾯时，出现了“⽴即佩戴”的快捷按钮
查下它的节点
<div class="fans-entrance" data-flag="medal-entrance-warp">
<div class="entrance-tipswrap" data-action="medal-tip-warp" data-tip-type="ownerRoomMedalRemain" >
<p>
<a href="javascript:;" data-flag="medal-get-use" data-medal-rid="4476951" class="adornbtn">⽴即佩戴</a>
</div>
</div>
构建的代码⼊下不过，要注意data-medal-rid 其实就是房间id,
先要获取⼀下
1var a =ateElement("a");
2 a.setAttribute("href","javascript:;");
3 a.setAttribute("data-flag","medal-get-use");
4 a.setAttribute("data-medal-rid",roomId);
5 a.setAttribute("class","adornbtn");
6var p =ateElement("p");
7 p.appendChild(a);
8var tipswrapDiv =ateElement("div");
9 tipswrapDiv.setAttribute("id","tempAddPaizi");
10 tipswrapDiv.setAttribute("class","entrance-tipswrap");
11 tipswrapDiv.setAttribute("data-action","medal-tip-warp");
12 tipswrapDiv.setAttribute("data-tip-type","ownerRoomMedalRemain");
13 tipswrapDiv.setAttribute("style","display: block;");
14 tipswrapDiv.appendChild(p);
15 ElementsByClassName("fans-entrance")[0].appendChild(tipswrapDiv);
16 ElementsByClassName("adornbtn")[0].click();
17 ElementById("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，则要再加个判断。
1var danmuYs = $(".fans-barrage-list.clearfix li");
2for (var i = danmuYs.length - 1; i >= 0; i--) {
3var liClass = danmuYs[i].getAttribute("class");
4if (liClass == null||liClass.indexOf("fans-barrage-lock") ==-1) {
5var divClass = danmuYs[i].childNodes[0].getAttribute("class");
6 ElementsByClassName(divClass)[0].click();
7break;
8 }
9 }
则会⾃动使⽤最⾼等级的颜⾊了。
好了，，思路与代码都有了，现在写⼊相应⽂件中。
我把上⾯的代码写⼊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 的代码
1function RoomObj() {
2 };
3var roomObj = new RoomObj();
4//获取房间id
5 RoomId=function () {
6var roomUrl = $("link[rel='canonical']")[0].href;
7var roomUrlArr = roomUrl.split("/");
8return roomUrlArr[3];
9 };
10//点击"未佩戴"
11 vePaiZi=function () {
12if ($(".radiobox").length<=0 ) {
13var label =ateElement("label");
14 label.setAttribute("class","radiobox");
15var fansHasDiv =ateElement("div");
16 fansHasDiv.setAttribute("class","fans-has-badge nowear-badge");
17 fansHasDiv.setAttribute("data-tag","fans-medal-item");
18 fansHasDiv.setAttribute("data-flag","medal-take-off");
19 fansHasDiv.appendChild(label);
20var entranceDiv =ateElement("div");
21 entranceDiv.setAttribute("class","entrance-select");
22 entranceDiv.setAttribute("data-flag","medal-list-warp");
23 entranceDiv.appendChild(fansHasDiv);
24var contentDiv =ateElement("div");
25 contentDiv.setAttribute("id","tempRemovePaizi");
26 contentDiv.setAttribute("class","entrance-content fans-badge-second");
27 contentDiv.setAttribute("style","display: none;");
28 contentDiv.setAttribute("data-flag","medal-info-warp");
29 contentDiv.appendChild(entranceDiv);
30 ElementsByClassName("fans-entrance")[0].appendChild(contentDiv);
31 }
32 ElementsByClassName("radiobox")[ElementsByClassName("radiobox").length-1].click();
33 ElementById("tempRemovePaizi").remove();
34 };
35
36//点击相应的牌⼦
37 RoomObj.prototype.addPaiZi=function (roomId) {
38var a =ateElement("a");
39 a.setAttribute("href","javascript:;");
40 a.setAttribute("data-flag","medal-get-use");
41 a.setAttribute("data-medal-rid",roomId);
42 a.setAttribute("class","adornbtn");
43var p =ateElement("p");
44 p.appendChild(a);
45var tipswrapDiv =ateElement("div");
46 tipswrapDiv.setAttribute("id","tempAddPaizi");
47 tipswrapDiv.setAttribute("class","entrance-tipswrap");
48 tipswrapDiv.setAttribute("data-action","medal-tip-warp");
49 tipswrapDiv.setAttribute("data-tip-type","ownerRoomMedalRemain");
50 tipswrapDiv.setAttribute("style","display: block;");
51 tipswrapDiv.appendChild(p);
52 ElementsByClassName("fans-entrance")[0].appendChild(tipswrapDiv);
53 ElementsByClassName("adornbtn")[0].click();
54 ElementById("tempAddPaizi").remove();
55 };
56//设置弹幕颜⾊
57 RoomObj.prototype.setDanMuYanSe=function () {
58var danmuYs = $(".fans-barrage-list.clearfix li");
59for (var i = danmuYs.length - 1; i >= 0; i--) {斗鱼弹幕暂时不能打开
60var liClass = danmuYs[i].getAttribute("class");
61if (liClass == null||liClass.indexOf("fans-barrage-lock") ==-1) {
62var divClass = danmuYs[i].childNodes[0].getAttribute("class");
63 ElementsByClassName(divClass)[0].click();
64break;
65 }
66 }
67 };
68
69
70 Paizidanmu.js 的代码
71var roomId="";
72
73function delayOnload() {
74 vePaiZi();
75var ss = setTimeout("roomObj.addPaiZi(roomId);", 2000);//与移除牌⼦设置下时间间隔
76 roomObj.setDanMuYanSe();
77
78 };
load=function(){
80 roomId = RoomId();
81var delayOnloadTimer = setTimeout("delayOnload()", 1500);
82 };
然后打开⾃⼰喜欢的直播间，就会⾃动带牌⼦，弹幕颜⾊也会切换啦。
更新 github上的代码。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论