为了帮助那些不擅长编写美化插件的新手小白用户，我们提供了一种便捷的方式，让小白们也能轻松打造出专属于自己的美化插件。

该方式支持对每一项 CSS 和 JS 进行灵活操作，即可以根据需求选择开启或关闭。

同时，用户还能通过填写名称进行详细备注，这样在查找特定功能时会更加高效便捷。通过这种方式，能让插件的功能真正 “动” 起来，在你有实际需求的时候随时开启使用，而在不需要的时候也能迅速关闭，避免资源的不必要占用。

预览图

插件介绍

李初一 为何要开发这款插件？核心目标是赋能小白用户，即使毫无技术基础，也能轻松制作个性化美化插件。

不仅如此，它还构建了一个分享桥梁，小白用户可将自己精心配置的美化数据，通过后台导入功能互相分享，打破站长之间的沟通壁垒，极大地促进站长群体间的交流互动，助力建立更广泛的人脉关系。

对于有特殊需求的站长而言，在特定时段启用独特样式的操作也变得轻而易举。

毕竟，可自由控制功能开关，远比固定模式实用得多。此外，插件还具备强大的防护与优化能力，能够妥善保护你的代码安全，防止他人窃取，同时自动压缩 CSS 代码，智能删除多余的空格与注释，让代码更精简高效 。

演示数据（如果实在看不懂的话，可以导入试试）

{"css_group":[{"css_title":"Logo\u626b\u5149","css_switcher":"0","css_code":"\/* logo\u626b\u5149 *\/\r\n.navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:\"\"; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}"},{"css_title":"\u5168\u7ad9\u53d8\u7070","css_switcher":"0","css_code":"\/*\u7f51\u7ad9\u5168\u5c40\u53d8\u6210\u7070\u8272*\/\r\nhtml{\r\n    -webkit-filter: grayscale(100%);\r\n            filter: grayscale(100%);\r\n}"},{"css_title":"\u84dd\u8272\u6eda\u52a8\u6761","css_switcher":"0","css_code":"\/*\u6eda\u52a8\u6761\u663e\u793a\u6837\u5f0f*\/\r\n::-webkit-scrollbar-thumb{\r\nbackground-color:#FF6666; \/*\u66f4\u6539\u559c\u6b22\u7684\u5341\u516d\u8fdb\u5236\u989c\u8272*\/\r\nheight:50px;\r\noutline-offset:-2px;\r\noutline:2px solid #fff;\r\n-webkit-border-radius:4px;\r\nborder: 2px solid #fff;\r\n}\r\n\/*\u6eda\u52a8\u6761\u5927\u5c0f*\/\r\n::-webkit-scrollbar{\r\nwidth:8px;\r\nheight:8px;\r\n}\r\n\/*\u6eda\u52a8\u6846\u80cc\u666f\u6837\u5f0f*\/\r\n::-webkit-scrollbar-track-piece{\r\nbackground-color:#fff;\r\n-webkit-border-radius:0;\r\n}"},{"css_title":"\u62df\u6001CSS","css_switcher":"0","css_code":".posts-item:not(.card) ,.author-header .avatar-img ,.full-widget-sm ,.header .sub-menu ,.modal-content ,.form-control ,.no_webshot.main-bg.theme-box.box-body.radius8.main-shadow ,.article ,.dropdown-menu ,.btn-score ,.float-right.round .float-btn ,.forum-posts.alone ,.zib-widget ,.posts-mini-lists ,.posts-item.card.style3 {\r\n    background: linear-gradient(180deg, #ecf2ff, var(--main-bg-color));\r\n    border: 2px solid var(--main-bg-color);\r\n    box-shadow: 6px 6px 15px 0 rgb(136 167 225 \/ 21%), -6px -6px 15px 0 var(--main-bg-color);\r\n    transition: all 0.2s;\r\n}"}],"javascript_group":[{"javascript_title":"FPS\u5e27\u7387","javascript_switcher":"1","javascript_code":"\/\/ \u5e27\u7387\u663e\u793a\r\n$('body').before('<div id=\"fps\" style=\"z-index:10000;position:fixed;top:3;left:3;font-weight:bold;background-image: linear-gradient( 120deg, #f093fb 0%, #f5576c 100%)\"><\/div>');\r\nvar showFPS = (function(){ \r\n    var requestAnimationFrame =  \r\n        window.requestAnimationFrame || \r\n        window.webkitRequestAnimationFrame || \r\n        window.mozRequestAnimationFrame ||\r\n        window.oRequestAnimationFrame ||\r\n        window.msRequestAnimationFrame || \r\n        function(callback) { \r\n            window.setTimeout(callback, 1000\/60); \r\n        }; \r\n    var e,pe,pid,fps,last,offset,step,appendFps; \r\n    fps = 0; \r\n    last = Date.now(); \r\n    step = function(){ \r\n        offset = Date.now() - last; \r\n        fps += 1; \r\n        if( offset >= 1000 ){ \r\n        last += offset; \r\n        appendFps(fps); \r\n        fps = 0; \r\n        } \r\n        requestAnimationFrame( step ); \r\n    }; \r\n    appendFps = function(fps){ \r\n        $('#fps').html(fps+'FPS');\r\n    };\r\n    step();\r\n})();","javascript_html":""}]}