I am participating in the Mid-Autumn Festival Creative Submission Contest. Please see: Mid-Autumn Festival Creative Submission Contest for details.
Mid-Autumn Festival Creative Submission Contest
The annual Mid-Autumn Festival to.
Accidentally see the gold digging Mid-Autumn festival activities, and to hook up with technology, but also to hook up with the Mid-Autumn Festival, a lot of articles are written rotten….
“The article was written by nature, and it was written by chance.”
Suddenly found that the gold page is too simple, say the wrong thing, is simple and elegant, meaningful atmosphere.
Then take this opportunity, I will help the nuggets greatly change the skin ~
Technical selection:
Chrome Plugin development
This article is the primary Chrome development, at the same time involves some canvas knowledge, you think operation is too hot do not blame!!
Take a look at the results:
Preparation process
First, develop a Chrome plugin, most importantly its manifest file manifest.json.
manifest_version
The listing version, I'll just write a 2 here and I'll be done.Copy the codebrowser_action
Here are some of the configurations displayed by the plug-in.Copy the codeDefault_icon is the default icon. I’m using a little apple icon here.
Default_title is the default title.
Default_popup is the default page for our plugin.
content_scripts
Here is injecting CSS and JS code into the page.
Matches is the page where the plugin works. I only match the Nuggets domain name https://juejin.cn/*.
Js is the JS code that is injected into the page. I’ve introduced my own code js/ Content-script.js and js/jquery.min.js.
CSS is the CSS code that is injected into the page. In general, stylesheets here have a very high priority, no higher can be used! important.
Run_at this is when our injected script runs, and here document_end refers to after the page is loaded.
Here is a list of my plugins:
{
"manifest_version": 2."name": "jueJinSkin"."version": "0.0.1"."description": "Mid-Autumn Festival Activities - Digging for Gold"."icons": {
"16": "assets/icon.png"."48": "assets/icon.png"."128": "assets/icon.png"
},
"browser_action": {
"default_icon": "assets/icon.png"."default_title": "Mid-Autumn Festival is here."."default_popup": "index.html"
},
"content_scripts": [{
"matches": ["https://juejin.cn/*"]."js": ["js/jquery.min.js"."js/content-script.js"]."css": ["css/index.css"]."run_at": "document_end"}}]Copy the codeAnalyze and modify the nuggets page
When we want to skin a page, we must carefully analyze the DOM structure of the page and find the only node we need to change.
For example, let’s find the largest background.
Then inject the CSS changes.
#juejin {
background: url("//yun.duiba.com.cn/aurora/assets/a73036f55b0c256849761eb2c8cb30e4a839d63e.jpeg") repeat-y ! important;
background-size: cover;
}
Copy the codeAll of these page changes are stupid, the only thing you need to pay attention to is your design ability and aesthetic sense.
Next, let’s add a border of yutu to our head picture.
Here we need to create a div and insert it into the avatar’s box.
function changeDom() {
let appLink = $(".main-nav").find(".nav-list").find(".menu").get(0);
var border = document.createElement("div");
border.classList = "avatar-con";
appLink.append(border);
}
Copy the codeThen style avatar-Con.
.avatar-con{
position: absolute;
top: 46%;
left: 67%;
width: 4rem;
height: 4rem;
transform: translateX(-50%) translateY(-50%);
background: url("//yun.duiba.com.cn/aurora/assets/465d1b221a4a0845df5474fe2a6254d18707a154.png") no-repeat center/100%;
pointer-events: none;
}
Copy the codeThis way we have successfully added a rabbit border to the avatar.
Everything else is similar, such as adding a Mid-Autumn border to the like, comment, etc buttons.
//
function changeTextLeftBtn() {
var btnArr = [];
btnArr.push($(".like-btn"));
btnArr.push($(".comment-btn"));
btnArr.push($(".collect-btn"));
btnArr.push($(".report-btn"));
btnArr.push($(".weibo-btn"));
btnArr.push($(".qq-btn"));
btnArr.push($(".wechat-btn"));
btnArr.forEach(item= > {
const border = document.createElement("div");
border.classList = "like-btn-con";
item.prepend(border);
});
}
Copy the code
Set off a firework for the nuggets
Here we use canvas to draw fireworks, this operation is also badly played on the Internet, I also have one here, you can take a look.
First, we create a canvas to insert into the page body.
$("body").append('<canvas id="canvas"></canvas>');
Copy the codeThen get the Canvas context.
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const cW = canvas.width = window.innerWidth;
const cH = canvas.height = window.innerHeight;
Copy the codeWe thought about how to use Canvas to make a firework:
- Fireworks are scattered from a single point
- Each point moves a curve from transparent to solid
- Keep drawing dots from light to dark color
- Use requestAnimationFrame for interface looping
- Let’s write a particle emitter
The implementation method is very simple.
Let’s implement a particle:
function Vector(x, y) {
return {
x,
y
};
}
// Get the range of random numbers
function randomCount(min, max) {
return Math.random() * (max - min) + min
}
// A particle
function Particle(position, _H) {
/ * * * / position
this.position = position;
/** Previous frame position */
this.lastPosition = position;
/** direction radian */
this.angle = randomCount(0.Math.PI * 2);
/ * * * / speed
this.speed = randomCount(2.10);
/** Attenuation coefficient */
this.F = 0.96;
/ * * * / gravity
this.G = 1.2;
/ * * * / hue
this.H = randomCount(_H - 30, _H + 30);
/** saturation */
this.S = "100%";
/ * * * / brightness
this.L = `${randomCount(50.80)}% `;
/** transparency */
this.A = 0;
/** Transparency decrement */
this.AD = randomCount(0.02.0.03);
/ * * update * /
Particle.prototype.update = function (_index) {
this.draw();
this.lastPosition = this.position;
this.speed *= this.F;
const _x = this.position.x + this.speed * Math.cos(this.angle);
const _y = this.position.y + this.speed * Math.sin(this.angle) + this.G;
this.position = new Vector(_x, _y);
this.A += this.AD;
if (this.A > 0.85) {
particleList.splice(_index, 1); }}/** 绘制 */
Particle.prototype.draw = function () {
ctx.beginPath();
ctx.moveTo(this.position.x, this.position.y);
ctx.lineTo(this.lastPosition.x, this.lastPosition.y);
ctx.strokeStyle = `hsla(The ${this.H}.The ${this.S}.The ${this.L}.The ${this.A}`
ctx.lineWidth = 3;
ctx.lineCap = 'round'; ctx.stroke(); }}Copy the codeParticle. The prototype. The update method to perform each frame. This way each particle of our firework can be mapped.
In this way, we new many particles have been able to get the prototype of fireworks.
/ * * * / particles
var particleList = [];
for (let i = 0; i < 60; i++) {
particleList.push(new Particle(this.position, this.H));
}
Copy the code
But after the fireworks are on, when are they removed?
When the opacity is greater than a certain point, remove, at which point each firework particle is drawn.
if (this.A > 0.85) {
particleList.splice(_index, 1);
}
Copy the codeNext, we need to map the rising part of the firework. It’s even simpler here, just like the particle, when the firework rises to a certain height, it starts to explode.
/** Set off fireworks */
function PlayFire(position, _height) {
/ * * * / position
this.position = position;
/** Previous frame position */
this.lastPosition = position;
/** Explosion height */
this.boomH = position.y - _height;
/** Fireworks height */
this.height = _height;
/** Each move distance */
this.dis = 14.2;
/ * * * / hue
this.H = randomCount(0.360);
/** saturation */
this.S = "100%";
/ * * * / brightness
this.L = `${randomCount(50.80)}% `;
/** transparency */
this.A = 1;
/ * * update * /
PlayFire.prototype.update = function (_index) {
this.draw();
this.lastPosition = this.position;
const _y = this.position.y - this.dis;
if (this.position.y <= this.boomH) {
for (let i = 0; i < 60; i++) {
particleList.push(new Particle(this.position, this.H));
}
fireList.splice(_index, 1);
} else {
this.position = new Vector(this.position.x, _y); }}/** 绘制 */
PlayFire.prototype.draw = function () {
ctx.beginPath();
ctx.moveTo(this.position.x, this.position.y);
ctx.lineTo(this.lastPosition.x, this.lastPosition.y);
ctx.strokeStyle = `hsla(The ${this.H}.The ${this.S}.The ${this.L}.The ${this.A}`
ctx.lineWidth = 3;
ctx.lineCap = 'round'; ctx.stroke(); }}Copy the codeIn this way, we draw a similar fireworks display.
Finally, we added the frame control, each group of fireworks play 8, every 180 frames cycle.
/ * * * / particles
var particleList = [];
/** Fireworks barrel */
var fireList = [];
/** a wave interval */
var oneInterval = 180;
var oneTimer = 180;
/** Auto play interval */
var fireinterval = 20;
/** Frame timing - each */
var timer = 0;
function render() {
window.requestAnimationFrame(render);
particleList.forEach((item, index) = > {
item.update(index);
});
fireList.forEach((item, index) = > {
item.update(index);
});
if (oneTimer >= oneInterval) {
if (timer >= fireinterval) {
var playfire = new PlayFire({
x: randomCount(200.1500),
y: 1000
}, 800);
fireList.push(playfire)
timer = 0;
} else{ timer++; }}if (oneTimer >= oneInterval + fireinterval * 8) {
oneTimer = 0;
timer = 0;
} else{ oneTimer++; }}Copy the codeAt this point, we see the fireworks explode and disappear at the same time, there is no sense of hierarchy. We overlay a transparent color RGBA (0, 0, 0, 0.2) before each render. That’s where the layers come in.
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = 'rgba (0, 0, 0, 0.2)';
ctx.fillRect(0.0, cW, cH);
ctx.globalCompositeOperation = 'lighter';
Copy the code
In just over 100 lines of code, we implemented a fireworks display, then we injected the script into the page, and the fireworks were off.
Delete the AD
I accidentally found that the nuggets AD is pretty, but I still don’t want it, so let’s delete it for him.
// Delete ads
function deleteAdvertise() {
var appSidebarBlock = $(".app-download-sidebar-block");
appSidebarBlock.remove();
var bannerBlock = $(".banner-block");
bannerBlock.remove();
var wechatSidebarBlock = $(".wechat-sidebar-block");
wechatSidebarBlock.remove();
var moreBlock = $(".more-block");
moreBlock.remove();
var stickyBlock = $(".sticky-block");
stickyBlock.remove();
}
Copy the codeFind the AD node and delete it. However, some browsing AGO is dynamically implanted, which is a bit more troublesome and needs to monitor the dom change of the page to delete it. Fortunately, the Nuggets are more normal.
Join kanban Girl
This is familiar to many students.
Inject L2D JS into the page first.
"js/L2Dwidget.min.js"."js/L2Dwidget.0.min.js"."js/jquery.min.js"
Copy the codeThen set some configuration items:
L2Dwidget.init({
"display": {
"superSample": 2."width": 200."height": 400."position": "right"."hOffset": 0."vOffset": 0}});Copy the codeAnd then we’re done.
At the end
The author here is just a simple design, a lot of things on the page can be set. Friends can also design their own gold-digging pages according to their own preferences.
To put it bluntly, I’m here for the prize, and I spent two hours doing it. Ha ha ha ~ ~ ~
All so licking nuggets dad, but also can not recommend, praise up 🍉🍉🍉
Welcome to pat brick correction, the author’s skill is shallow, if there is improper place please be corrected!
This article is shallow, hope you don’t hesitate to your comments and praise ~ note: this article is the author’s painstaking work, reprint must be declared
Reference:
Github.com/sxei/chrome…