Chrome plugin for page mouse click fireworks effect

Writing in the front

As shown in the image above, a mouse click sends a firework from the bottom of the page that explodes at the click.

The preparatory work

1. Understand how to make browser plug-ins

Chrome extension: Manifest.json file related fields

2. Implementation scheme

Dynamically insert a Canvas element on the web page, make and display firework effect particles through canvas, and trigger firework ray emission combined with mouse click events.

3. Manual manual code

minifest.json

Simply configure all the necessary parameters

{
    "name": "Fireworks Click effects"."version": "1.0.0"."manifest_version": 2."description": "Fireworks Click effects"."browser_action": {
        "default_title": "View"."default_icon": "1.jpg"
    },
    "content_scripts": [{"matches": ["<all_urls>"]."js": ["firework.js"]}],"permissions" : ["tabs"."activeTab"] // Permissions requested from the browser
}
Copy the code

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 inserts canvas in front of body
body.style.opacity = 0.9;
// body.appendChild(myCanvas);

//requestAnimFrame package, compatible with all browsers
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) returns an environment used to draw on the Canvas;
		// contextID is only "2d", i.e. 2d drawing
		ctx=canvas.getContext("2d"),
		// Get the width of the viewable area of the computer
		cw=window.innerWidth,ch=window.innerHeight,
		fireworks=[],// Store the fireworks array
		particles=[],// Store an array of blooming particles
		hue=180.// Set the color range
		limiterTotal=5.// Click bloom speed
		limiterTick=0.// Click the timer
		timerTotal=40.// Auto bloom speed
		timerTick=0.// Automatic timer
		mousedown=false,
		mx,my;
		// Set the canvas width and heightcanvas.width=cw; canvas.height=ch;// random function
	function random(min,max){
		return Math.random()*(max-min)+min
		}
		// Calculate the distance between two points
	function calculateDistance(p1x,p1y,p2x,p2y){
		var xDistance=p1x-p2x,yDistance=p1y-p2y;return Math.sqrt(Math.pow(xDistance,2) +Math.pow(yDistance,2))}// Define the firework object
	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);
		// Distance of movement
		this.distanceTraveled=0;
		// The generated trajectory
		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);// The brightness of the fireworks
		this.targetRadius=1// The radius of the wreath
		}
		// Update the firework location
	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 the distance of the firework is greater than or equal to the distance between the initial position and the target position, a new firework is generated and the current firework is removed, otherwise the firework position is updated
		if(this.distanceTraveled>=this.distanceToTarget){
			// Fireworks burst
			createParticles(this.tx,this.ty);
			// Destroy the fireworks
			fireworks.splice(index,1)}else{
				this.x+=vx;this.y+=vy
				}
			};
	// Fireworks emit rays
	Firework.prototype.draw=function(){
		// Start a new path, clearing all previous paths
		ctx.beginPath();
		// Save a coordinate
		ctx.moveTo(this.coordinates[this.coordinates.length-1] [0].this.coordinates[this.coordinates.length-1] [1]);
		// Draw from the coordinates provided by moveTo to the specified coordinates
		ctx.lineTo(this.x,this.y);
		// Set the line style
		ctx.strokeStyle="hsl("+hue+"100%,"+this.brightness+"%)";
		// Use this function to draw the above graphics onto the canvas
		ctx.stroke();
		ctx.beginPath();
		// Draw the mouse click circle
		// Arc (center of the circle x coordinate, center of the circle y coordinate, radius of the circle, starting Angle (in radians, l center of the circle at 3 o 'clock is 0 degrees), ending Angle, specify whether to draw clockwise or counterclockwise (optional))
		ctx.arc(this.tx,this.ty,this.targetRadius,0.Math.PI*2);
		// Stroke draw
		ctx.stroke()
		};
	// Fireworks display method
	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])
			}
		// Bloom in all directions
		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 disappear time (transparency increases speed)
		}
	Particle.prototype.update=function(index){
		this.coordinates.pop();
		this.coordinates.unshift([this.x,this.y]);
		// Particle motion
		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;// Transparency is increased
		if(this.alpha<=this.decay){
			particles.splice(index,1)// Destroy fireworks particles}};// Fireworks burst
	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);
		// The color of the fireworks
		ctx.strokeStyle="hsla("+this.hue+"100%,"+this.brightness+"%."+this.alpha+")";
		ctx.stroke()
		};
	// Create a particle
	function createParticles(x,y){
		// The number of particles in the fireworks
		var particleCount=200;
		while(particleCount--){
			particles.push(new Particle(x,y))
			}
		}
	function loop(){
		 // Let the browser loop through the specified function to update the animation.
		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)
			}
		// Select the position randomly
		if(timerTick>=timerTotal){
			// The mouse is not clicked
			if(! mousedown){// fireworks.push(new Firework(cw/2,ch,random(0,cw),random(0,ch/2)));
				timerTick=0}}else{
				timerTick++
			}
		// Mouse click position
		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;// Mouse click coordinates - body offset - window scroll distance
		my=e.pageY-body.offsetTop - window.scrollY;// Mouse click coordinates - body offset - window scroll distance
		});
	body.addEventListener("mousedown".function(e){
		// e.preventDefault();
		mousedown=true
		});
	body.addEventListener("mouseup".function(e){
		// e.preventDefault();
		mousedown=false
		});
	window.onload=loop;
Copy the code

More plug-in

Browser background skin plugin

Browser desktop widget animation plugin

B station video comment shielding plug-in

The source code

Code Cloud (Gitee) : gitee.com/zheng_yongt…

GitHub:github.com/yongtaozhen…

Download resources

CSDN resource download