On a whim, I wanted to write a Chrome plugin. I didn’t know what to write, so I wrote a Christmas tree widget. Project source >>

Chrome Extension

The most important Chrome plugin is: index.html, manifest.json two files.

Here is a simple configuration of manifest.json:

{" manifest_version ": 2, / / name" name ":" Christmas tree ", / / version "version" : "1.0.0", / / describe "description" : "plug-in" Christmas tree, "browser_action" : {" default_popup ":" index.html "}, / / display icon "ICONS" : {" 16 ":" img / 24. PNG}}Copy the code

Christmas Tree writing

Christmas trees are mainly divided into three structures:

Pentagram, crown and roots

Pentagram

The best way I’ve come up with a pentagram is a combination of three triangles

 

You can use different colors at the beginning to distinguish between them, and you can use the same color at the end

 


.fivePointedStar {
            width: 50px;
            height: 50px;
            display: flex;
            padding: 50px;
            position: relative;
            z-index: 200;
        }

        .fivePointedStar div:nth-child(1) {
            border: 20px solid rgba(255, 255, 255, 0);
            border-width: 20px 30px;
            border-top-color: #ffD700;
            width: 0;
            height: 0;
        }

        .fivePointedStar div:nth-child(2) {
            border: 20px solid rgba(255, 255, 255, 0);
            border-width: 20px 30px;
            border-bottom-color: #ffD700;
            width: 0;
            height: 0;
            position: relative;
            transform: rotate(-35deg);
            top: -20px;
            left: -60px;
        }

        .fivePointedStar div:nth-child(3) {
            border: 20px solid rgba(255, 255, 255, 0);
            border-width: 20px 30px;
            border-bottom-color: #ffD700;
            width: 0;
            height: 0;
            position: relative;
            transform: rotate(-111deg);
            top: -5px;
            left: -128px;
        }
Copy the code

Canopy writing

The trunk of a tree is a little easier to write, and I initially thought of two ways:

1. Use a triangle stack (I used this one)

2. Use triangle + rounded border (it looks better, but it takes a lot of effort)

CrownTree div {border: 20px solid rgba(255, 255, 255, 0); border-bottom-color: #093; width: 0; height: 0; } .crownTree div:nth-child(1) { border-width: 50px 30px; position: relative; } .crownTree div:nth-child(2) { border-width: 60px 51px; position: relative; top: -90px; left: -20px; }Copy the code

Written in the trunk

A rounded rectangle

/* Root */. TreeRoot {width: 37px; height: 47px; border-radius: 12px; border: #663300 1px solid; background-color: #333300; position: relative; top: -771px; left: 65px; }Copy the code