// ==UserScript== // @name bilibili直播自定义皮肤背景 // @namespace bilibili- ( ゜- ゜)つロ 乾杯~ // @version 1.0.8 // @description 自定义bilibili直播的皮肤和背景，仅自己可见！ // @author HCLonely // @include /^https?:\/\/live.bilibili.com\/(blanc\/)?[\d]+/ // @grant GM_addStyle // @grant GM_xmlhttpRequest // @grant GM_setClipboard // @grant GM_setValue // @grant GM_getValue // @grant GM_openInTab // @grant GM_log // @grant GM_registerMenuCommand // @require https://greasyfork.org/scripts/379868-jquery-not/code/jQuery%20not%20$.js?version=710109 // @supportURL https://blog.hclonely.com/forums/topic/232 // @homepage https://blog.hclonely.com/forums/topic/232 // @run-at document-end // @connect hclonely.com // @compatible chrome 没有测试其他浏览器的兼容性 // @downloadURL none // ==/UserScript== window.onload=function() { 'use strict'; if($('main.app-content').length<1) return; const backgroundImage=["background",{"id":1,"title":"纯色背景"},{"id":2,"title":"自定义背景"},{"id":3,"title":"默认背景①","url":"http://static.hdslb.com/live-static/images/bg/1.jpg"},{"id":4,"title":"默认背景②","url":"http://static.hdslb.com/live-static/images/bg/2.jpg"},{"id":5,"title":"默认背景③","url":"http://static.hdslb.com/live-static/images/bg/3.jpg"},{"id":6,"title":"默认背景④","url":"http://static.hdslb.com/live-static/images/bg/4.jpg"},{"id":7,"title":"默认背景⑤","url":"http://static.hdslb.com/live-static/images/bg/5.jpg"},{"id":8,"title":"默认背景⑥","url":"http://static.hdslb.com/live-static/images/bg/6.jpg"}]; const skinArr=["skin",{"id":"default","name":"默认"},{"id":"transparent","name":"透明"},{"id":"customize","name":"自定义"},{"id":"1","name":"初代目"},{"id":"2","name":"二代目"},{"id":"3","name":"周星冠军皮肤"},{"id":"4","name":"花泽香菜皮肤"},{"id":"5","name":"少女皮肤普通版"},{"id":"6","name":"少女皮肤高级版"},{"id":"7","name":"花之初普通test"},{"id":"8","name":"花之初高级test"},{"id":"9","name":"游戏爱好者"},{"id":"10","name":"居酒屋初级"},{"id":"11","name":"居酒屋高级"},{"id":"12","name":"愚人节皮肤"},{"id":"13","name":"樱花谷皮肤"},{"id":"14","name":"樱花雪月"},{"id":"15","name":"旋风少年-高级"},{"id":"16","name":"旋风少年-普通"},{"id":"17","name":"乐正绫生日会"},{"id":"18","name":"冰"},{"id":"19","name":"火"},{"id":"20","name":"生日会"},{"id":"21","name":"JDG"},{"id":"22","name":"IG"},{"id":"23","name":"MUSIC LIVE-普通"},{"id":"24","name":"MUSIC LIVE-高级"},{"id":"25","name":"璀璨之石"},{"id":"26","name":"静谧之月"},{"id":"27","name":"幻影之翼"},{"id":"28","name":"绚烂之花"},{"id":"29","name":"闪耀之星"},{"id":"30","name":"守护者主题皮肤"},{"id":"31","name":"大天使主题皮肤"},{"id":"32","name":"夏季赛皮肤"},{"id":"33","name":"真夏季赛皮肤"},{"id":"34","name":"真真夏季赛"},{"id":"35","name":"考试必胜皮肤"},{"id":"36","name":"十周年"},{"id":"37","name":"小电视机甲（初级）"},{"id":"38","name":"小电视机甲（中级）"},{"id":"39","name":"小电视机甲（高级）"},{"id":"40","name":"绊爱生日会限定皮肤"},{"id":"41","name":"王者荣耀非排名"},{"id":"42","name":"王者荣耀排名1"},{"id":"43","name":"王者荣耀排名2"},{"id":"44","name":"王者荣耀排名3"},{"id":"45","name":"洛天依2019生日会"},{"id":"46","name":"PUBG开黑周报名皮肤"},{"id":"47","name":"Star萌星"},{"id":"48","name":"Star星耀"},{"id":"49","name":"言和2019生日会"},{"id":"50","name":"冲鸭！机甲大作战 —— 传说奖励"},{"id":"51","name":"冲鸭！机甲大作战 —— 史诗奖励"},{"id":"52","name":"冲鸭！机甲大作战 —— 勇者奖励"},{"id":"53","name":"【处女座】生日"},{"id":"54","name":"【处女座】主题"},{"id":"55","name":"王者世冠杯"},{"id":"56","name":"乱斗高手皮肤"},{"id":"57","name":"乱斗之王皮肤"},{"id":"58","name":"mamo演唱会2019"},{"id":"59","name":"夏日星语"},{"id":"60","name":"梦幻派对"},{"id":"61","name":"声夏花火—“夏日物语”皮肤"},{"id":"62","name":"冰火歌合战2-冰队"},{"id":"63","name":"冰火歌合战2-火队"},{"id":"64","name":"千人舰队皮肤"},{"id":"65","name":"百人舰队皮肤"},{"id":"66","name":"【天秤座】生日"},{"id":"67","name":"【天秤座】主题"},{"id":"68","name":"闪耀新星"},{"id":"69","name":"bilibili星玩家"},{"id":"70","name":"中秋佳月_初级皮肤"},{"id":"71","name":"中秋佳月_高级皮肤"},{"id":"72","name":"魔法未来"},{"id":"73","name":"KPL直播间皮肤"},{"id":"74","name":"【天蝎座】生日"},{"id":"75","name":"【天蝎座】主题"},{"id":"76","name":"Bu咕鸟皮肤"},{"id":"77","name":"国庆吃喝玩乐皮肤"}]; let skin; GM_xmlhttpRequest({ method:'GET', url:'https://js.hclonely.com/skin.json?t='+new Date().getTime(), onload:data=>{ if(data.status==200){ skin=eval("("+data.responseText+")"); GM_setValue('skin',skin); }else{ skin=GM_getValue('skin')||skinArr; } start(); } }) function start(){ $jq('body').append(`

