动画效果说的是前面一时兴起做了一个插件。通过这个插件，我们将B站的视频作为自己浏览器网页的背景视频，这样浏览起来会更加赏心悦目。使用step插件下载Gitee地址：https://gitee.com/zheng_yongtao/chrome-plug-in/tree/master/Chrome-backGroundVideoCSDN插件：https://download.csdn.net/download/twinkle_sone/22003790添加扩展打开链接chrome://extensions/进入扩展管理页面，将下载解压后的文件夹拉到这里，如下图，第一个插件就是我们新添加的插件。添加使用后，页面上会有一个扩展的小图标。点击这个小图标，会弹出一个窗口。在这个窗口中输入视频链接后，我们就可以将视频作为网页的背景了。那么问题来了，这个视频的链接在哪里获取呢？获取链接，我们先在B站打开一个视频，视频下方会有一个分享按钮。点击按钮后会出现两个链接，我们只需要复制我们需要的链接即可，如下图：将这个链接放入输入框，点击确定，我们会发现视频已经出来了，如图下图中：但是视频无法播放，这是因为浏览器限制了视频自动播放，所以我们还需要做一点手工。我们在页面左侧看到了一个粉红色的按钮。点击它会有什么效果？点击后可以看到视频的层级已经达到顶层了，可以点击播放按钮了，所以我们只需要切换层级点击播放，再把层级切换回来就可以达到效果了开场动画（没人会嫌麻烦，(╥╯^╰╥)泪）。代码分析获取视频链接chrome.runtime.onConnect.addListener((res)=>{//console.log('chrome.runtime.onConnectincontentjs:',res)if(res.name==='myConnect'){res.onMessage.addListener(mess=>{console.log('res.onMessage.addListenerinpopup:',mess)mess=iframeSrcSplit(mess);createIframe(mess)})}})解析视频链接函数iframeSrcSplit(iframeSrc){lettemp=iframeSrc.split('src="')[1];iframeSrc=temp.split('"')[0];//弹幕iframeSrc+='&danmaku=0'//+(this.danmaku?1:0)//质量iframeSrc+='&high_quality=1'//autoplay//iframeSrc+='&autoplay=true'//loopiframeSrc+='&loop=true'returniframeSrc;}创建iframe并插入函数createIframe(iframeSrc){letbody=document.getElementsByTagName('body')[0];body.style.opacity=0.8;让iframe=document.createElement('iframe');iframe.muted=trueiframe.src=iframeSrc;localStorage.setItem('我frameSrc',iframeSrc);iframe.id='BiliVideo';iframe.name='BiliVideo';iframe.style.width='100%'iframe.style.height='100%'iframe.style.position='fixed'body.before(iframe)iframe.style.zIndex='100'}生成按钮函数btnGenerator(){让ghtml=document.getElementsByTagName('html')[0],gdiv=document.createElement('div');gdiv.id='changdiv'gdiv.style.position='固定';gdiv.style.width='100%';gdiv.style.height='100%';gdiv.style.top='0px';gdiv.style.left='0px';gdiv.style.opacity='0.7';gdiv.style.zIndex='-1';ghtml.appendChild(gdiv);//页面上的切换按钮letgBtn=document.createElement('div');gBtn.id='gBtn';gBtn.innerText="切换关卡";gBtn.style.opacity="0.6";gBtn.style.position="固定";gBtn.style.right="40px";gBtn.style.top="50%";gBtn.style.border="纯黑1px"gBtn.style.width="80px";gBtn.style.height="80px";Btn.style.borderRadius="50%50%";gBtn.style.lineHeight="80px";gBtn.style.textAlign="居中";gBtn.style.backgroundImage="线性渐变(#e66465,#9198e5)";gBtn.style.fontSize="初始";gBtn.style.cursor="指针";gBtn.style.zIndex="999";ghtml.appendChild(gBtn);$("#gBtn").hover(function(){letw=parseInt($("#gBtn").css("left"));if(w==windowWidth-20){$("#gBtn").css({"left":windowWidth-80});}},function(){让w=parseInt($("#gBtn").css("left"));if(w>=windowWidth-80){$("#gBtn").css({"left":windowWidth-20});}});//按键拖拽功能$("#gBtn").mousedown(function(e){gmove=true;startX=e.pageXstartY=e.pageY//console.log("move",gmove);_gx=e.pageX-parseInt($("#gBtn").css("left"));_gy=e.pageY-parseInt($("#gBtn").css("top"));});$(文档).mousemove(函数(e){如果(gmove){varx=e.pageX-_gx;//控件左上角到屏幕左上角的相对位置vary=e.pageY-_gy;$("#gBtn").css({"top":y,"left":x});}}).mouseup(function(e){endX=e.pageX;endY=e.pageY;让d=Math.sqrt((startX-endX)*(startX-endX)+(startY-endY)*(startY-endY));if(d===0||d<7){//console.log("点击事件执行");letiframe=document.getElementById('BiliVideo');if(iframe.style.zIndex=='-1'){iframe.style.zIndex='100'}else{iframe.style.zIndex='-1'}}else{//console.log("拖动事件执行");if(windowWidth-endX<60){$("#gBtn").css({"left":windowWidth-20});}}gmove=false;});}代码地址Gitee:https://gitee.com/zheng_yongtao/chrome-plug-in/tree/master/Chrome-backGroundVideo（喜欢可以点个星，呜呜呜）更多插件浏览器页面背景换肤插件浏览器桌面挂件动画插件B站视频评论屏蔽插件鼠标点击烟花特效少女看完说爽
