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 资源下载