feat: 添加液态玻璃效果选项及相关资源

manifest.json

@@ -130,7 +130,8 @@
     {
       "resources": [
         "images/setting.svg",
-        "icons/*.png"
+        "icons/*.png", 
+        "images/noise.png"
       ],
       "matches": [
         "<all_urls>"

scripts/navigator/Navigator.js

@@ -58,6 +58,20 @@ function Navigator(btns, centerCustom, custom, inner) {
                     });
                 })
             ),
+            window.elements.Div({
+                innerHTML: `
+                    <svg style="position:absolute;width:0;height:0">
+                        <filter id="frosted" primitiveUnits="objectBoundingBox">
+                        <feImage id="feImg" href="" x="0" y="0" width="1" height="1" result="map" /> 
+                            <feGaussianBlur in="SourceGraphic" stdDeviation="0.02" result="blur" />
+                            <feDisplacementMap id="disp" in="blur" in2="map" scale="1" xChannelSelector="R" yChannelSelector="G">
+                                <animate attributeName="scale" to="1.4" dur="0.3s" begin="btn.mouseover" fill="freeze" />
+                                <animate attributeName="scale" to="1" dur="0.3s" begin="btn.mouseout" fill="freeze" />
+                            </feDisplacementMap>
+                        </filter>
+                    </svg>
+                `
+            })
         ]
     );
 }
@@ -135,6 +149,22 @@ function init() {
 
     var navigator = Navigator(btns, { innerText: "🚀" });
     document.documentElement.appendChild(navigator);
+
+    chrome.storage.sync.get("LiquidGlass", function (i) {
+        if (i.LiquidGlass) {
+            document.getElementById("feImg").setAttribute("href", chrome.runtime.getURL("images/noise.png"));
+            document.getElementById("ez-navigator-center").classList.add("liquid-glass");
+            document.querySelectorAll(".ez-inner").forEach(function (el) {
+                el.classList.add("liquid-glass");
+            });
+        } else {
+            document.getElementById("ez-navigator-center").classList.remove("liquid-glass");
+            document.querySelectorAll(".ez-inner").forEach(function (el) {
+                el.classList.remove("liquid-glass");
+            });
+        }
+    });
+
 }
 
 init();

scripts/setting/jsx/Setting.js

@@ -236,6 +236,45 @@ async function ExamBaseButton(custom, inner) {
     ])
 }
 
+async function LiquidGlass(custom, inner) {
+    return window.elements.Div({
+        style: {
+            textAlign: "left",
+            marginLeft: "15px",
+        },
+    }, [
+        window.elements.Input(
+            {
+                type: "checkbox",
+                id: "ez-liquid-glass-checkbox",
+                style: {
+                    width: "20px",
+                    height: "20px",
+                    verticalAlign: "middle",
+                },
+                checked: (await window.utils.getStorage('LiquidGlass')).LiquidGlass || false,
+                onClick: async function (e) {
+                    let isChecked = e.target.checked;
+                    await chrome.storage.sync.set({
+                        LiquidGlass: isChecked,
+                    });
+
+                },
+            }, []
+        ),
+        window.elements.Label({
+            htmlFor: "ez-liquid-glass-checkbox",
+            innerText: "Liquid Glass",
+            style: {
+                fontSize: "15px",
+                color: "#555555",
+                verticalAlign: "middle",
+                marginLeft: "10px",
+                marginBottom: "0",
+            },
+        }),
+    ])
+}
 
 function SettingBlock(name, element) {
     return window.elements.Div({
@@ -276,6 +315,7 @@ window.popup.SettingPopup = async function SettingPopup(custom, inner) {
             SettingBlock("Set User", window.popup.SetUserForm()),
             SettingBlock("Quick Logout", LogoutButton()),
             SettingBlock("Exam Base", await ExamBaseButton()),
+            SettingBlock("UI", await LiquidGlass()),
         ]
         )
     )

styles/navigator.css

@@ -98,3 +98,8 @@
     background-color: #e4eafa;
     color: #000000;
 }
+
+.liquid-glass {
+    backdrop-filter: url(#frosted) !important;
+    background: rgba(255, 255, 255, .08) !important;
+}