合并鼠标效果以及CSDN文章自动展开（郑小双的代码）

packages/shell-chrome/assets/css/main.css

@@ -0,0 +1,96 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+li {
+  list-style: none;
+}
+a {
+  text-decoration: none;
+}
+#popup {
+  height: 250px;
+  width: 200px;
+  background: linear-gradient(to right bottom, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%);
+}
+#popup header {
+  width: inherit;
+  height: 30px;
+  background: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
+}
+#popup header img {
+  height: inherit;
+}
+#popup .article ul li {
+  margin: 5px 0;
+  height: 45px;
+  background: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%);
+}
+#popup .article ul li span {
+  font-size: 16px;
+  line-height: 45px;
+  margin-left: 5px;
+}
+#popup .article ul li #click-per .button {
+  position: relative;
+  float: right;
+  top: 6px;
+  right: 6px;
+  width: 66px;
+  height: 32px;
+  border-radius: 100px;
+}
+#popup .article ul li #click-per .button .checkbox {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 3;
+}
+#popup .article ul li #click-per .button .knobs,
+#popup .article ul li #click-per .button .layer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+#popup .article ul li #click-per .button .knobs {
+  z-index: 2;
+}
+#popup .article ul li #click-per .button .layer {
+  border-radius: 100px;
+  width: 100%;
+  background-color: #ebf7fc;
+  z-index: 1;
+}
+#popup .article ul li #click-per .button .knobs::before {
+  content: "YES";
+  position: absolute;
+  top: 2px;
+  left: 34px;
+  width: 20px;
+  height: 10px;
+  color: #fff;
+  font-size: 10px;
+  font-weight: bold;
+  text-align: center;
+  line-height: 1;
+  padding: 9px 4px;
+  background-color: #03a9f4;
+  border-radius: 50%;
+}
+#popup .article ul li #click-per .button .checkbox:checked + .knobs:before {
+  content: "NO";
+  left: 3px;
+  background-color: #f44336;
+}
+#popup .article ul li #click-per .button .checkbox:checked ~ .layer {
+  background-color: #fcebeb;
+}
+#popup .article ul li #click-per .button .knobs,
+#popup .article ul li #click-per .button .knobs:before,
+#popup .article ul li #click-per .button .layer {
+  transition: 0.3s ease all;
+}

packages/shell-chrome/assets/css/main.less

