// ==UserScript== // @name 哔哩哔哩（B站）评论区显示楼层 // @description （2022/06可用）bilibili哔哩哔哩网页端视频、番剧、动态等页面显示评论区楼层与楼中楼楼层，理论兼容Bilibill Evolved // @author lchzh3473 , Modify by Tinhone // @namespace Original by lchzh3473 , Modify by Tinhone // @license GPL-3.0 // @version 1.7.0 // @icon https://app.bilibili.com/favicon.ico // @grant none // @compatible firefox V70+ // @compatible edge V70+ // @compatible chrome V70+ // @match *://www.bilibili.com/video/* // @match *://www.bilibili.com/read/cv* // @match *://www.bilibili.com/bangumi/play/* // @match *://t.bilibili.com/* // @match *://space.bilibili.com/* // @match *://workshop.bilibili.com/illust/* // @match *://workshop.bilibili.com/live2d/* // @exclude *://t.bilibili.com/ // @run-at document-end // @downloadURL none // ==/UserScript== (function() { //代码看起来长，实际上只是一个功能对于四个页面的分别适配，看if (whichPage=="0")这一段就可以大概理解整个脚本了(～￣▽￣)～ 'use strict'; const newVideoPageV1="html.elegant-scrollbar body.harmony-font.header-v2.win.round-corner.simplify-comment.always-show-duration div#app.app-v1" //新版视频页版本一特征 const newVideoPageV2="html body.harmony-font.header-v2.win div#app.app-v1" //新版视频页版本二特征 const oldVideoPage=".comment-m .common .b-head" //旧版视频页特征 const workshopLive2dPage="div.live2d div.container div.left div.comment-area div.bb-comment div.comment-header div.tabs-order ul.clearfix" //创意工坊live2d页面特征 const workshopIllustPage="div.illust div.container div.left div.comment-area div.bb-comment div.comment-header div.tabs-order ul.clearfix" //创意工坊插画页面特征 //新版视频页版本一总楼层数，VP=VideoPage const newVPReplyV1Counts1="div#comment.comment-m-v1 div.comment div.bb-comment div.comment-header.clearfix div.tabs-order ul.clearfix:not(.e)" const newVPReplyV1Counts2="div#comment.comment-m-v1 div.comment div.bb-comment div.comment-header.clearfix div.tabs-order ul.clearfix.e" //新版视频页版本二总楼层数 const newVPReplyV2Counts1="div#comment.comment-m-v1 div.comment div.bili-comment.browser-pc div.reply-header div.reply-navigation ul.nav-bar li.nav-title:not(.e)" const newVPReplyV2Counts2="div#comment.comment-m-v1 div.comment div.bili-comment.browser-pc div.reply-header div.reply-navigation ul.nav-bar li.nav-title.e" //旧版视频页总楼层数 const oldVPReplyCounts1=".comment-m .common .b-head:not(.e)" const oldVPReplyCounts2=".comment-m .common .b-head.e" //创意工坊live2d页面总楼层数，WLP=workshopLive2dPage const WLPReplyCounts1="div.live2d div.container div.left div.comment-area div.bb-comment div.comment-header div.tabs-order ul.clearfix:not(.e)" const WLPReplyCounts2="div.live2d div.container div.left div.comment-area div.bb-comment div.comment-header div.tabs-order ul.clearfix.e" //创意工坊插画页面总楼层数，WIP=workshopIllustPage const WIPReplyCounts1="div.illust div.container div.left div.comment-area div.bb-comment div.comment-header div.tabs-order ul.clearfix:not(.e)" const WIPReplyCounts2="div.illust div.container div.left div.comment-area div.bb-comment div.comment-header div.tabs-order ul.clearfix.e" var oldVPObserverOpening=false //旧版视频页观察器是否打开 var newVPObserverOpening=false //新版视频页观察器是否打开 var WLPObserverOpening=false //创意工坊live2d页面观察器是否打开 var WIPObserverOpening=false //创意工坊插画页面观察器是否打开 var okokok=false setInterval(() => { var whichPage="0" //0=旧版视频页，1=新版视频页，2=创意工坊live2d页面，3=创意工坊插画页面 if (document.querySelector(newVideoPageV1)){ whichPage="1" } if (document.querySelector(newVideoPageV2)){ whichPage="2" } if (document.querySelector(workshopLive2dPage)){ whichPage="3" } if (document.querySelector(workshopIllustPage)){ whichPage="4" } if (whichPage=="0"){ const replyBtn=".reply.btn-hover:not(.b)" //排除已被 b class包含的元素 const separateReply1=".list-item.reply-wrap:not(.a)" //寻找相应属性的div 有独立楼层非楼中楼的回复 const separateReply2=".list-item.reply-wrap.c" const floorInFloor1=".list-item.reply-wrap.c .con .reply-box .reply-item.reply-wrap" //楼中楼 const floorInFloor2=".list-item.reply-wrap.c .con .reply-box .reply-item.reply-wrap:not(.d)" const replyOperation=".operation.more-operation .opera-list ul:not(.b)" //评论旁边的三个点 //e代表视频总楼层数已准备完成 //f代表出现切换 按xx排序 的操作，但还没刷新楼层数 //g代表总楼层数的li，特殊标识，方便操作 //===在视频页面显示总楼层数=== if (document.querySelector(oldVPReplyCounts1)){ const owo1=document.querySelector(oldVPReplyCounts1) owo1.classList.add("e") const contains=owo1.classList.contains("f") //返回布尔值，判断指定的类名是否存在 owo1.classList.remove("f") const xhr1=new XMLHttpRequest() //获取最新评论 xhr1.open("get",`//api.bilibili.com/x/v2/reply/main?type=1&oid=${window.aid}&mode=2`) xhr1.responseType="json" xhr1.withCredentials=true xhr1.send() xhr1.onload=()=>{ const owowowo1=xhr1.response.data.replies[0].rpid const xhr2=new XMLHttpRequest() //获取最新评论的楼层 xhr2.open("get",`//api.bilibili.com/x/v2/reply/info?type=12&oid=1&rpid=${owowowo1}`) xhr2.responseType="json" xhr2.withCredentials=true xhr2.send() xhr2.onload=()=>{ const owowowo2=xhr2.response.data.floor if (contains==true){ //如果总楼层数已显示，则改为替换数字，否则创建新的 const owowo1change=owo1.querySelector(".g") owowo1change.innerHTML=`${owowowo2}` } else{ const owowo1=document.createElement("span") const owowo2=document.createElement("span") owowo1.innerHTML=`${owowowo2}` owowo2.innerHTML="楼" owowo1.setAttribute("style","margin-left: 17px;margin-right: 3px;font-size: 80%;color:#424242") owowo2.setAttribute("style","font-size: 90%;color:#424242") owowo1.classList.add("g") owo1.appendChild(owowo1) owo1.appendChild(owowo2) } } } } //===end=== //===设置 回复 按钮样式=== if(document.querySelector(replyBtn)){ for(const i1 of document.querySelectorAll(replyBtn)){ i1.setAttribute("style","height:16px !important;padding-top:2px !important;padding-bottom:2px !important") i1.classList.add("b") } } //===end=== //===显示 显示楼中楼 按钮 && 显示独立非楼中楼评论楼层=== if (document.querySelector(separateReply1)) { //显示 显示楼中楼 按钮，以及对应功能 for (const i2 of document.querySelectorAll(separateReply1)){ if (i2.querySelector(replyOperation)){ const i2_1=i2.querySelector(replyOperation) const li=document.createElement("li"); li.setAttribute("class","fif") //fif=floor-in-floor li.addEventListener("click",(()=>{ //点击事件 i2.classList.add("c") })) li.innerHTML="楼中楼楼层" i2_1.appendChild(li) i2_1.classList.add("b") } } //显示楼层 for (const i3 of document.querySelectorAll(separateReply1)) { i3.classList.add("a"); const qwq = i3.querySelector(".info"); const xhr = new XMLHttpRequest(); //xhr.open("get", `//api.bilibili.com/x/v2/reply/detail?type=12&oid=1&root=${i.attributes["data-id"].value}`); //另一个api接口，可用 xhr.open("get", `//api.bilibili.com/x/v2/reply/info?type=12&oid=1&rpid=${i3.attributes["data-id"].value}`); xhr.responseType = "json"; xhr.withCredentials = true; xhr.send(); xhr.onload = () => { const data = xhr.response.data.floor const qwqwq = document.createElement("span"); qwqwq.setAttribute("style","height:16px;margin-right:14px"); qwqwq.innerHTML = `#${data}`; qwq.insertBefore(qwqwq,qwq.childNodes[3]) //加在div info里的第三位 } } } //===end=== //===赋予 楼中楼楼层 按钮功能，即显示楼中楼楼层=== if (document.querySelector(floorInFloor1)){ for (const i4 of document.querySelectorAll(separateReply2)){ const i4_2=i4.querySelectorAll(floorInFloor2) for (const i4_2_1 of i4_2){ const i4_2_1_1=i4_2_1.querySelector(".info") i4_2_1.classList.add("d") const xhr=new XMLHttpRequest() xhr.open("get",`//api.bilibili.com/x/v2/reply/info?type=12&oid=1&rpid=${i4_2_1.attributes["data-id"].value}`) xhr.responseType="json" xhr.withCredentials=true xhr.send() xhr.onload=()=>{ const data=xhr.response.data.floor const span=document.createElement("span") span.setAttribute("style","height:16px;margin-right:14px") span.innerHTML=`#${data}` i4_2_1_1.appendChild(span) i4_2_1_1.insertBefore(span,i4_2_1_1.childNodes[3]) } } } } //===end=== //===侦测 按热度排序 li，出现变动就改变replyCounts的class，做到和评论总数同步的刷新=== if (document.querySelector(".tabs-order .clearfix .hot-sort") && oldVPObserverOpening==false){ //observer仅需开启一次，过多的开启会拖累性能，脚本的每次循环不会重置observer const observerTarget=document.querySelector(".tabs-order .clearfix .hot-sort") const observerConfig={attributes: true,childList: true,subtree: true,classList:true} const observerCallback=()=>{ if (document.querySelector(oldVPReplyCounts2)){ var RCChangeClass=document.querySelector(oldVPReplyCounts2) //RCChangeClass=replyCountsChangeClass RCChangeClass.classList.remove("e") RCChangeClass.classList.add("f") } } const observer=new MutationObserver(observerCallback) //创建一个观察器并传入回调参数 observer.observe(observerTarget,observerConfig) //以这两个配置开始观察 oldVPObserverOpening=true } //===end=== } //# //= //# //= //# if (whichPage=="1"){ const replyBtn=".reply.btn-hover:not(.b)" //排除已被 b class包含的元素 const separateReply1=".list-item.reply-wrap:not(.a)" //寻找相应属性的div 有独立楼层非楼中楼的回复 const separateReply2=".list-item.reply-wrap.c" const floorInFloor1=".list-item.reply-wrap.c .con .reply-box .reply-item.reply-wrap" //楼中楼 const floorInFloor2=".list-item.reply-wrap.c .con .reply-box .reply-item.reply-wrap:not(.d)" const replyOperation=".operation.more-operation .opera-list ul:not(.b)" //评论旁边的三个点 //e代表视频总楼层数已准备完成 //f代表出现切换 按xx排序 的操作，但还没刷新楼层数 //g代表总楼层数的li，特殊标识，方便操作 //===在视频页面显示总楼层数=== if (document.querySelector(newVPReplyV1Counts1)){ const owo1=document.querySelector(newVPReplyV1Counts1) owo1.classList.add("e") const contains=owo1.classList.contains("f") //返回布尔值，判断指定的类名是否存在 owo1.classList.remove("f") const xhr1=new XMLHttpRequest() //获取最新评论 xhr1.open("get",`//api.bilibili.com/x/v2/reply/main?type=1&oid=${window.aid}&mode=2`) xhr1.responseType="json" xhr1.withCredentials=true xhr1.send() xhr1.onload=()=>{ const owowowo1=xhr1.response.data.replies[0].rpid const xhr2=new XMLHttpRequest() //获取最新评论的楼层 xhr2.open("get",`//api.bilibili.com/x/v2/reply/info?type=12&oid=1&rpid=${owowowo1}`) xhr2.responseType="json" xhr2.withCredentials=true xhr2.send() xhr2.onload=()=>{ const owowowo2=xhr2.response.data.floor if (contains==true){ //如果总楼层数已显示，则改为替换数字，否则创建新的 const owowo1change=owo1.querySelector(".g") owowo1change.innerHTML=`${owowowo2}` } else{ var style1=window.getComputedStyle(document.querySelector(".tabs-order .clearfix .default-sort:not(owo)")) //读取最终样式，包括内联样式、嵌入样式和外部样式 var style2=window.getComputedStyle(document.querySelector(".tabs-order .clearfix .total-reply:not(owo)")) const owowo1=document.createElement("li") const owowo2=document.createElement("li") owowo1.innerHTML="楼层" owowo2.innerHTML=`${owowowo2}` owowo2.setAttribute("style",`height:${style2.height}; margin-right:${style2.marginRight}; line-height:${style2.lineHeight}; font-size:${style2.fontSize}; color:${style2.color}`) owowo1.classList.add("default-sort") //为设置网站自带css owowo2.classList.add("default-sort") //设置成这个class是因为设置成其他的都会出问题，并非为了设置网站自带css owowo1.classList.add("owo") owowo2.classList.add("owo") owowo2.classList.add("g") owo1.insertBefore(owowo1,owo1.childNodes[2]) //向列表中指定位置插入一个项目 owo1.insertBefore(owowo2,owo1.childNodes[3]) document.querySelector("li.total-reply:not(.owo)").setAttribute("style","margin-right: 20px") } } } } //===end=== //===显示 显示楼中楼 按钮 && 显示独立非楼中楼评论楼层=== if (document.querySelector(separateReply1)) { //显示 显示楼中楼 按钮，以及对应功能 for (const i2 of document.querySelectorAll(separateReply1)){ if (i2.querySelector(replyOperation)){ const i2_1=i2.querySelector(replyOperation) const li=document.createElement("li"); li.setAttribute("class","fif") //fif=floor-in-floor li.addEventListener("click",(()=>{ //点击事件 i2.classList.add("c") })) li.innerHTML="楼中楼楼层" i2_1.appendChild(li) i2_1.classList.add("b") } } //显示楼层 const spanHeight=window.getComputedStyle(document.querySelector("div.con div.info span.like span")).lineHeight //在没有文本的时候height会为0，所以用line-height for (const i3 of document.querySelectorAll(separateReply1)) { i3.classList.add("a"); const qwq = i3.querySelector(".info"); const xhr = new XMLHttpRequest(); xhr.open("get", `//api.bilibili.com/x/v2/reply/info?type=12&oid=1&rpid=${i3.attributes["data-id"].value}`); xhr.responseType = "json"; xhr.withCredentials = true; xhr.send(); xhr.onload = () => { const data = xhr.response.data.floor const qwqwq = document.createElement("span"); qwqwq.setAttribute("style",`height:${spanHeight}; margin-right:16px;`); qwqwq.innerHTML = `#${data}`; qwq.insertBefore(qwqwq,qwq.childNodes[3]) //加在div info里的第三位 } } } //===end=== //===赋予 楼中楼楼层 按钮功能，即显示楼中楼楼层=== if (document.querySelector(floorInFloor1)){ const FIFSpanHeight=window.getComputedStyle(document.querySelector("div.reply-box div.reply-item.reply-wrap div.info span.like span")).lineHeight for (const i4 of document.querySelectorAll(separateReply2)){ const i4_2=i4.querySelectorAll(floorInFloor2) for (const i4_2_1 of i4_2){ const i4_2_1_1=i4_2_1.querySelector(".info") i4_2_1.classList.add("d") const xhr=new XMLHttpRequest() xhr.open("get",`//api.bilibili.com/x/v2/reply/info?type=12&oid=1&rpid=${i4_2_1.attributes["data-id"].value}`) xhr.responseType="json" xhr.withCredentials=true xhr.send() xhr.onload=()=>{ const data=xhr.response.data.floor const span=document.createElement("span") span.setAttribute("style",`height:${FIFSpanHeight}; margin-right:16px;`) span.innerHTML=`#${data}` i4_2_1_1.insertBefore(span,i4_2_1_1.childNodes[3]) } } } } //===end=== //===侦测 最热 li，出现变动就改变replyCounts的class，做到和评论总数同步的刷新=== if (document.querySelector(".tabs-order .clearfix .hot-sort") && newVPObserverOpening==false){ //observer仅需开启一次，过多的开启会拖累性能，脚本的每次循环不会重置observer const observerTarget=document.querySelector(".tabs-order .clearfix .hot-sort") const observerConfig={attributes: true,childList: true,subtree: true,classList:true} const observerCallback=()=>{ if (document.querySelector(newVPReplyV1Counts2)){ var RCChangeClass=document.querySelector(newVPReplyV1Counts2) //RCChangeClass=replyCountsChangeClass RCChangeClass.classList.remove("e") RCChangeClass.classList.add("f") } } const observer=new MutationObserver(observerCallback) //创建一个观察器并传入回调参数 observer.observe(observerTarget,observerConfig) //以这两个配置开始观察 newVPObserverOpening=true } //===end=== } //# //= //# //= //# if (whichPage=="2"){ const replyBtn=".reply.btn-hover:not(.b)" //排除已被 b class包含的元素 const separateReply1="div.reply-list div.reply-item:not(.a)" //寻找相应属性的div 有独立楼层非楼中楼的回复 const separateReply2="div.reply-list div.reply-item.c" const separateReply3="div.reply-list div.reply-item" const floorInFloor1="div.reply-warp div.reply-list div.reply-item div.content-warp div.sub-reply-list div.sub-reply-item" //楼中楼 const floorInFloor2="div.reply-warp div.reply-list div.reply-item div.content-warp div.sub-reply-list div.sub-reply-item:not(.d)" const replyOperation="div.reply-operation-warp div.reply-operation ul.operation-list:not(.b)" //评论旁边的三个点 //e代表视频总楼层数已准备完成 //f代表出现切换 按xx排序 的操作，但还没刷新楼层数 //g代表总楼层数的li，特殊标识，方便操作 //===在视频页面显示总楼层数=== if (document.querySelector(newVPReplyV2Counts1)){ const owo1=document.querySelector(newVPReplyV2Counts1) owo1.classList.add("e") const contains=owo1.classList.contains("f") //返回布尔值，判断指定的类名是否存在 owo1.classList.remove("f") const xhr1=new XMLHttpRequest() //获取最新评论 xhr1.open("get",`//api.bilibili.com/x/v2/reply/main?type=1&oid=${window.aid}&mode=2`) xhr1.responseType="json" xhr1.withCredentials=true xhr1.send() xhr1.onload=()=>{ const owowowo1=xhr1.response.data.replies[0].rpid const xhr2=new XMLHttpRequest() //获取最新评论的楼层 xhr2.open("get",`//api.bilibili.com/x/v2/reply/info?type=12&oid=1&rpid=${owowowo1}`) xhr2.responseType="json" xhr2.withCredentials=true xhr2.send() xhr2.onload=()=>{ const owowowo2=xhr2.response.data.floor if (contains==true){ //如果总楼层数已显示，则改为替换数字，否则创建新的 const owowo1change=owo1.querySelector(".g") owowo1change.innerHTML=`${owowowo2}` } else{ var style1=window.getComputedStyle(document.querySelector("div.reply-navigation ul.nav-bar li.nav-title.e span.nav-title-text:not(owo)")) //读取最终样式，包括内联样式、嵌入样式和外部样式 var style2=window.getComputedStyle(document.querySelector("div.reply-navigation ul.nav-bar li.nav-title.e span.total-reply:not(owo)")) const owowo1=document.createElement("span") const owowo2=document.createElement("span") owowo1.innerHTML="楼层" owowo2.innerHTML=`${owowowo2}` owowo1.setAttribute("style",`height:${style1.height};margin-left:${style1.marginLeft};margin-right:${style1.marginRight};line-height:${style1.lineHeight};font-family:${style1.fontFamily};font-size:100%;font-weight:${style1.fontWeight};color:${style1.color}`) owowo2.setAttribute("style",`height:${style2.height};margin-left:${style2.marginLeft};margin-right:${style2.marginRight};line-height:${style2.lineHeight};font-family:${style2.fontFamily};font-size:${style2.fontSize};font-weight:${style2.fontWeight};color:${style2.color}`) owowo1.classList.add("owo") owowo2.classList.add("owo") owowo2.classList.add("g") owo1.insertBefore(owowo1,owo1.childNodes[2]) //向列表中指定位置插入一个项目 owo1.insertBefore(owowo2,owo1.childNodes[3]) document.querySelector("div.reply-navigation ul.nav-bar li.nav-title.e span.total-reply:not(.owo)").setAttribute("style","margin-right: 22px") } } } } //===end=== //===显示独立非楼中楼评论楼层=== if (document.querySelector(separateReply3)) { //显示楼层 const spanHeight=window.getComputedStyle(document.querySelector("div.content-warp div.root-reply div.reply-info span.reply-like")).lineHeight //在没有文本的时候height会为0，所以用line-height for (const i3 of document.querySelectorAll(separateReply1)) { i3.classList.add("a"); const qwq = i3.querySelector(".reply-info"); const xhr = new XMLHttpRequest(); xhr.open("get", `//api.bilibili.com/x/v2/reply/info?type=12&oid=1&rpid=${i3.querySelector(".root-reply-avatar").attributes["data-root-reply-id"].value}`); xhr.responseType = "json"; xhr.withCredentials = true; xhr.send(); xhr.onload = () => { const data = xhr.response.data.floor const qwqwq = document.createElement("span"); qwqwq.setAttribute("style",`height:${spanHeight};margin-right:22px`); qwqwq.innerHTML = `#${data}`; qwq.insertBefore(qwqwq,qwq.childNodes[4]) //加在div info里的第四位 } } } //===end=== //===侦测 最热 div，出现变动就改变replyCounts的class，做到和评论总数同步的刷新=== if (document.querySelector("div.reply-navigation ul.nav-bar li.nav-sort") && newVPObserverOpening==false){ //observer仅需开启一次，过多的开启会拖累性能，脚本的每次循环不会重置observer const observerTarget=document.querySelector("div.reply-navigation ul.nav-bar li.nav-sort") const observerConfig={attributes: true,childList: true,subtree: true,classList:true} const observerCallback=()=>{ if (document.querySelector(newVPReplyV2Counts2)){ var RCChangeClass=document.querySelector(newVPReplyV2Counts2) //RCChangeClass=replyCountsChangeClass RCChangeClass.classList.remove("e") RCChangeClass.classList.add("f") } } const observer=new MutationObserver(observerCallback) //创建一个观察器并传入回调参数 observer.observe(observerTarget,observerConfig) //以这两个配置开始观察 newVPObserverOpening=true } //===end=== } //# //= //# //= //# if (whichPage=="3"){ const replyBtn=".reply.btn-hover:not(.b)" //排除已被 b class包含的元素 const separateReply1=".list-item.reply-wrap:not(.a)" //寻找相应属性的div 有独立楼层非楼中楼的回复 const separateReply2=".list-item.reply-wrap.c" const floorInFloor1=".list-item.reply-wrap.c .con .reply-box .reply-item.reply-wrap" //楼中楼 const floorInFloor2=".list-item.reply-wrap.c .con .reply-box .reply-item.reply-wrap:not(.d)" const replyOperation=".operation.more-operation .opera-list ul:not(.b)" //评论旁边的三个点 //e代表视频总楼层数已准备完成 //f代表出现切换 按xx排序 的操作，但还没刷新楼层数 //g代表总楼层数的li，特殊标识，方便操作 //===在页面显示总楼层数=== if (document.querySelector(WLPReplyCounts1)){ const owo1=document.querySelector(WLPReplyCounts1) owo1.classList.add("e") const contains=owo1.classList.contains("f") //返回布尔值，判断指定的类名是否存在 owo1.classList.remove("f") const xhr1=new XMLHttpRequest() //获取最新评论 xhr1.open("get",`//api.bilibili.com/x/v2/reply/main?type=42&oid=${window.location.pathname.split("/")[2]}&mode=2`) //获取url的文件名，以/为界分割，用最后一个，即oid xhr1.responseType="json" xhr1.withCredentials=true xhr1.send() xhr1.onload=()=>{ const owowowo1=xhr1.response.data.replies[0].rpid const xhr2=new XMLHttpRequest() //获取最新评论的楼层 xhr2.open("get",`//api.bilibili.com/x/v2/reply/info?type=12&oid=1&rpid=${owowowo1}`) xhr2.responseType="json" xhr2.withCredentials=true xhr2.send() xhr2.onload=()=>{ const owowowo2=xhr2.response.data.floor if (contains==true){ //如果总楼层数已显示，则改为替换数字，否则创建新的 const owowo1change=owo1.querySelector(".g") owowo1change.innerHTML=`${owowowo2}` } else{ var style1=window.getComputedStyle(document.querySelector(".tabs-order .clearfix .default-sort:not(owo)")) //读取最终样式，包括内联样式、嵌入样式和外部样式 var style2=window.getComputedStyle(document.querySelector(".tabs-order .clearfix .total-reply:not(owo)")) const owowo1=document.createElement("li") const owowo2=document.createElement("li") owowo1.innerHTML="楼层" owowo2.innerHTML=`${owowowo2}` owowo2.setAttribute("style",`height:${style2.height};margin-right:${style2.marginRight};line-height:${style2.lineHeight};font-size:${style2.fontSize};color:${style2.color}`) owowo1.classList.add("default-sort") //为设置网站自带css owowo2.classList.add("default-sort") //设置成这个class是因为设置成其他的都会出问题，并非为了设置网站自带css owowo1.classList.add("owo") owowo2.classList.add("owo") owowo2.classList.add("g") owo1.insertBefore(owowo1,owo1.childNodes[2]) //向列表中指定位置插入一个项目 owo1.insertBefore(owowo2,owo1.childNodes[3]) document.querySelector("li.total-reply:not(.owo)").setAttribute("style","margin-right: 20px") } } } } //===end=== //===显示 显示楼中楼 按钮 && 显示独立非楼中楼评论楼层=== if (document.querySelector(separateReply1)) { //显示 显示楼中楼 按钮，以及对应功能 for (const i2 of document.querySelectorAll(separateReply1)){ if (i2.querySelector(replyOperation)){ const i2_1=i2.querySelector(replyOperation) const li=document.createElement("li"); li.setAttribute("class","fif") //fif=floor-in-floor li.addEventListener("click",(()=>{ //点击事件 i2.classList.add("c") })) li.innerHTML="楼中楼楼层" i2_1.appendChild(li) i2_1.classList.add("b") } } //显示楼层 const spanHeight=window.getComputedStyle(document.querySelector("div.con div.info span.like span")).lineHeight //在没有文本的时候height会为0，所以用line-height for (const i3 of document.querySelectorAll(separateReply1)) { i3.classList.add("a"); const qwq = i3.querySelector(".info"); const xhr = new XMLHttpRequest(); xhr.open("get", `//api.bilibili.com/x/v2/reply/info?type=12&oid=1&rpid=${i3.attributes["data-id"].value}`); xhr.responseType = "json"; xhr.withCredentials = true; xhr.send(); xhr.onload = () => { const data = xhr.response.data.floor const qwqwq = document.createElement("span"); qwqwq.setAttribute("style",`height:${spanHeight};margin-right:14px`); qwqwq.innerHTML = `#${data}`; qwq.insertBefore(qwqwq,qwq.childNodes[3]) //加在div info里的第三位 } } } //===end=== //===赋予 楼中楼楼层 按钮功能，即显示楼中楼楼层=== if (document.querySelector(floorInFloor1)){ const FIFSpanHeight=window.getComputedStyle(document.querySelector("div.reply-box div.reply-item.reply-wrap div.info span.like span")).lineHeight for (const i4 of document.querySelectorAll(separateReply2)){ const i4_2=i4.querySelectorAll(floorInFloor2) for (const i4_2_1 of i4_2){ const i4_2_1_1=i4_2_1.querySelector(".info") i4_2_1.classList.add("d") const xhr=new XMLHttpRequest() xhr.open("get",`//api.bilibili.com/x/v2/reply/info?type=12&oid=1&rpid=${i4_2_1.attributes["data-id"].value}`) xhr.responseType="json" xhr.withCredentials=true xhr.send() xhr.onload=()=>{ const data=xhr.response.data.floor const span=document.createElement("span") span.setAttribute("style",`height:${FIFSpanHeight};margin-right:14px`) span.innerHTML=`#${data}` i4_2_1_1.insertBefore(span,i4_2_1_1.childNodes[3]) } } } } //===end=== //===侦测 最热 li，出现变动就改变replyCounts的class，做到和评论总数同步的刷新=== if (document.querySelector(".tabs-order .clearfix .hot-sort") && WLPObserverOpening==false){ //observer仅需开启一次，过多的开启会拖累性能，脚本的每次循环不会重置observer const observerTarget=document.querySelector(".tabs-order .clearfix .hot-sort") const observerConfig={attributes: true,childList: true,subtree: true,classList:true} const observerCallback=()=>{ if (document.querySelector(WLPReplyCounts2)){ var RCChangeClass=document.querySelector(WLPReplyCounts2) //RCChangeClass=replyCountsChangeClass RCChangeClass.classList.remove("e") RCChangeClass.classList.add("f") } } const observer=new MutationObserver(observerCallback) //创建一个观察器并传入回调参数 observer.observe(observerTarget,observerConfig) //以这两个配置开始观察 WLPObserverOpening=true } //===end=== } //# //= //# //= //# if (whichPage=="4"){ const replyBtn=".reply.btn-hover:not(.b)" //排除已被 b class包含的元素 const separateReply1=".list-item.reply-wrap:not(.a)" //寻找相应属性的div 有独立楼层非楼中楼的回复 const separateReply2=".list-item.reply-wrap.c" const floorInFloor1=".list-item.reply-wrap.c .con .reply-box .reply-item.reply-wrap" //楼中楼 const floorInFloor2=".list-item.reply-wrap.c .con .reply-box .reply-item.reply-wrap:not(.d)" const replyOperation=".operation.more-operation .opera-list ul:not(.b)" //评论旁边的三个点 //e代表视频总楼层数已准备完成 //f代表出现切换 按xx排序 的操作，但还没刷新楼层数 //g代表总楼层数的li，特殊标识，方便操作 //===在页面显示总楼层数=== if (document.querySelector(WIPReplyCounts1)){ const owo1=document.querySelector(WIPReplyCounts1) owo1.classList.add("e") const contains=owo1.classList.contains("f") //返回布尔值，判断指定的类名是否存在 owo1.classList.remove("f") const xhr1=new XMLHttpRequest() //获取最新评论 xhr1.open("get",`//api.bilibili.com/x/v2/reply/main?type=42&oid=${window.location.pathname.split("/")[2]}&mode=2`) //获取url的文件名，以/为界分割，用最后一个，即oid xhr1.responseType="json" xhr1.withCredentials=true xhr1.send() xhr1.onload=()=>{ const owowowo1=xhr1.response.data.replies[0].rpid const xhr2=new XMLHttpRequest() //获取最新评论的楼层 xhr2.open("get",`//api.bilibili.com/x/v2/reply/info?type=12&oid=1&rpid=${owowowo1}`) xhr2.responseType="json" xhr2.withCredentials=true xhr2.send() xhr2.onload=()=>{ const owowowo2=xhr2.response.data.floor if (contains==true){ //如果总楼层数已显示，则改为替换数字，否则创建新的 const owowo1change=owo1.querySelector(".g") owowo1change.innerHTML=`${owowowo2}` } else{ var style1=window.getComputedStyle(document.querySelector(".tabs-order .clearfix .default-sort:not(owo)")) //读取最终样式，包括内联样式、嵌入样式和外部样式 var style2=window.getComputedStyle(document.querySelector(".tabs-order .clearfix .total-reply:not(owo)")) const owowo1=document.createElement("li") const owowo2=document.createElement("li") owowo1.innerHTML="楼层" owowo2.innerHTML=`${owowowo2}` owowo2.setAttribute("style",`height:${style2.height};margin-right:${style2.marginRight};line-height:${style2.lineHeight};font-size:${style2.fontSize};color:${style2.color}`) owowo1.classList.add("default-sort") //为设置网站自带css owowo2.classList.add("default-sort") //设置成这个class是因为设置成其他的都会出问题，并非为了设置网站自带css owowo1.classList.add("owo") owowo2.classList.add("owo") owowo2.classList.add("g") owo1.insertBefore(owowo1,owo1.childNodes[2]) //向列表中指定位置插入一个项目 owo1.insertBefore(owowo2,owo1.childNodes[3]) document.querySelector("li.total-reply:not(.owo)").setAttribute("style","margin-right: 20px") } } } } //===end=== //===显示 显示楼中楼 按钮 && 显示独立非楼中楼评论楼层=== if (document.querySelector(separateReply1)) { //显示 显示楼中楼 按钮，以及对应功能 for (const i2 of document.querySelectorAll(separateReply1)){ if (i2.querySelector(replyOperation)){ const i2_1=i2.querySelector(replyOperation) const li=document.createElement("li"); li.setAttribute("class","fif") //fif=floor-in-floor li.addEventListener("click",(()=>{ //点击事件 i2.classList.add("c") })) li.innerHTML="楼中楼楼层" i2_1.appendChild(li) i2_1.classList.add("b") } } //显示楼层 const spanHeight=window.getComputedStyle(document.querySelector("div.con div.info span.like span")).lineHeight //在没有文本的时候height会为0，所以用line-height for (const i3 of document.querySelectorAll(separateReply1)) { i3.classList.add("a"); const qwq = i3.querySelector(".info"); const xhr = new XMLHttpRequest(); xhr.open("get", `//api.bilibili.com/x/v2/reply/info?type=12&oid=1&rpid=${i3.attributes["data-id"].value}`); xhr.responseType = "json"; xhr.withCredentials = true; xhr.send(); xhr.onload = () => { const data = xhr.response.data.floor const qwqwq = document.createElement("span"); qwqwq.setAttribute("style",`height:${spanHeight};margin-right:14px`); qwqwq.innerHTML = `#${data}`; qwq.insertBefore(qwqwq,qwq.childNodes[3]) //加在div info里的第三位 } } } //===end=== //===赋予 楼中楼楼层 按钮功能，即显示楼中楼楼层=== if (document.querySelector(floorInFloor1)){ const FIFSpanHeight=window.getComputedStyle(document.querySelector("div.reply-box div.reply-item.reply-wrap div.info span.like span")).lineHeight for (const i4 of document.querySelectorAll(separateReply2)){ const i4_2=i4.querySelectorAll(floorInFloor2) for (const i4_2_1 of i4_2){ const i4_2_1_1=i4_2_1.querySelector(".info") i4_2_1.classList.add("d") const xhr=new XMLHttpRequest() xhr.open("get",`//api.bilibili.com/x/v2/reply/info?type=12&oid=1&rpid=${i4_2_1.attributes["data-id"].value}`) xhr.responseType="json" xhr.withCredentials=true xhr.send() xhr.onload=()=>{ const data=xhr.response.data.floor const span=document.createElement("span") span.setAttribute("style",`height:${FIFSpanHeight};margin-right:14px`) span.innerHTML=`#${data}` i4_2_1_1.insertBefore(span,i4_2_1_1.childNodes[3]) } } } } //===end=== //===侦测 最热 li，出现变动就改变replyCounts的class，做到和评论总数同步的刷新=== if (document.querySelector(".tabs-order .clearfix .hot-sort") && WIPObserverOpening==false){ //observer仅需开启一次，过多的开启会拖累性能，脚本的每次循环不会重置observer const observerTarget=document.querySelector(".tabs-order .clearfix .hot-sort") const observerConfig={attributes: true,childList: true,subtree: true,classList:true} const observerCallback=()=>{ if (document.querySelector(WIPReplyCounts2)){ var RCChangeClass=document.querySelector(WIPReplyCounts2) //RCChangeClass=replyCountsChangeClass RCChangeClass.classList.remove("e") RCChangeClass.classList.add("f") } } const observer=new MutationObserver(observerCallback) //创建一个观察器并传入回调参数 observer.observe(observerTarget,observerConfig) //以这两个配置开始观察 WIPObserverOpening=true } //===end=== } }, 1000); })();