// ==UserScript== // @name bilibili直播自定义皮肤背景 // @namespace bilibili- ( ゜- ゜)つロ 乾杯~ // @version 0.9.1 // @description 自定义bilibili直播的皮肤和背景，仅自己可见！ // @author HCLonely // @include /^https?:\/\/live.bilibili.com\/[\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 // @run-at document-end // @downloadURL none // ==/UserScript== (function() { 'use strict'; 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 skin=[ 'skin', { 'id':1, 'title':'默认', }, { 'id':2, 'title':'透明', }, { 'id':3, 'title':'绊爱生日会限定', 'color':'rgba(255,42,107,1)', 'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/a726c844272b59d5873eecd143ba04a69d69322e.png', 'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/4534e9eac4804d29b7e9f9a539123ba5fc055a25.png', 'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/203a6865172e6588d66aa1922d472e2eed088087.png', }, { 'id':4, 'title':'考试必胜', 'color':'rgba(96,133,182,1)', 'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/9533eefe82d5009fc81c9f3d04666f65d067d555.png', 'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/eeb5d11ed37356fda16540ee8c7edadfe5804688.png', 'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/056f183b2799ed7de1c0a5e2a595e97a03569727.png', }, { 'id':5, 'title':'音之守护者', 'color':'rgba(255,192,0,1)', 'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/8680817d5366d9144da1730dd01160839e2b36dc.png', 'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/adcd9a387b39c197759d249bef6d54595d7f729b.png', 'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/6155e1b255aa88c4ff44c0176fabc142876ae3a8.png', }, { 'id':6, 'title':'周星X计划', 'color':'rgba(255,192,0,1)', 'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/2ebabc30b955845194a1c3b157b9d3328694bc2c.png', 'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/bec62333b155bb844ab9d12357d27813b971d84c.png', 'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/48b3f9393a14736fdbfe5a88d8696dea8e77aa9d.png', }, { 'id':7, 'title':'PUBG开黑周', 'color':'#fff|#9f9f9f', 'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/e8d75396147ab147456f6255586e0e4d5b374de0.png', 'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/9cc834640ce7e4e42d6728fd1d35f3cc81cfb3d5.png', 'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/fc2eb4197a09bb6f191b2b2002080b9e595ca134.png', }, { 'id':8, 'title':'【勇者】机甲大作战', 'color':'', 'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/ccb8b312bd327207b6d89c5f4f7cbfff0eec6d75.png', 'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/22d4e53a2119b594740ff3dd2dcf90257ef6975a.png', 'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/ae655c8ffbc7b6e29a2059a4cd2b9c8648d4a058.png', }, { 'id':9, 'title':'【史诗】机甲大作战', 'color':'rgba(255,255,255,1)|rgba(226,189,255,1)|rgba(226,189,255,1)', 'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/d30ca472228c961da403babe7f3d4b1677527a26.png', 'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/2d8504f44ed1280d2f39ae107088284e0345ea5c.png', 'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/5b45fa64c5588e7aa67ef3fd1bb3daa2d599b1e2.png', }, { 'id':10, 'title':'【传说】机甲大作战', 'color':'rgba(255,255,255,1)|rgba(255,212,115,1)|rgba(255,212,115,1)', 'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/675a47293ee7c18da391330cb87d807ac05cc5f3.png', 'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/06cdb8806b3299bf6e964559279c1488155895a8.png', 'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/971edddb6f78e5ca3611fc2d1c8e6fa58c369b59.png', }, { 'id':11, 'title':'Star萌星皮肤', 'color':'rgba(255,255,255,1)|rgba(178,126,255,1)|rgba(199,158,255,1)', 'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/76338bb3b82ed0c16c69e589fb6a3ff8468a2407.png', 'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/eed5aac50e8b8b97248417a410a4a088ed224bdb.png', 'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/90c70d98a5c87f7d13af6e88dedd88a52ca82854.png', }, { 'id':12, 'title':'星之耀', 'color':'rgba(255,255,255,1)|rgba(173,200,255,1)|rgba(173,200,255,1)', 'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/2ebabc30b955845194a1c3b157b9d3328694bc2c.png', 'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/bec62333b155bb844ab9d12357d27813b971d84c.png', 'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/48b3f9393a14736fdbfe5a88d8696dea8e77aa9d.png', }, { 'id':13, 'title':'冰火合战Ⅱ', 'color':'rgba(255,255,255,1)|rgba(0,158,255,0.5)|rgba(54,125,254,1)', 'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/89887e3fb04461509c852735de603d80bbf1fb5c.png', 'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/b4dab38d40d158b8292eb7967d585be56554beb7.png', 'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/2410a855b196b84cd0ccea84419157236f89f9d3.png', }, { 'id':14, 'title':'夏日物语', 'color':'rgba(255,255,255,1)|rgba(173,200,255,1)|rgba(173,200,255,1)', 'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/57e38dfca25a43e92a17b5cac2661ac6173855e1.png', 'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/04a45367d4978007dda68b0bb0b010cd9750de66.png', 'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/2cc2da44edc9b6a463ddeaa6561a4eb9befb20fd.png', }, ]; const skinClass=['#head-info-vm','#gift-control-vm','#rank-list-ctnr-box','.chat-history-panel','#chat-control-panel-vm']; const txtClass=['.room-title .live-skin-main-text','.live-skin-normal-a-text','#gift-control-vm .live-skin-main-text','#rank-list-vm .live-skin-main-text','#rank-list-vm .live-skin-normal-text','.danmaku-content']; $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 skinBtn=$jq('.skin-btn'); 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(){ set_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); alert('保存成功！'); }); skinBtn.click(function(){ let dataClass=$(this).attr('data-class'); if(dataClass=='5'){ set_txt($(this).prev().val()); }else{ set_every_skin($(this).prev().val(),skinClass[dataClass]); } }); let change=setInterval(()=>{ let prevSetting=GM_getValue('mySetting'); let nowSetting=get_setting(); for(let i=0;i{clearInterval(change)}); function set_info(e){ let info=""; let type=e[0]; let classType=e[0]=='skin'?'skin':'background'; for(let i=1;i${e[i].title}`: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(()=>{ $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(()=>{ $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(); $jq('div.room-bg[role="img"]').attr('style',`background-image: url("${backgroundImage[id].url}");`); break; } } function set_skin(id){ switch(id){ case '1': $jq('[name="skinBgCode"]').eq(0).val('#fff'); $jq('[name="skinBgCode"]').eq(1).val('#fff'); $jq('[name="skinBgCode"]').eq(2).val('#fff'); $jq('[name="skinBgCode"]').eq(3).val('#f8f8f8'); $jq('[name="skinBgCode"]').eq(4).val('#f8f8f8'); $jq('[name="skinBgCode"]').eq(5).val('#333|#333|#999'); set_every_skin('#fff',skinClass[0]); set_every_skin('#fff',skinClass[1]); set_every_skin('#fff',skinClass[2]); set_every_skin('#f8f8f8',skinClass[3]); set_every_skin('#f8f8f8',skinClass[4]); set_txt('#333|#333|#999'); break; case '2': $jq('[name="skinBgCode"]').eq(0).val('#fff0'); $jq('[name="skinBgCode"]').eq(1).val('#fff0'); $jq('[name="skinBgCode"]').eq(2).val('#fff0'); $jq('[name="skinBgCode"]').eq(3).val('#fff0'); $jq('[name="skinBgCode"]').eq(4).val('#fff0'); $jq('[name="skinBgCode"]').eq(5).val('#fff|#fff|#333'); set_every_skin('#fff0',skinClass[0]); set_every_skin('#fff0',skinClass[1]); set_every_skin('#fff0',skinClass[2]); set_every_skin('#fff0',skinClass[3]); set_every_skin('#fff0',skinClass[4]); set_txt('#fff|#fff|#333'); break; default: $jq('[name="skinBgCode"]').eq(0).val(skin[id].liveSkinTop); $jq('[name="skinBgCode"]').eq(1).val(skin[id].liveSkinBottom); $jq('[name="skinBgCode"]').eq(2).val(skin[id].chatSkin); $jq('[name="skinBgCode"]').eq(3).val('#f8f8f8'); $jq('[name="skinBgCode"]').eq(4).val(skin[id].chatSkin); $jq('[name="skinBgCode"]').eq(5).val(skin[id].color); set_every_skin(skin[id].liveSkinTop,skinClass[0]); set_every_skin(skin[id].liveSkinBottom,skinClass[1]); set_every_skin(skin[id].chatSkin,skinClass[2]); set_every_skin('#f8f8f8',skinClass[3]); set_every_skin(skin[id].chatSkin,skinClass[4]); set_txt(skin[id].color); break; } } function set_every_skin(skin,position){ /^http/gim.test(skin)?GM_addStyle(`${position}{background:url("${skin}") !important}`):GM_addStyle(`${position}{background:${skin} !important}`); if(position=='#rank-list-ctnr-box'&&(skin=='#fff0'||'rgba(255, 255, 255, 0)')){ GM_addStyle(`#rank-list-vm{background:#fff0 !important}`); }else if(position=='#rank-list-ctnr-box'){ GM_addStyle(`#rank-list-vm{background:#fff !important}`); } } function set_txt(color){ let color1=color, color2=color, color3=color; if(color.includes('|')){ color1=color.split('|')[0]||'#000'; color2=color.split('|')[1]||'#000'; color3=color.split('|')[2]||'#000'; } $jq('.live-skin-separate-area').attr('style',`color:${color1} !important`); $jq('.live-skin-main-text').attr('style',`color:${color1} !important`); $jq('.live-skin-normal-text').attr('style',`color:${color2} !important`); $jq('.live-skin-normal-a-text').attr('style',`color:${color3} !important`); } function get_setting(){ let cache=[]; cache[0]=$jq('div.room-bg[role="img"]').attr('style'); for(let i=0;i-1) screen(); }); document.addEventListener("fullscreenchange", ()=>{ screen(); }); 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: left; color: #222; font-size: 12px; overflow: hidden; height: 32px; line-height: 32px; padding: 0 12px; 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: 372px; height: 22px; } .save-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 { background-color: #39b5e7; } .save-txt { position: relative; } .bottom-div { position: absolute; left: 200px; bottom: 0; } h3.title { height: 15px; font-size: 15px !important; } .skin-btn,.skin-code-div { height: 22px; } `); GM_registerMenuCommand('清空设置',()=>{GM_setValue('mySetting',null);}); GM_registerMenuCommand('显示/隐藏设置菜单',()=>{sideBarLeft.toggle();}); })();