更换背景

更换皮肤

隐藏

`); let sideBarLeft=$jq('[name="sideBarLeft"]'); let settingDiv=$jq('[name="settingDiv"]'); let settingH2=$jq('[name="settingH2"]'); let settingInfoDiv=$jq('[name="settingInfoDiv"]'); let closeBtn=$jq('[name="closeBtn"]'); let backgroundDiv=$jq('[name="backgroundDiv"]'); let hideDiv=$jq('[name="hideDiv"]'); let skinDiv=$jq('[name="skinDiv"]'); let saveBtn=$jq('.save-button'); let preBtn=$jq('.pre-button'); let getConfigBtn=$jq('.get-config-button'); let skinInfo=$jq('.skin-info'); let biInfo=set_info(backgroundImage); let skInfo=set_info(skin); closeBtn.click(()=>{ settingDiv.hide(); }); backgroundDiv.click(()=>{ if(settingInfoDiv.attr('data-tag')=='bg'&&settingDiv.css('display')=='none'){ settingDiv.show(); }else if(settingInfoDiv.attr('data-tag')=='bg'){ settingDiv.hide(); }else{ settingInfoDiv.attr('data-tag','bg') settingH2.text('更换背景'); settingInfoDiv.html(biInfo); $jq('.background-select').click(function(){ set_background($jq(this).attr('data-background-id')); }); skinInfo.hide(); settingDiv.show(); } }); skinDiv.click(()=>{ if(settingInfoDiv.attr('data-tag')=='skin'&&settingDiv.css('display')=='none'){ settingDiv.show(); settingDiv.show(); }else if(settingInfoDiv.attr('data-tag')=='skin'){ settingDiv.show(); settingDiv.hide(); }else{ settingInfoDiv.attr('data-tag','skin') settingH2.text('更换皮肤'); settingInfoDiv.html(''); $jq('.color-info').hide(); $jq('.url-info').hide(); $jq('select.skin').change(function(){ get_skin($jq(this).find('option:selected').val()); }); skinInfo.show(); settingDiv.show(); } }); hideDiv.click(()=>{ sideBarLeft.hide(); }); saveBtn.click(()=>{ let cache=get_setting(); GM_setValue('mySetting',cache); msg('保存成功！'); }); preBtn.click(function(){ let skin_config={}; $jq.makeArray($jq('input[name="skinBgCode"]')).map(e=>{ skin_config[$jq(e).attr('id')]=$jq(e).val(); }); set_skin('customize',skin_config); }); $("head").bind("DOMNodeInserted", ()=>{ let prevSetting=GM_getValue('mySetting')||[]; let nowSetting=get_setting(); if($('style[id^=skin-css-').length>1) $(`style[id^=skin-css-]:not([id=skin-css-${prevSetting[1].id}])`).remove(); else if(($jq('div.room-bg[role="img"]').length>0?prevSetting[0]!=nowSetting[0]:false)||prevSetting[1].id!=nowSetting[1].id) set_all(prevSetting); }); sideBarLeft.click(()=>{ $("head").unbind("DOMNodeInserted"); }); function set_info(e){ let info=""; let type=e[0]; let classType=e[0]=='skin'?'skin':'background'; for(let i=1;i${e[i].name}`:info+=`

${e[i].title}

`; } return info; } function set_background(id){ switch(id){ case '1': $jq('div.url-info').hide(); $jq('div.color-info').show(); $jq('#colorEnter').click(()=>{ if($jq('div.room-bg[role="img"]').length>0) $jq('div.room-bg[role="img"]').attr('style',`background-color: ${$jq('input[name="colorCode"]').val()};`); }); break; case '2': $jq('div.color-info').hide(); $jq('div.url-info').show(); $jq('#urlEnter').click(()=>{ if($jq('div.room-bg[role="img"]').length>0) $jq('div.room-bg[role="img"]').attr('style',`background-image: url("${$jq('input[name="urlCode"]').val()}");`); }); break; default: $jq('div.color-info').hide(); $jq('div.url-info').hide(); if($jq('div.room-bg[role="img"]').length>0) $jq('div.room-bg[role="img"]').attr('style',`background-image: url("${backgroundImage[id].url}");`); break; } } function get_skin(id){ $('.pre-button').attr("disabled",'disabled'); switch(id){ case 'default': $('[name="skinBgCode"]').val(''); $('style[id^=skin-css-').remove(); $('head').append(``); break; case 'transparent': $('[name="skinBgCode"]').val(''); set_skin(id,{headInfoBgPic:"#fff0",giftControlBgPic:"#fff0",rankListBgPic:"#fff0",danmakuBgPic:"#fff0",inputBgPic:"#fff0"}); $('#headInfoBgPic').val('#fff0'); $('#giftControlBgPic').val('#fff0'); $('#rankListBgPic').val('#fff0'); $('#danmakuBgPic').val('#fff0'); $('#inputBgPic').val('#fff0'); break; case 'customize': $('input[name="skinBgCode"]').removeAttr('disabled'); $('.pre-button').removeAttr('disabled'); break; default: $('[name="skinBgCode"]').val(''); msg("正在获取皮肤设置...","info"); $jq.ajax({ type:'get', url:'https://api.live.bilibili.com/room/v1/Skin/info?skin_platform=web&skin_version=1&id='+id, success:data=>{ if(data.data){ let skin_config=eval("("+data.data.skin_config.replace(/\#FF/g,"#")+")"); msg("获取皮肤设置成功"); set_skin(id,skin_config); }else if(data.message||data.msg||data.code){ let message=data.message||data.msg||data.code||'未知错误'; msg(message); } }, error:()=>{ msg('获取皮肤信息出错'); }, }); } } function set_skin(id,skin_config){ Object.keys(skin_config).forEach(function(key){ $jq("#"+key).val(skin_config[key]); }); let mainText=skin_config.mainText?` .live-skin-coloration-area .live-skin-main-text { color: ${skin_config.mainText}!important; } .live-skin-coloration-area .live-skin-main-a-text:link,.live-skin-main-a-text:visited { color: ${skin_config.mainText}!important; } `:""; let normalText=skin_config.normalText?` .live-skin-coloration-area .live-skin-normal-text { color: ${skin_config.normalText}!important; } .live-skin-coloration-area .live-skin-normal-a-text { color: ${skin_config.normalText}!important; } .live-skin-coloration-area .live-skin-normal-a-text:link,.live-skin-normal-a-text:visited { color: ${skin_config.normalText}!important; } `:""; let highlightContent=skin_config.highlightContent?` .live-skin-coloration-area .live-skin-main-a-text:hover,.live-skin-main-a-text:active { color: ${skin_config.highlightContent}!important; } .live-skin-coloration-area .live-skin-normal-a-text:hover,.live-skin-normal-a-text:active { color: ${skin_config.highlightContent}!important; } .live-skin-coloration-area .live-skin-highlight-text { color: ${skin_config.highlightContent}!important; } .live-skin-coloration-area .live-skin-highlight-bg { background-color: ${skin_config.highlightContent}!important; } .live-skin-coloration-area .live-skin-highlight-border { border-color: ${skin_config.highlightContent}!important; } .live-skin-coloration-area .live-skin-highlight-button-bg.bl-button--primary:not(:disabled) { background-color: ${skin_config.highlightContent}; } .live-skin-coloration-area .live-skin-highlight-button-bg.bl-button--primary:hover:not(:disabled) { background-color: ${skin_config.highlightContent}; } .live-skin-coloration-area .live-skin-highlight-button-bg.bl-button--primary:active:not(:disabled) { background-color: ${skin_config.highlightContent}; } `:""; let border=skin_config.border?` .live-skin-coloration-area .live-skin-separate-border { border-color: ${skin_config.border}!important; } .live-skin-coloration-area .live-skin-separate-area { background-color: ${skin_config.border}!important; } .live-skin-coloration-area .live-skin-separate-area-hover:hover { background-color: ${skin_config.border}!important; } `:""; let headInfoBgPic=skin_config.headInfoBgPic; let giftControlBgPic=skin_config.giftControlBgPic; let rankListBgPic=/^\#/.test(skin_config.rankListBgPic)?`#rank-list-ctnr-box,#rank-list-vm {background-color: ${skin_config.rankListBgPic}}`:`#rank-list-ctnr-box {background-image: url(${skin_config.rankListBgPic})}`; let danmakuBgPic=skin_config.danmakuBgPic?`.chat-history-panel{${/^\#/.test(skin_config.danmakuBgPic)?`background-color: ${skin_config.danmakuBgPic}`:`background-image: url(${skin_config.danmakuBgPic})`};}`:""; let inputBgPic=skin_config.inputBgPic?`#chat-control-panel-vm{${/^\#/.test(skin_config.inputBgPic)?`background-color: ${skin_config.inputBgPic}`:`background-image: url(${skin_config.inputBgPic})`};}`:""; $('style[id^=skin-css-').remove(); $('head').append(` `); } function get_setting(){ let cache=[]; if($jq('div.room-bg[role="img"]').length>0) cache[0]=$jq('div.room-bg[role="img"]').attr('style'); if($('style[id^=skin-css-').length>0){ let skinId=$('style[id^=skin-css-').attr('id').replace('skin-css-',''); cache[1]={'id':skinId,'style':$('style[id^=skin-css-').html()}; }else{ cache[1]={'id':'default'}; } return cache; } function set_all(setting){ if(setting[0]&&$jq('div.room-bg[role="img"]').length>0) $jq('div.room-bg[role="img"]').attr('style',setting[0]); if(setting[1]){ $('style[id^=skin-css-').remove(); $('head').append(``); } } function screen(){ let skinId=$('style[id^=skin-css-').attr('id').replace('skin-css-',''); switch($('div.bilibili-live-player').attr('data-player-state')){ case "web-fullscreen": sideBarLeft.hide(); if(!$('style[id^=skin-css-').html().includes("/*")) $('style[id^=skin-css-').html("/*"+$('style[id^=skin-css-').html()+"*/"); break; case "normal": sideBarLeft.show(); if($('style[id^=skin-css-').html().includes("/*")) $('style[id^=skin-css-').html($('style[id^=skin-css-').html().replace(/\*\/|\/\*/g,"")); break; case "fullscreen": sideBarLeft.hide(); break; default: break; } } $jq(document).click(function(e){ if($jq(e.target).attr('data-title')&&($jq(e.target).attr('data-title').includes('全屏'))) screen(); }); $jq(document).dblclick(screen); $jq(document).keydown(function(e){ let keyArr=[13,27,108]; if(keyArr.indexOf(e.keyCode)>-1) screen(); }); document.addEventListener("fullscreenchange", screen); function msg(message='',status='success'){ $jq('body').append(`
${message}
`); setTimeout(()=>{$jq('.link-toast').remove()},4000); } GM_addStyle(` .side-bar-left { height: 176px; position: fixed; left: 0; bottom: 40%; padding: 12px 4px; background-color: #fff; z-index: 1000000; border-radius: 0 12px 12px 0; -webkit-box-shadow: 0 0 20px 0 rgba(0,85,255,.1); box-shadow: 0 0 20px 0 rgba(0,85,255,.1); -webkit-transition: height .4s cubic-bezier(.22,.58,.12,.98); -o-transition: height cubic-bezier(.22,.58,.12,.98) .4s; transition: height .4s cubic-bezier(.22,.58,.12,.98); border: 1px solid #e9eaec; -webkit-transform: translateZ(0); transform: translateZ(0); } .side-bar-btn-div { width: 56px; height: 56px; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 4px 0; cursor: pointer; text-align: center; padding: 5px 0; } .svg-icon-span { font-size: 26px !important; margin: 0 auto; width: 26px; height: 26px; } .svg-icon-span:hover { -webkit-animation: link-live-sidebar-jumping-data-v-75753219 cubic-bezier(.22,.58,.12,.98) 1.5s infinite; animation: link-live-sidebar-jumping-data-v-75753219 cubic-bezier(.22,.58,.12,.98) 1.5s infinite; } .size-bar-text-p { margin: 4px 0 0; font-size: 12px; line-height: 16px; } .awarding-panel-setting { left: 80px; bottom: -200px; -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; width: 500px; height: 500px; padding: 24px; font-size: 12px; color: #333; background-color: #fff; border: 1px solid #e9eaec; border-radius: 12px; z-index: 1; } .awarding-panel-setting .title { margin: 0; font-size: 18px; font-weight: 400; color: #23ade5; } .awarding-panel-setting .close-btn { padding: 0; top: 16px; right: 16px; font-size: 16px; color: #999; border: none; background-color: transparent; } .awarding-panel-setting .close-btn:hover { -webkit-transform: scale(1.1) rotate(180deg); -ms-transform: scale(1.1) rotate(180deg); transform: scale(1.1) rotate(180deg); } .awarding-panel-setting .close-btn { padding: 0; top: 16px; right: 16px; font-size: 16px; color: #999; border: none; background-color: transparent; } .awarding-panel-setting .info-section { margin-top: 24px; } .background-select,.skin-select { width: 22%; min-width: 70px; height: 20px; margin: 5px; border-radius: 30px; text-align: center; cursor: pointer; -webkit-transition: all 1s cubic-bezier(.22,.58,.12,.98); -o-transition: all 1s cubic-bezier(.22,.58,.12,.98); transition: all 1s cubic-bezier(.22,.58,.12,.98); vertical-align: middle; display: inline-block; } .hour-rank-info { line-height: 16px; padding: 2px 8px; margin: 0; font-size: 12px; color: #fff; -webkit-transition: width 3s cubic-bezier(.22,.58,.12,.98); -o-transition: width 3s cubic-bezier(.22,.58,.12,.98); transition: width 3s cubic-bezier(.22,.58,.12,.98); min-width: 70px; height: 20px; border-radius: 30px; text-align: center; cursor: pointer; } .code-div { background-color: hsla(0,0%,100%,.88); display: block; height: 32px; border-style: solid; border-radius: 4px; border-color: #e9f2f7; transition: background-color .2s; margin-top: 3px; } .v-middle-color { float: none; color: #222; font-size: 12px; overflow: hidden; height: 32px; line-height: 32px; padding: 0; border: 0; box-shadow: none; background-color: transparent; } .color-button { display: block; position: relative; right: 0; width: 48px; min-width: 0; cursor: pointer; height: 32px; margin: 0; padding: 0; border: 0; color: #00a4db; } .color-button:hover { color: #ff4e8e; } .color-code-div { width: 218px; } .url-code-div { width: 418px; } [name="colorCode"] { width: 146px; } [name="urlCode"] { width: 372px; } [name="skinBgCode"] { width: 63%; height: 22px; } .save-button,.pre-button,.get-config-button { min-width: 80px; height: 24px; font-size: 12px; background-color: #23ade5; color: #fff; border-radius: 4px; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; line-height: 1; margin: 0; padding: 6px 12px; border: 0; cursor: pointer; outline: none; overflow: hidden; bottom: 10px; } .save-button:hover,.pre-button:hover,.get-config-button:hover { background-color: #39b5e7; } .save-txt { position: relative; } .bottom-div { position: absolute; left: 200px; bottom: 0; } .skin-btn,.skin-code-div { height: 22px; } .skin-btn { float: right; } button[disabled] { cursor: not-allowed; background-color:#e9eaec; color:#b4b4b4 } .link-toast { z-index:99999999999999; } `); GM_registerMenuCommand('清空设置',()=>{GM_setValue('mySetting',null);}); GM_registerMenuCommand('显示/隐藏设置菜单',()=>{sideBarLeft.toggle();}); } };