@@ -0,0 +1,105 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+li {
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
+}
+
+#popup {
+    height: 250px;
+    width: 200px;
+    background: linear-gradient(to right bottom, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%);
+    header{
+        width: inherit;
+        height: 30px;
+        background: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);;
+        img {
+            height: inherit;
+        }
+    }
+    .article{
+        ul{
+            li{
+                margin: 5px 0;
+                height: 45px;
+                background: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%);
+                span{
+                    font-size: 16px;
+                    line-height: 45px;
+                    margin-left: 5px;
+                }
+                #click-per{
+                    .button {
+                        position: relative;
+                        float: right;
+                        top: 6px;
+                        right: 6px;
+                        width: 66px;
+                        height: 32px;
+                        border-radius: 100px;
+                        .checkbox {
+                            position: relative;
+                            width: 100%;
+                            height: 100%;
+                            opacity: 0;
+                            cursor: pointer;
+                            z-index: 3;
+                        }
+                        .knobs,
+                        .layer {
+                            position: absolute;
+                            top: 0;
+                            right: 0;
+                            bottom: 0;
+                            left: 0;
+                        }
+                        .knobs {
+                            z-index: 2;
+                        }
+                        .layer{
+                            border-radius: 100px;
+                            width: 100%;
+                            background-color: #ebf7fc;
+                            z-index: 1;
+                        }
+                        .knobs::before {
+                            content: "YES";
+                            position: absolute;
+                            top: 2px;
+                            left: 34px;
+                            width: 20px;
+                            height: 10px;
+                            color: #fff;
+                            font-size: 10px;
+                            font-weight: bold;
+                            text-align: center;
+                            line-height: 1;
+                            padding: 9px 4px;
+                            background-color: #03a9f4;
+                            border-radius: 50%;
+                        }
+                        .checkbox:checked+.knobs:before {
+                            content: "NO";
+                            left: 3px;
+                            background-color: #f44336;
+                        }
+                        .checkbox:checked~.layer {
+                            background-color: #fcebeb;
+                        }
+                        .knobs,
+                        .knobs:before,
+                        .layer{
+                            transition: 0.3s ease all;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

packages/shell-chrome/assets/js/expand-full-text/expand.js

@@ -0,0 +1,25 @@
+/**
+ * TODO: 实现CSDN自动展开全文
+ */
+
+$(function() {
+    console.log("[BitDance extension] 学生助手插件 - CSDN阅读全文自动展开模块加载成功");
+    // 全文自动展开
+    function removeDOM(querySelector) {
+        let element = document.querySelector(querySelector)
+        if (element != null) {
+            element.parentNode.removeChild(element);
+        }
+    }
+    removeDOM(".hide-article-box");
+    $(".article_content").removeAttr('style');
+    window.onload = () => {
+        // 代码块自动展开
+        document.querySelectorAll("pre").forEach(targetNode => {
+            removeDOM(".hide-preCode-box");
+            if (targetNode.classList.contains("set-code-hide")) {
+                targetNode.classList.remove("set-code-hide");
+            }
+        })
+    }
+})

packages/shell-chrome/assets/js/mouse-effects/click.js

@@ -0,0 +1,94 @@
+/**
+ * TODO: 鼠标点击效果
+ */
+
+$(function() {
+    console.log("[BitDance extension] 学生助手插件 - 点击特效模块加载成功");
+
+    // 每次改变开关状态时刷新页面使功能及时生效
+    chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+        location.reload();
+        sendResponse('Reload page');
+    })
+
+    // 控制功能是否开启
+    chrome.storage.sync.get('clickState', function(budget) {
+        // 得到按钮开关状态
+        if (budget.clickState == false || budget.clickState == undefined) {
+            // console.log('click功能启动');
+            var hearts = [];
+
+            walk();
+
+            // 走起（初始化）
+            function walk() {
+                // 灵魂 css
+                css(".heart{width: 10px;height: 10px;position: fixed;background: pink;transform: rotate(45deg);}.heart::after,.heart::before{position: absolute;content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;}.heart::after{top: -5px;}.heart::before{left: -5px;}");
+                attachEvent();
+                gameloop();
+            }
+
+            // 动画效果
+            function gameloop() {
+                for (var i = 0; i < hearts.length; i++) {
+                    if (hearts[i].alpha <= 0) {
+                        document.body.removeChild(hearts[i].el);
+                        hearts.splice(i, 1);
+                        continue;
+                    }
+                    hearts[i].y--;
+                    hearts[i].scale += 0.004;
+                    hearts[i].alpha -= 0.013;
+                    hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale + ") rotate(45deg);background:" + hearts[i].color;
+                }
+                // refer: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame
+                requestAnimationFrame(gameloop);
+            }
+
+            function attachEvent() {
+                // 点击触发特效（♥）
+                window.onclick = function(event) {
+                    createHeart(event);
+                }
+            }
+
+            function createHeart(event) {
+                // 创建一个 div 并指定类名为 heart
+                var d = document.createElement("div");
+                d.className = "heart";
+                /**
+                 * @param el: 每个 div 的标识
+                 * @param x,y: 当前鼠标位置信息
+                 * @param scale: 放大系数
+                 * @param alpha: 透明度
+                 * @param color: 背景颜色
+                 */
+                hearts.push({
+                    el: d,
+                    x: event.clientX,
+                    y: event.clientY,
+                    scale: 1,
+                    alpha: 1,
+                    color: randomColor()
+                });
+                document.body.appendChild(d);
+            }
+
+            // 给网页加个 style 标签
+            function css(css) {
+                // 创建 style 标签
+                var style = document.createElement("style");
+                style.type = "text/css";
+                // css 内容注入
+                style.appendChild(document.createTextNode(css));
+
+                document.head.appendChild(style);
+            }
+
+            // 生成随机颜色
+            function randomColor() {
+                return "rgb(" + (Math.random() * 255) + "," + (Math.random() * 255) + "," + (Math.random() * 255) + ")";
+            }
+        }
+    });
+})

packages/shell-chrome/assets/js/mouse-effects/mouse-style.js

@@ -0,0 +1,19 @@
+/**
+ * TODO: 鼠标样式
+ */
+
+$(function() {
+    console.log("[BitDance extension] 学生助手插件 - 鼠标样式模块加载成功");
+    walk();
+
+    // 走起
+    function walk() {
+        changeMouse();
+    }
+
+    function changeMouse() {
+        $('*').hover(function() {
+            $(this).css("cursor", "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c%0A6QAABPxJREFUWEe9lltIalkYx9feak1hDBonIvVM0ZyKLmAM3YyIqB6KCgrK%0Abj710G1gKooJJrCYiB4q6qHefIgoKoaChpiieojQJIWiy0GygzaO0RVhSDTb%0Ae+1hOSlb3d56aL+Iur/1/db3/77/Whj4/6kGAOgAAPq37x/2gQEAyrRa7V9s%0ANhuTSqXk5eXlGUVRTR8FgwC+HB0dfc3JyWG7tq3RaAiZTAY/AgYBgNTU1Bed%0AThfBVHcE09DQQFxfX1+EUJkoAMAnAMDfoWroBMAwTAsh/ClYUACYIQzDfkeg%0ACQkJ5Pz8PG6xWB4oihIEW9MJwCRDsECVSoUqQ97c3BgrKioSNzc3I+kxZrMZ%0AikQinKIoVw7GJd1/BpLBH8zr6ysVHx9Pra2tUS0tLS9CoRBfW1vjJCQksFDM%0Azs4OUV1dPffy8vKLvzXcAKHKQF9ILpeTVVVVFL2B9/f3SQSTlJSEraysRAiF%0AQlagKtDL4zMNwWSoqakhNzY2nLtlehBMSUkJAtgDAKDRfvB+z0OfcGUYHx9/%0ALS4uxgoKCtwj7J0Ax3EAIQR7e3tEc3MzcX9/r6TDeAC8RwYulwufn59xpgos%0ALi46Li4u8LGxMQ9ABINM7+npSeTdoWHLMDIyQqhUKmp7e5tDhzg9PSXFYjEG%0AIWSEQw0cExMz5TMiiYmJNoPB8F0w/en/Ly0tvba2tnIKCgpIkUhEra6u4vn5%0A+VClUjFKgyojk8msFEXxfQDeIwMdBu2Mw+Ewzr5WqyXz8vIICOGPAIB/nCbI%0AsNMvSqXyq0Qi8dtYTNVBLri6usoYY7FYkCkRVqu1CtkDPZ6RVCAQ2A0GQ8To%0A6Cg8Pj4GEokEDg4OemjsDVFbW0vy+XxSoVC4zxRUjeTkZIfJZPoVADDDBM4I%0AgGGYjsfjfdna2oLIZA4PD4ny8nJ8YGAAyuXyoCOHEvX19dlnZ2f/dDgcDYH6%0AiQlgqLKycmh4eJhFdzi0SFlZmaO9vZ2qr6/38H2RSARvb28JkiQj5ubmHB0d%0AHc4qZGdn205OTlJceodUAQzDKGQcaWlpdp1O5zMNLmPp6uoiULPNzMyw0G96%0AvZ64uroCubm5OI/Hc49eMAjvCkRJpdJ/l5eX2fn5+Xa1Wu0DUFhYSCqVSqf9%0ASiQSQq1Ws6Ojo6FCoYBSqZRRnjeIH4JaMQDgc29v7+XU1FSk0WgkHx4ePA4a%0AlLSxsZFYWFhg0UetqamJnJiYwAQCAaPp0OTwgfDpAdTJT09PzoWYZMBxHPpz%0At2DmlZWVZTs/P/eAYDIis8lkike7KSoqsh0cHKBrlvNB9trW1gY0Go37BOzp%0A6bFNT0+73wkXwt8YIm8nMjIyMLPZ7JThzT7Z9N2jOedyuX+kp6dXHR8fvwvC%0A73UpMjJyxuFw/AwAcMoxODhIeJ9qSUlJdqPRiBILxWLxZTgQKSkpdr1eHxXw%0AvvZWzl2Kokq9S4vslc/n99EcLiyIycnJ1/7+/u9DAfi8u7v7rbS01GPEuFyu%0Aw2q1ehgSupKLxeLrYJVYX1931NXVyQEA46EAgLi4ONvd3Z3bE9CplpOTU+F9%0AsLxVKSAEPbm/05CpkT1kYLFYLxDCQHeGT5mZmddnZ2cejemdPBwAtwxoGlpb%0AW5MD+burEnQIpuThAIDY2Fj74+NjJI7jFnSTCTbvdIjOzk68u7t7GGnuHRdS%0AD7gWw3H8NwhhT4jJ6a8hKWxMcf8BWQiA/lSw+WUAAAAASUVORK5CYII=), crosshair");
+        });
+    }
+})

packages/shell-chrome/manifest.json

@@ -7,32 +7,51 @@
     "keyword": "ss"
   },
   "icons": {
-    "16": "assets/image/search-256.png",
-    "48": "assets/image/search-256.png",
-    "128": "assets/image/search-256.png"
+    "16": "assets/image/logo.png",
+    "48": "assets/image/logo.png",
+    "128": "assets/image/logo.png"
   },
   "background": {
     "scripts": [
+      "assets/js/lib/jquery.min.js",
       "assets/js/background.js",
-      "pages/advanced-search/js/background.js"
+      "assets/js/advanced-search/background.js"
     ]
   },
   "content_scripts": [
     {
       "matches": [
-        "<all_urls>"
+        "<all_urls>",
+        "*://*/*"
       ],
       "js": [
+        "assets/js/lib/jquery.min.js",
         "assets/js/content.js",
-        "pages/advanced-search/js/content.js"
+        "assets/js/advanced-search/content.js",
+        "assets/js/mouse-effects/click.js",
+        "assets/js/mouse-effects/mouse-style.js"
       ],
-      "css": []
+      "css": [],
+      "run_at": "document_start"
+    },
+    {
+      "matches": [
+        "http://blog.csdn.net/*",
+        "https://blog.csdn.net/*"
+      ],
+      "js": [
+        "assets/js/lib/jquery.min.js",
+        "assets/js/expand-full-text/expand.js" //,
+        // "assets/js/content-scripts/click.js",
+        // "assets/js/content-scripts/mouse-style.js"
+      ],
+      "run_at": "document_start"
     }
   ],
   "browser_action": {
-    "default_icon": "assets/image/icon_disabled.png",
+    "default_icon": "assets/image/logo.png",
     "default_popup": "popup.html",
-    "default_title": "这是一个默认title"
+    "default_title": "学生助手"
   },
   "commands": {
     "_execute_browser_action": {
@@ -43,6 +62,10 @@
       "description": "打开 [学生助手] 插件"
     }
   },
+  "web_accessible_resources": [
+    "/assets/image/*"
+  ],
+  // "default_locale": "zh_CN",
   "permissions": [
     "background",
     "contextMenus",

packages/shell-chrome/popup.html

@@ -1,18 +1,42 @@
 <!doctype html>
-<html>
+<html lang="zh">
+
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1">
     <title>BitDance</title>
     <link href="assets/css/main.css" type="text/css" rel="stylesheet">
 </head>
+
 <body>
     <div id="popup">
-  <div class="panel">
-    <p>Hello world!</p>
+        <header>
+            <img src="assets/image/logo.png" alt="Logo">
+        </header>
+        <div class="article">
+            <ul>
+                <li>
+                    <div id="expand">
+                    </div>
+                </li>
+                <li>
+                    <div id="mouse-style">
+                    </div>
+                </li>
+                <li>
+                    <div id="click-per">
+                        <span>点击特效</span>
+                        <div class="button">
+                            <input type="checkbox" id="button-3" class="checkbox" />
+                            <div class="knobs"></div>
+                            <div class="layer"></div>
                         </div>
                     </div>
-<script src="assets/js/common/jquery.min.js"></script>
-<script src="assets/js/popup.js"></script>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <!-- <script src="assets/js/lib/jquery.min.js"></script> -->
+    <!-- <script src="assets/js/popup.js"></script> -->
 </body>
+
 </html>