浏览器一键换肤插件制作
1、思路
其实就是简单的在页面上新增了一个div来作为背景图片容器，再调整一下布局和触发事件就可以实现了。 具体实现代码如下：
2、代码
（1）插件配置文件
{ "name": "背景切换", "version": "1.0.0", "manifest_version": 2, "description": "浏览器背景切换--SADON_jung", "browser_action": { "default_title": "查看", "default_icon": "1.jpg", "default_popup": "popup.html" }, "content_scripts": [ { "matches": ["<all_urls>"],//匹配任意网站 "js": ["jquery-3.6.0.min.js","changebg.js"] } ], "permissions" : ["tabs", "activeTab"] //向浏览器申请的权限 }
配置文件相关属性可以查看
（2）弹出按钮页面
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery-3.6.0.min.js"></script> <script src="popup.js"> </script> <style> .cbtnlist{ display: flex; } .cbtnlist button{ border-radius: 50px; height: 50px; width: 50px; flex: 1; margin-top: 5px; margin-left: 5px; } .cbtnlist .zhanwei{ height: 20px; } #cancelchange{ color: crimson; } </style> </head> <body style="width:300px ;height:100px"> <div class="cbtnlist"> <button id="change">更换背景颜色</button><br/> <button id="changeimg">更换背景图片</button><br/> </div> <div class="cbtnlist"> <button id="cancelchange">删除背景</button><br/> </div> <div class="cbtnlist"> <div class="zhanwei"></div> </div> </body> </html>
（3）切换背景的相关逻辑代码
3.1 响应页面按钮请求
chrome.runtime.onMessage.addListener( function (request, sender, sendResponse) { if (request.action == "change") { changebg(0); sendResponse({state:'切换成功！'}); } if (request.action == "changeimg") { changebg(1); sendResponse({state:'切换成功！'}); } if (request.action == "cancelchange") { changebg(3); sendResponse({state:'删除背景！'}); } } );
3.2 生成随机数，随机切换图片
function randomNum(min,max){ switch(arguments.length){ case 1: return Math.floor(Math.random()*minNum+1); break; case 2: return Math.floor(Math.random()*(max-min+1)+min); break; default: return 0; break; } }
3.3 切换背景
function changebg(ind){ //存放可更换的颜色数组 let colors = ['#482936','#461629','#35333c','#11659a']; //存放可更换的图片数组 let bgimg = ['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', ]; let gdiv = document.getElementById('changdiv'); if(ind == 1){//随机切换图片 let num = randomNum(0,bgimg.length-1); gdiv.style.backgroundImage ="url("+bgimg[num]+")"; gdiv.style.backgroundRepeat = "no-repeat"; gdiv.style.backgroundSize = "100%"; }else if(ind == 0){//随机切换背景颜色 let num = randomNum(0,colors.length-1); gdiv.style.backgroundColor = colors[num]; }else if(ind == 3){//删除背景颜色和背景图片 gdiv.style.backgroundImage = ""; gdiv.style.backgroundColor = ""; }else if(ind == 4){//顺序切换背景图片 let num = byorder(bgimg.length); gdiv.style.backgroundImage ="url("+bgimg[num]+")"; } }
3.4 页面初始化
function init(){ //生成一个div作为图片容器 let gbody = document.getElementsByTagName('body')[0]; gbody.style.opacity = '0.8'; let ghtml = document.getElementsByTagName('html')[0], gdiv = document.createElement('div'); gdiv.id = 'changdiv' gdiv.style.position = 'fixed'; 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); //页面上的切换按钮 let gbtn = document.createElement('div'); gbtn.id = 'gbtn'; gbtn.innerText = "切换图片"; gbtn.style.opacity = '0.6'; gbtn.style.position = 'fixed'; gbtn.style.right = '40px'; gbtn.style.top = '50%'; gbtn.style.border = 'solid black 1px' gbtn.style.width = '80px'; gbtn.style.height = '80px'; gbtn.style.borderRadius = '50% 50%'; gbtn.style.lineHeight = '80px'; gbtn.style.textAlign = 'center'; gbtn.style.backgroundImage = "linear-gradient(#e66465, #9198e5)"; gbtn.style.fontSize = "initial"; gbtn.style.cursor = "pointer"; ghtml.appendChild(gbtn); //按钮拖拽功能 $("#gbtn").mousedown(function(e){ gmove=true; startX = e.pageX startY = e.pageY console.log("move",gmove); _gx=e.pageX-parseInt($("#gbtn").css("left")); _gy=e.pageY-parseInt($("#gbtn").css("top")); }); $(document).mousemove(function(e){ if(gmove){ var x=e.pageX-_gx;//控件左上角到屏幕左上角的相对位置 var y=e.pageY-_gy; $("#gbtn").css({"top":y,"left":x}); } }).mouseup(function(e){ endX = e.pageX; endY = e.pageY; let 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
有需要的可以自行clone，欢迎star
注意切换到master目录下：
完整文件目录如下：
（2）修改背景图片或背景颜色
打开changebg.js文件，找到changebg方法，修改colors和bgimg数组即可。
（3）将插件文件放入浏览器
打开扩展程序页面
将整个文件夹拉入这个页面即可
（4）体验
点击上方的插件图标就会弹出带按钮的弹窗，点击按钮即可切换
或者直接点击页面上的按钮也可以。
4、求赞 求star
喜欢的欢迎点赞收藏，还有什么更好的想法也欢迎在评论区提出，谢谢大家的观看。
再贴一遍代码地址
完整代码地址：
GitHub ： https://github.com/yongtaozheng/Browser-plugin.git
码云Gitee： https://gitee.com/zheng_yongtao/chrome-plug-in.git
有需要的可以自行clone，欢迎star
