自制浏览器网页背景是一种怎样的体验？

时间：2023-03-27 16:15:59 JavaScript

浏览器一键换肤插件制作1.思路是简单的在页面上添加一个div作为背景图片容器，然后调整布局和触发事件来实现。具体实现代码如下：2、代码（1）插件配置文件{"name":"后台切换","version":"1.0.0","manifest_version":2,"description":"浏览器背景切换--SADON_jung","browser_action":{"default_title":"View","default_icon":"1.jpg","default_popup":"popup.html"},"content_scripts":[{"matches":[""],//匹配任何网站"js":["jquery-3.6.0.min.js","changebg.js"]}],"permissions":["tabs","activeTab"]//向浏览器申请权限}配置文件相关属性可以在chrome扩展中查看：manifest.json文件相关字段(2)弹出按钮页面文档改变背景颜色
更改背景图片

删除背景

（三）切换后台相关逻辑代码3.1响应页面按钮请求chrome.runtime.onMessage.addListener(function(request,sender,sendResponse){if(request.action=="change"){changebg(0);sendResponse({state:'切换成功！'});}if(request.action=="changeimg"){改变（1）；sendResponse({state:'切换成功！'});}if(request.action=="cancelchange"){changebg(3);sendResponse({state:'删除背景！'});}});3.2生成随机数并随机切换图片functionrandomNum(min,max){switch(arguments.length){case1:returnMath.floor(Math.random()*minNum+1);休息;情况2：返回Math.floor(Math.random()*(max-min+1)+min);休息;默认值：返回0；休息;}}3.3切换后台函数changebg(ind){//存储可替换颜色数组letcolors=['#482936','#461629','#35333c','#11659a'];//存储可替换图像数组letbgimg=['https://images8.alphacoders.com/992/992329.jpg','https://images4.alphacoders.com/958/958516.jpg','https://images5.alphacoders.com/974/974380.jpg','https://images2.alphacoders.com/227/227642.jpg',];让gdiv=document.getElementById('昌迪夫');if(ind==1){//随机切换图片letnum=randomNum(0,bgimg.length-1);gdiv.style.backgroundImage="url("+bgimg[num]+")";gdiv.style.backgroundRepeat="不重复";gdiv.style.backgroundSize="100%";}elseif(ind==0){//随机切换背景色letnum=randomNum(0,colors.length-1);gdiv.style.backgroundColor=colors[num];}elseif(ind==3){//删除背景颜色和背景图片gdiv.style.backgroundImage="";gdiv.style.backgroundColor="";}elseif(ind==4){//顺序切换背景图片letnum=byorder(bgimg.length);gdiv.style.backgroundImage="url("+bgimg[num]+")";}}3.4页面初始化函数init(){//生成一个div作为图片容器letgbody=document.getElementsByTagName('body')[0];gbody.style.opacity='0.8';让ghtml=document.getElementsByTagName('html')[0],gdiv=document.createElement('div');gdiv.id='changdiv'gdiv.style.position='固定';gdiv.style.width='100%';gdiviv.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';gbtn.style.borderRadius='50%50%';gbtn.style.lineHeight='80px';gbtn.style.textAlign='居中';gbtn.style.backgroundImage="线性渐变(#e66465,#9198e5)";gbtn.style.fontSize="初始";gbtn.style.cursor="指针";ghtml.appendChild(gbtn);//按钮拖动Dragfunction$("#gbtn").mousedown(function(e){gmove=true;startX=e.pageXstartY=e.pageYconsole.log("move",gmove);_gx=e.pageX-parseInt($("#gbtn").css("left"));_gy=e.pageY-parseInt($("#gbtn").css("top"));});$(文档).mousemove(函数(e){if(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("点击事件执行");changebg(4);}else{console.log("拖放事件执行");}gmove=false;});}3.手册（1）下载代码到本地完整代码地址：GitHub:https://github.com/yongtaozheng/Browser-plugin.git码云Gitee:https://gitee.com/zheng_yongtao/chrome-plug-in.git需要的可以克隆自己，欢迎stars切换到master目录：完整的文件目录如下：（2）修改背景图片或背景颜色打开changebg.js文件，f找到changebg方法，修改colors和bgimg数组（3）将插件文件放入浏览器打开扩展页面，将整个文件夹拉入此页面（4）体验点击上面的插件图标，出现一个将弹出带有按钮的弹出窗口。单击按钮切换或直接单击页面上的按钮。4.求点赞求明星点赞欢迎点赞收藏。如果大家有更好的想法，欢迎在评论区提出。感谢您的收看。再贴一下代码地址完整代码地址：GitHub：https://github.com/yongtaozheng/Browser-plugin.git码云Gitee：https://gitee.com/zheng_yongtao/chrome-plug-in.git需要的可以自己克隆，欢迎star更多插件浏览器网页背景换肤插件浏览器桌面挂件动画插件B站视频评论屏蔽插件鼠标点击烟花效果，妹子看完说爽

上一篇：前端食堂技术周刊第72期：Signals是前端框架的未来，Bun新文档

下一篇：code-servernginx反向代理

自制浏览器网页背景是一种怎样的体验？相关文章