Chrome浏览器插件实现页面鼠标点击烟花成果
写在后面
成果如上图，鼠标点击之后页面会从底部发射一道烟花，在鼠标点击处绽开开来。
筹备工作
1.理解浏览器插件制作方法
chrome扩大：manifest.json文件相干字段
2.实现计划
在网页上动静插入一个canvas元素，通过canvas来制作并展现烟花成果粒子，联合鼠标的点击事件，来触发烟花射线发射。
3.入手撸代码
minifest.json
简略地将必须的参数配置残缺
{ "name": "烟花点击特效", "version": "1.0.0", "manifest_version": 2, "description": "烟花点击特效", "browser_action": { "default_title": "查看", "default_icon": "1.jpg" }, "content_scripts": [ { "matches": ["<all_urls>"], "js": ["firework.js"] } ], "permissions" : ["tabs", "activeTab"] //向浏览器申请的权限}firework.js
let body = document.getElementsByTagName('body')[0];let myCanvas = document.createElement('canvas');myCanvas.id = 'canvas';myCanvas.style.position = 'fixed';myCanvas.style.left = '0';myCanvas.style.top = '0';body.before(myCanvas);//before插入能够将canvas插入到body后面body.style.opacity = 0.9;// body.appendChild(myCanvas);//requestAnimFrame 封装，能够兼容所有浏览器window.requestAnimFrame=(function(){ return window.requestAnimationFrame|| window.webkitRequestAnimationFrame|| window.mozRequestAnimationFrame|| function(callback){ window.setTimeout(callback,1000/60) } })(); var canvas=document.getElementById("canvas"), // Canvas.getContext(contextID)返回一个用于在画布上绘图的环境； // 目前非法参数contextID只有"2d"，即二维绘图 ctx=canvas.getContext("2d"), // 获取电脑可视区域宽高 cw=window.innerWidth,ch=window.innerHeight, fireworks=[],//寄存烟花数组 particles=[],//寄存绽开粒子数组 hue=180,//设置色彩范畴 limiterTotal=5,//点击绽开速度 limiterTick=0,//点击计时器 timerTotal=40,//主动绽开速度 timerTick=0,//主动计时器 mousedown=false, mx,my; // 设置画布宽高 canvas.width=cw;canvas.height=ch; // 随机函数 function random(min,max){ return Math.random()*(max-min)+min } // 计算两点间隔 function calculateDistance(p1x,p1y,p2x,p2y){ var xDistance=p1x-p2x,yDistance=p1y-p2y;return Math.sqrt(Math.pow(xDistance,2)+Math.pow(yDistance,2)) } // 定义烟花对象 function Firework(sx,sy,tx,ty){ this.x=sx; this.y=sy; this.sx=sx; this.sy=sy; this.tx=tx; this.ty=ty; this.distanceToTarget=calculateDistance(sx,sy,tx,ty); //静止间隔 this.distanceTraveled=0; //生成的静止轨迹 this.coordinates=[]; this.coordinateCount=3; while(this.coordinateCount--){ this.coordinates.push([this.x,this.y]) } this.angle=Math.atan2(ty-sy,tx-sx); this.speed=2; this.acceleration=1.05; this.brightness=random(50,70);//烟花的亮度 this.targetRadius=1//烟花圈的半径 } //更新烟花地位 Firework.prototype.update=function(index){ this.coordinates.pop(); this.coordinates.unshift([this.x,this.y]); if(this.targetRadius<8){ this.targetRadius+=0.3 }else{ this.targetRadius=1 } this.speed*=this.acceleration; var vx=Math.cos(this.angle)*this.speed, vy=Math.sin(this.angle)*this.speed; this.distanceTraveled=calculateDistance(this.sx,this.sy,this.x+vx,this.y+vy); //如果烟花运行间隔大于或等于初始地位到指标地位之间的间隔，生成新烟花并移除以后烟花，否则更新烟花地位 if(this.distanceTraveled>=this.distanceToTarget){ //烟花绽放 createParticles(this.tx,this.ty); //销毁烟花点 fireworks.splice(index,1) }else{ this.x+=vx;this.y+=vy } }; // 烟花射线发射 Firework.prototype.draw=function(){ // 从新开始新门路，把之前的门路都清空掉 ctx.beginPath(); //先保留一个坐标 ctx.moveTo(this.coordinates[this.coordinates.length-1][0],this.coordinates[this.coordinates.length-1][1]); //从moveTo提供的坐标绘制到指定坐标 ctx.lineTo(this.x,this.y); //设置线条款式 ctx.strokeStyle="hsl("+hue+", 100%, "+this.brightness+"%)"; //通过此函数将以上绘制的图形绘制到画布上 ctx.stroke(); ctx.beginPath(); //画出鼠标点击时的圆圈 //arc(圆心的x坐标，圆心的y坐标，圆的半径，起始角（以弧度计，即l圆心的3点钟地位是0度），完结角，规定应该是顺时针还是逆时针画图(可选)) ctx.arc(this.tx,this.ty,this.targetRadius,0,Math.PI*2); //描边绘制 ctx.stroke() }; //烟花绽放办法 function Particle(x,y){ this.x=x;this.y=y;this.coordinates=[]; this.coordinateCount=5; while(this.coordinateCount--){ this.coordinates.push([this.x,this.y]) } // 往各个角度绽开 this.angle=random(0,Math.PI*2); this.speed=random(1,10); this.friction=0.95; this.gravity=1; this.hue=random(hue-20,hue+20); this.brightness=random(50,80); this.alpha=1; this.decay=random(0.015,0.03);//粒子隐没工夫（透明度减少速度） } Particle.prototype.update=function(index){ this.coordinates.pop(); this.coordinates.unshift([this.x,this.y]); //粒子静止 this.speed*=this.friction; this.x+=Math.cos(this.angle)*this.speed; this.y+=Math.sin(this.angle)*this.speed+this.gravity; this.alpha-=this.decay;//透明度减少 if(this.alpha<=this.decay){ particles.splice(index,1)//销毁烟花绽放粒子 } }; // 烟花绽放 Particle.prototype.draw=function(){ ctx.beginPath(); ctx.moveTo(this.coordinates[this.coordinates.length-1][0],this.coordinates[this.coordinates.length-1][1]); ctx.lineTo(this.x,this.y); //烟花的色彩 ctx.strokeStyle="hsla("+this.hue+", 100%, "+this.brightness+"%, "+this.alpha+")"; ctx.stroke() }; // 创立粒子 function createParticles(x,y){ //烟花绽放粒子数量 var particleCount=200; while(particleCount--){ particles.push(new Particle(x,y)) } } function loop(){ // 让浏览器循环调用指定的函数来更新动画。 requestAnimFrame(loop); hue+=0.5; ctx.globalCompositeOperation="destination-out"; ctx.fillStyle="rgba(0, 0, 0, 0.5)"; ctx.fillRect(0,0,cw,ch); ctx.globalCompositeOperation="lighter"; var i=fireworks.length; while(i--){ fireworks[i].draw(); fireworks[i].update(i) } var i=particles.length; while(i--){ particles[i].draw(); particles[i].update(i) } // 随机主动抉择地位 if(timerTick>=timerTotal){ //鼠标没有点击的状况 if(!mousedown){ // fireworks.push(new Firework(cw/2,ch,random(0,cw),random(0,ch/2))); timerTick=0 } }else{ timerTick++ } // 鼠标点击地位 if(limiterTick>=limiterTotal){ if(mousedown){ fireworks.push(new Firework(cw/2,ch,mx,my)); limiterTick=0 } }else{ limiterTick++ } } body.addEventListener("mousemove",function(e){ mx=e.pageX-body.offsetLeft - window.scrollX;//鼠标点击坐标 - body偏移量 - 窗口滚动间隔 my=e.pageY-body.offsetTop - window.scrollY;//鼠标点击坐标 - body偏移量 - 窗口滚动间隔 }); body.addEventListener("mousedown",function(e){ // e.preventDefault(); mousedown=true }); body.addEventListener("mouseup",function(e){ // e.preventDefault(); mousedown=false }); window.onload=loop;更多插件
浏览器网页背景换肤插件
浏览器桌面挂件动画插件
B站视频评论屏蔽插件
源码
码云（gitee）：https://gitee.com/zheng_yongtao/chrome-plug-in.git
GitHub：https://github.com/yongtaozheng/Browser-plugin.git
资源下载
csdn资源下载