Chrome浏览器插件实现页面鼠标点击烟花效果。效果如上图写在正面。鼠标点击后，页面会从底部发射烟花，在鼠标点击时绽放。准备工作1.了解浏览器插件的制作方法。Chrome扩展：manifest.json文件的相关字段。2、实施方案在网页中动态插入一个canvas元素，利用canvas创建并显示烟花效果粒子，结合鼠标点击事件，触发Fireworksray发射。3.动手代码minifest.json简单的把必要的参数配置完整{"name":"Fireworkclickspecificeffects","version":"1.0.0","manifest_version":2,"description":"Fireworkclick特殊效果","browser_action":{"default_title":"View","default_icon":"1.jpg"},"content_scripts":[{"matches":[""],"js":["firework.js"]}],"permissions":["tabs","activeTab"]//权限应用于浏览器}firework.jsletbody=document.getElementsByTagName('body')[0];letmyCanvas=document.createElement('canvas');myCanvas.id='canvas';myCanvas.style.position='fixed';myCanvas.style.left='0';myCanvas.style.top='0';正文。before(myCanvas);//插入前可以在body前面插入画布body.style.opacity=0.9;//body.appendChild(myCanvas);//requestAnimFrame封装，兼容所有浏览器window.requestAnimFrame=(function(){returnwindow.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||函数（回调）{window.setTimeout(回调,1000/60)}})();varcanvas=document.getElementById("canvas"),//Canvas.getContext(contextID)返回在画布上绘制的上下文；//目前合法的参数contextID只有"2d"，即二维绘图ctx=canvas.getContext("2d"),//获取计算机可视区域的宽高cw=window.innerWidth,ch=window.innerHeight,fireworks=[],//存储烟花数组particles=[],//存储bloom粒子数组hue=180,//设置colorrangelimiterTotal=5,//点击bloomspeedlimiterTick=0,//点击定时器timerTotal=40,//自动开花速度timerTick=0,//自动定时器mousedown=false,mx,my;//设置画布的宽度和高度canvas.width=cw;canvas.height=ch;//随机函数functionrandom(min,max){returnMath.random()*(max-min)+min}//计算两点之间的距离functioncalculateDistance(p1x,p1y,p2x,p2y){varxDistance=p1x-p2x,yDistance=p1y-p2y;returnMath.sqrt(Math.pow(xDistance,2)+Math.pow(yDistance,2))}//定义烟花对象函数Firework(sx,sy,tx,ty){这个.x=sx;你s.y=sy;这个.sx=sx;这个.sy=sy；这个.tx=tx;这个.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);这个.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;varvx=Math.cos(this.angle)*this.speed,vy=Math.sin(this.angle)*this.s速度;this.distanceTraveled=calculateDistance(this.sx,this.sy,this.x+vx,this.y+vy);//如果烟花移动距离大于等于初始位置到目标位置的距离，则生成新的Fireworks并移除当前烟花，否则更新烟花位置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坐标,圆半径,起始角(弧度,即3点钟位置l圆心为0度）和终止角，调节应为顺时针方向或者逆时针绘制（可选））ctx.arc(this.tx,this.ty,this.targetRadius,0,Math.PI*2);//描边绘制ctx.stroke()};//烟花绽放方法functionParticle(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;这。重力=1；this.hue=random(hue-20,hue+20);this.brightness=random(50,80);这个.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.速度*=this.摩擦力；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()};//创建粒子functioncreateParticles(x,y){//烟花绽放的粒子数varparticleCount=200;while(particleCount--){particles.push(newParticle(x,y))}}functionloop(){//让浏览器循环调用指定函数更新动画requestAnimFrame（循环）；色相+=0.5；ctx.globalCompositeOperation="目的地输出";ctx.fillStyle="rgba(0,0,0,0.5)";ctx.fillRect(0,0,cw,ch);ctx.globalCompositeOperation="打火机";vari=fireworks.length;while(i--){烟花[i].draw();fireworks[i].update(i)}vari=particles.length;while(i--){粒子[i].draw();particles[i].update(i)}//随机自动选择位置if(timerTick>=timerTotal){//鼠标没有被点击if(!mousedown){//fireworks.push(newFirework(cw/2,ch,随机(0,cw),随机(0,ch/2)));timerTick=0}}else{timerTick++}//鼠标点击位置if(limiterTick>=limiterTotal){if(mousedown){fireworks.push(newFirework(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=循环；更多插件浏览器页面背景换肤插件浏览桌面挂件动画插件B站视频评论屏蔽插件源码云（gitee）：https://gitee.com/zheng_yongtao/chrome-plug-in.gitGitHub:https://github.com/yongtaozheng/Browser-plugin。git资源下载csdn资源下载
