Merge branch 'zxs' into develop

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

@@ -9,8 +9,7 @@ a {
   text-decoration: none;
 }
 body {
-  background: url(../image/weather/yun.webp);
-  /* background: linear-gradient(to right bottom, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%); */
+  background: linear-gradient(to right bottom, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%);
 }
 #popup {
   min-height: 450px;
@@ -18,39 +17,116 @@ body {
 }
 #popup header {
   width: inherit;
-  height: 30px;
+  height: 40px;
   background: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
 }
-#popup header img {
+#popup header #logo {
   height: inherit;
 }
-
-/* 天气的css */
-#weather{
-  display: inline-block;
+#popup header #weather {
+  float: right;
+  height: 100%;
+  line-height: 40px;
+  margin-right: 10px;
 }
-#weatherSite{
-  display: inline-block;
+#popup header #weather #weatherSite {
+  font-size: 13px;
+  margin-right: 5px;
 }
-#weatherText{
-  display: inline-block
+#popup header #weather #svg_w {
+  height: 15px;
+  vertical-align: text-bottom;
 }
-#weatherTemp{
-  display: inline-block
+#popup header #weather #weatherText {
+  font-size: 13px;
 }
-/* 天气的css end */
-
-#popup .article ul li {
-  margin: 5px 0;
+#popup header #weather #weatherTemp {
+  font-size: 13px;
+}
+#popup #back {
+  display: none;
+  position: absolute;
+  top: 54px;
+  left: 10px;
+  width: 15px;
+  height: 15px;
+  background-color: transparent;
+  border-top: 2px solid #fff;
+  border-left: 2px solid #fff;
+  transform: rotate(-45deg);
+  cursor: pointer;
+}
+#popup #article #buttons {
+  position: relative;
+  margin-top: 12px;
+}
+#popup #article #buttons #btnScreenshot,
+#popup #article #buttons #transform {
+  float: left;
+  top: 1px;
+  right: 5px;
+  width: 90px;
+  height: 40px;
+  color: #fff;
+  font-weight: 500;
+  cursor: pointer;
+  background-color: #71b0f3;
+  border: none;
+  border-radius: 4px;
+}
+#popup #article #buttons #btnScreenshot:hover {
+  background-color: #6FC6FF;
+}
+#popup #article #buttons #btnScreenshot:active {
+  transform: translate(0px, 1px);
+  box-shadow: 0px 1px 0px 0px;
+}
+#popup #article #buttons #transform {
+  margin-left: 10px;
+  background-color: #71b0f3;
+}
+#popup #article #buttons #transform:hover {
+  background-color: #6FC6FF;
+}
+#popup #article #buttons #transform:active {
+  transform: translate(0px, 1px);
+  box-shadow: 0px 1px 0px 0px;
+}
+#popup #article #buttons #clock {
+  float: left;
+  margin-left: 30px;
+  margin-right: 30px;
+  width: 42px;
+  height: 42px;
+  background-color: #F7BAEF;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 40px;
+  cursor: pointer;
+  font-size: 12px;
+}
+#popup #article #buttons #clock:active {
+  transform: translate(0px, 1px);
+  box-shadow: 0px 1px 0px 0px;
+}
+#popup #article .setting {
+  float: left;
+  width: 100%;
+  margin-top: 12px;
+}
+#popup #article .setting ul li {
+  margin: 7px 5px;
   height: 45px;
-  background: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%);
+  border-radius: 25px;
+  background: #ffffffc9;
+  padding: 0 1px 0 12px;
 }
-#popup .article ul li span {
+#popup #article .setting ul li span {
   font-size: 16px;
   line-height: 45px;
   margin-left: 5px;
 }
-#popup .article ul li #click-per .button {
+#popup #article .setting ul li .setting-item .button {
   position: relative;
   float: right;
   top: 6px;
@@ -59,7 +135,7 @@ body {
   height: 32px;
   border-radius: 100px;
 }
-#popup .article ul li #click-per .button .checkbox {
+#popup #article .setting ul li .setting-item .button .checkbox {
   position: relative;
   width: 100%;
   height: 100%;
@@ -67,24 +143,24 @@ body {
   cursor: pointer;
   z-index: 3;
 }
-#popup .article ul li #click-per .button .knobs,
-#popup .article ul li #click-per .button .layer {
+#popup #article .setting ul li .setting-item .button .knobs,
+#popup #article .setting ul li .setting-item .button .layer {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
 }
-#popup .article ul li #click-per .button .knobs {
+#popup #article .setting ul li .setting-item .button .knobs {
   z-index: 2;
 }
-#popup .article ul li #click-per .button .layer {
+#popup #article .setting ul li .setting-item .button .layer {
   border-radius: 100px;
   width: 100%;
   background-color: #ebf7fc;
   z-index: 1;
 }
-#popup .article ul li #click-per .button .knobs::before {
+#popup #article .setting ul li .setting-item .button .knobs::before {
   content: "YES";
   position: absolute;
   top: 2px;
@@ -100,79 +176,16 @@ body {
   background-color: #03a9f4;
   border-radius: 50%;
 }
-#popup .article ul li #click-per .button .checkbox:checked + .knobs:before {
+#popup #article .setting ul li .setting-item .button .checkbox:checked + .knobs:before {
   content: "NO";
   left: 3px;
   background-color: #f44336;
 }
-#popup .article ul li #click-per .button .checkbox:checked ~ .layer {
+#popup #article .setting ul li .setting-item .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;
-}
-#popup .article ul li #mouse-style .button {
-  position: relative;
-  float: right;
-  top: 6px;
-  right: 6px;
-  width: 66px;
-  height: 32px;
-  border-radius: 100px;
-}
-#popup .article ul li #mouse-style .button .checkbox {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  cursor: pointer;
-  z-index: 3;
-}
-#popup .article ul li #mouse-style .button .knobs,
-#popup .article ul li #mouse-style .button .layer {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-#popup .article ul li #mouse-style .button .knobs {
-  z-index: 2;
-}
-#popup .article ul li #mouse-style .button .layer {
-  border-radius: 100px;
-  width: 100%;
-  background-color: #ebf7fc;
-  z-index: 1;
-}
-#popup .article ul li #mouse-style .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 #mouse-style .button .checkbox:checked + .knobs:before {
-  content: "NO";
-  left: 3px;
-  background-color: #f44336;
-}
-#popup .article ul li #mouse-style .button .checkbox:checked ~ .layer {
-  background-color: #fcebeb;
-}
-#popup .article ul li #mouse-style .button .knobs,
-#popup .article ul li #mouse-style .button .knobs:before,
-#popup .article ul li #mouse-style .button .layer {
+#popup #article .setting ul li .setting-item .button .knobs,
+#popup #article .setting ul li .setting-item .button .knobs:before,
+#popup #article .setting ul li .setting-item .button .layer {
   transition: 0.3s ease all;
 }

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

@@ -19,89 +19,117 @@ body {
     width: 300px;
     header{
         width: inherit;
-        height: 30px;
+        height: 40px;
         background: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);;
-        img {
+        #logo {
             height: inherit;
         }
+        #weather{
+            float: right;
+            height: 100%;
+            line-height: 40px;
+            margin-right: 10px;
+            #weatherSite{
+                font-size: 13px;
+                margin-right: 5px;
             }
-    .article{
+            #svg_w{
+                height: 15px;
+                vertical-align: text-bottom;
+            }
+            #weatherText{
+                font-size: 13px;
+            }
+            #weatherTemp{
+                font-size: 13px;
+            }
+        }
+    }
+    #back {
+        display: none;
+        position: absolute;
+        top: 54px;
+        left: 10px;
+        width: 15px;
+        height: 15px;
+        background-color: transparent;
+        border-top: 2px solid #fff;
+        border-left: 2px solid #fff;
+        transform: rotate(-45deg);
+        cursor: pointer;
+    }
+    #article{
+        #buttons{
+            position: relative;
+            margin-top: 12px;
+            #btnScreenshot,
+            #transform{
+                float: left;
+                top: 1px;
+                right: 5px;
+                width: 90px;
+                height: 40px;
+                color: #fff;
+                font-weight: 500;
+                cursor: pointer;
+                background-color: #71b0f3;
+                border: none;
+                border-radius: 4px;
+            }
+            #btnScreenshot:hover{
+                background-color: #6FC6FF;
+            }
+            #btnScreenshot:active{
+                transform: translate(0px, 1px);
+                box-shadow: 0px 1px 0px 0px;
+            }
+            #transform{
+                margin-left: 10px;
+                background-color: #71b0f3;
+            }
+            #transform:hover{
+                background-color: #6FC6FF;
+             }
+             #transform:active{
+                transform: translate(0px, 1px);
+                box-shadow: 0px 1px 0px 0px;
+             }
+            #clock{
+                float: left;
+                margin-left: 30px;
+                margin-right: 30px;
+                width: 42px;
+                height: 42px;
+                background-color: #F7BAEF;
+                border-radius: 50%;
+                text-align: center;
+                line-height: 40px;
+                cursor: pointer;
+                font-size: 12px;
+            }
+            #clock:active{
+                transform: translate(0px, 1px);
+                box-shadow: 0px 1px 0px 0px;
+            }
+        }
+        .setting{
+            float: left;
+            width: 100%;
+            margin-top: 12px;
+            // opacity: 0.5;
             ul{
                 li{
-                margin: 5px 0;
+                    margin: 7px 5px;
                     height: 45px;
-                background: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%);
+                    border-radius: 25px;
+                    background: #ffffffc9;
+                    padding: 0 1px 0 12px;
                     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;
-                        }
-                    }
-                }
-                #mouse-style{
+                    .setting-item {
                         .button {
                             position: relative;
                             float: right;
@@ -170,3 +198,4 @@ body {
             }
         }
     }
+}

packages/shell-chrome/assets/html/pomodoro/assets/css/popup.css

@@ -1,10 +1,10 @@
 @import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');
-
 body {
     /* background-color: rgb(51, 11, 116); */
     background: url(../../images/pomo_green.jpeg) no-repeat;
-    background-image: "../../";
+    background-size: cover;
+    /* background-image: "../../"; */
     /* color: white; */
     font-family: 'Source Sans Pro', 'Fira Sans', sans-serif;
     margin: 0;
@@ -19,6 +19,63 @@ body {
     padding: 10px 0 20px;
 }
 
+#left {
+    position: absolute;
+    width: 25px;
+    height: 45px;
+    top: 180px;
+    left: 0;
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+    opacity: 0.5;
+    cursor: pointer;
+}
+
+#left:hover {
+    background-color: #b4b2b2;
+}
+
+#left::before {
+    position: absolute;
+    content: "";
+    top: 12px;
+    left: 5px;
+    width: 15px;
+    height: 15px;
+    border-top: 2px solid #bbb9b7;
+    border-left: 2px solid #bbb9b7;
+    transform: rotate(-45deg);
+}
+
+#right {
+    position: absolute;
+    width: 25px;
+    height: 45px;
+    top: 180px;
+    right: 0;
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+    opacity: 0.8;
+    cursor: pointer;
+}
+
+#right:hover {
+    background-color: #b4b2b2;
+}
+
+#right::after {
+    z-index: 9999;
+    position: absolute;
+    content: "";
+    top: 12px;
+    right: 5px;
+    width: 15px;
+    height: 15px;
+    border-top: 2px solid #585551;
+    border-right: 2px solid #585551;
+    transform: rotate(45deg);
+}
+
 .buttons {
     width: fit-content;
     margin: auto;
@@ -37,7 +94,9 @@ body {
     padding: 8px;
 }
 
+
 /*计数部分*/
+
 #countdown {
     clear: both;
     width: fit-content;
@@ -52,8 +111,9 @@ body {
     opacity: 0;
 }
 
-
-#start-btn,#end-btn,#reset-btn {
+#start-btn,
+#end-btn,
+#reset-btn {
     /* 文字颜色 */
     color: #f5e4b9;
     /* 清除背景色 */
@@ -71,24 +131,26 @@ body {
     /* width: 40px; */
     font-size: 16px;
     margin: 4px 2px;
-    -webkit-transition-duration: 0.4s; /* Safari */
+    -webkit-transition-duration: 0.4s;
+    /* Safari */
     transition-duration: 0.4s;
     cursor: pointer;
     text-decoration: none;
     text-transform: uppercase;
-
     text-shadow: 1px 1px 1px rgba(255, 255, 255, .1);
     border-radius: 25px;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-
-
 }
+
 #start-btn {
     background-color: white;
     color: black;
     border: 1px solid #f5e4b9;
 }
+
+
 /* 悬停样式 */
+
 #start-btn:hover {
     background-color: #f5e4b9;
     color: white;
@@ -100,12 +162,16 @@ body {
     border: 1px solid #ECB390;
     display: none;
 }
+
+
 /* 悬停样式 */
+
 #end-btn:hover {
     background-color: #ECB390;
     color: white;
 }
 
+
 /* #end-btn{
     width: 40px;
     margin: 10px auto 0;
@@ -115,6 +181,7 @@ body {
     cursor: pointer;
 } */
 
+
 /* #reset-btn {
     width: 40px;
     margin: 10px auto 0;
@@ -129,7 +196,10 @@ body {
     color: black;
     border: 1px solid #DD4A48;
 }
+
+
 /* 悬停样式 */
+
 #reset-btn:hover {
     background-color: #DD4A48;
     color: white;
@@ -141,13 +211,13 @@ body {
     display: none;
 } */
 
+
 /*选中的按钮*/
+
 .selected {
     background-color: rgb(244, 242, 248);
 }
 
-
-
 ul {
     padding: 0;
 }
@@ -164,7 +234,6 @@ li {
     float: right;
 }
 
-
 .hide {
     display: none;
 }

packages/shell-chrome/assets/html/pomodoro/assets/js/popup.js

@@ -35,8 +35,7 @@ document.addEventListener("click", (e) => {
         countdownTimer.innerHTML = "25:00";
         pomodoro = "pomodoro";
         minutes = 25;
-    chrome.storage.sync.set(
-      { minutes: minutes, countdownTimer: "25:00" },
+        chrome.storage.sync.set({ minutes: minutes, countdownTimer: "25:00" },
             function() {
                 if (!chrome.runtime.error) {
                     alert("added target pomodoro!");
@@ -56,8 +55,7 @@ function start() {
     chrome.storage.sync.get("pomoData", ({ pomoData }) => {
         const { minutes, seconds, status } = pomoData;
 
-    chrome.runtime.sendMessage(
-      {
+        chrome.runtime.sendMessage({
                 status: "start",
                 senderId: "pomo",
                 content: {
@@ -81,8 +79,7 @@ endBtn.addEventListener("click", () => {
 });
 
 function end() {
-  chrome.runtime.sendMessage(
-    {
+    chrome.runtime.sendMessage({
             status: "paused",
             senderId: "pomo",
         },
@@ -109,8 +106,7 @@ function getTimer() {
 
                 audio.play();
                 //不能放在页面上，要在后台进行
-        chrome.runtime.sendMessage(
-          {
+                chrome.runtime.sendMessage({
                         status: "playend",
                         senderId: "pomo",
                     },
@@ -153,8 +149,7 @@ function debounce(fn, delay) {
 // 重置按钮-绑定事件
 resetBtn.addEventListener("click", () => {
     setTimeout(() => {
-    chrome.runtime.sendMessage(
-      {
+        chrome.runtime.sendMessage({
                 status: "reset",
                 senderId: "pomo",
             },
@@ -195,3 +190,49 @@ chrome.storage.sync.get("pomoData", ({ pomoData }) => {
         countdownTimer.innerHTML = "25:00";
     }
 });
+
+// 轮播图
+let photos = ["../../image/background/pomo_green.jpeg",
+    "../../image/background/pomo1.png",
+    "../../image/background/pomo_waterfall.jpg",
+    "../../image/background/pomo_ocean.jpg",
+    "../../image/background/pomo_light.jpeg",
+    "../../image/background/pomo_leaf.jpeg",
+    "../../image/background/pomo_foresr.jpeg",
+    "../../image/background/pomo_fire.jpeg",
+    "../../image/background/pomo_crystal.jpg"
+]
+
+let len = photos.length;
+// console.log(len);
+let index = 0;
+document.getElementById('right').addEventListener("click", function() {
+    change_r();
+});
+document.getElementById('left').addEventListener("click", function() {
+    change_l();
+});
+
+function change_l() {
+    index--;
+    if (index < 0) {
+        index = len - 1;
+    }
+    change(index);
+}
+
+function change_r() {
+    index++;
+    if (index == len) {
+        index = 0;
+    }
+    change(index);
+}
+
+function change(n) {
+    document.body.style = "background: url(" + photos[n] + ") no-repeat; background-size: cover;";
+}
+
+let t = setInterval(function() {
+    change_r();
+}, 40000);

packages/shell-chrome/assets/html/pomodoro/background.js

@@ -30,6 +30,64 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
 
     const { status, content } = message;
 
+    if (status === "start") {
+        // sendResponse({
+        //   status:message.status
+        // })
+        countdown({...content, status });
+    } else if (status === "paused") {
+        clearTimeout(timer);
+        chrome.storage.sync.get("pomoData", ({ pomoData }) => {
+            console.log(pomoData);
+            chrome.storage.sync.set({ pomoData: {...pomoData, status: "paused" } });
+        });
+    } else if (status === "reset") {
+        clearTimeout(timer);
+        chrome.storage.sync.set({
+            pomoData: {
+                minutes: 24,
+                seconds: 60,
+                countdownTimer: "25:00",
+                status: "init",
+            },
+        });
+        chrome.browserAction.setBadgeText({ text: "" });
+    } else if (status === "init") {
+        //init初始化
+        chrome.storage.sync.set({
+            pomoData: {
+                minutes: 24,
+                seconds: 60,
+                countdownTimer: "25:00",
+                status: "init",
+            },
+        });
+    } else {
+        //playend 初始化
+        chrome.storage.sync.set({
+            pomoData: {
+                minutes: 24,
+                seconds: 60,
+                countdownTimer: "25:00",
+                status: "playend",
+            },
+        });
+    }
+
+    //创建结束通知：待完成
+
+    chrome.storage.sync.set({
+        status,
+    });
+    //后台播放完成提示音乐
+    if (message.action === "play") {
+        // audio.play();
+    }
+    sendResponse();
+  }
+
+  const { status, content } = message;
+
   if (status === "start") {
     // sendResponse({
     //   status:message.status
@@ -149,6 +207,35 @@ function countdown({ minutes, seconds, status }) {
           countdownTimer: currentTimer,
           status,
         },
+        function() {
+            if (!chrome.runtime.error) {
+                console.log("started");
+            }
+        }
+    );
+
+    //设置badge文本用来显示剩余分钟数
+    chrome.storage.sync.get("pomoData", ({ pomoData }) => {
+        chrome.browserAction.setBadgeText({ text: pomoData.minutes.toString() + ":" + pomoData.seconds.toString() });
+    });
+
+    console.log(currentTimer);
+    // count down every second, when a minute is up, countdown one minute
+    // when time reaches 0:00, reset
+    if (seconds > 0) {
+        timer = setTimeout(() => {
+            countdown({ minutes, seconds, status });
+        }, 1000);
+    } else if (minutes > 0) {
+        seconds = 60;
+        minutes--;
+        chrome.storage.sync.set({
+                pomoData: {
+                    seconds: seconds,
+                    minutes: minutes,
+                    countdownTimer: currentTimer,
+                    status,
+                },
             },
             function() {
                 if (!chrome.runtime.error) {

packages/shell-chrome/assets/html/pomodoro/popup.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -10,6 +11,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap" rel="stylesheet">
 </head>
+
 <body>
     <audio id="audio">
         <source src="./src/alarm.mp3" type="audio/mp3">
@@ -20,8 +22,8 @@
 
         <!-- 切换背景图片 -->
         <div class="slider">
-        <span class="left">&lt;</span>
-        <span class="right">&gt;</span>
+            <div id="left"></div>
+            <div id="right"></div>
         </div>
 
 
@@ -68,4 +70,5 @@
 
     <script src="./assets/js/popup.js"></script>
 </body>
+
 </html>

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

@@ -7,14 +7,14 @@ $(function() {
 
     // 每次改变开关状态时刷新页面使功能及时生效
     chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
-      console.log(`进入 assets\js\mouse-effects\click.js 中的onMessage Listener`)
+        // console.log(`进入 assets\js\mouse-effects\click.js 中的onMessage Listener`)
 
         if (request.info === 'click') {
             location.reload();
-            sendResponse('Reload page');
+            sendResponse('Reload page because of click');
         }
 
-        console.log(`离开 assets\js\mouse-effects\click.js 中的onMessage Listener`)
+        // console.log(`离开 assets\js\mouse-effects\click.js 中的onMessage Listener`)
         return true;
     })
 

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

@@ -6,14 +6,14 @@ $(function() {
     console.log("[BitDance extension] 学生助手插件 - 鼠标样式模块加载成功");
     // 每次改变开关状态时刷新页面使功能及时生效
     chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
-        console.log(`进入 assets\js\mouse-effects\mouse-style.js 中的onMessage Listener`)
+        // console.log(`进入 assets\js\mouse-effects\mouse-style.js 中的onMessage Listener`)
 
         if (request.info === 'mouse') {
             location.reload();
-            sendResponse('Reload page');
+            sendResponse('Reload page  because of mouse-style');
         }
 
-        console.log(`离开 assets\js\mouse-effects\mouse-style.js 中的onMessage Listener`)
+        // console.log(`离开 assets\js\mouse-effects\mouse-style.js 中的onMessage Listener`)
         return true;
     })
 
@@ -22,7 +22,10 @@ $(function() {
         // 得到按钮开关状态
         if (budget.clickState2 == false || budget.clickState2 == undefined) {
             $('*').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");
+                $(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=), auto");
+            });
+            $('a').hover(function() {
+                $(this).css("cursor", "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c%0A6QAAA35JREFUSEvtVk1IG1EQnv1PNhEhVEloRa22gXqw3jyU5qAUQWk9iKjQ%0Ag7SIpIfmnJMHxaNQsYJUkLQSqAcP1VPFS6EeqwepFqOCaQ8x/kRo3N3se1tm%0AYdM02dhtrvVBEt6+b+abmffNbBhwvqpZlv0MADddLtf7bDY74ty0FMk4MRYE%0A4X4ikfhSV1dnwgkh4PF4FFVV3U7s7TCOiDs6Ouja2tofWEopyLL8UlXVV5WQ%0AOyI2DMModo6P3G63pqqqdE3spALXpbat0rW4sCz/Xzth1ufn5yWa0DQNtra2%0AoLu7W6GUjhBC3lY8Mu3E5aRX8Tpqa2shnU7jTFcKbSruYyfEFmZhYYEODw/f%0ABYCE9SxPLEnSo5qamtVwOMzPzc0ZyWTyga7r+BpEIZXM6n8hRmw0GjUmJyd5%0AAKC4N4klSbqTTqe/eb3evL9kMgn19fUvKKWv7Yjx1chxXFl+u3Oe53OEEDFP%0AzPM8yeVybLGXk5MTCAQCzzVNe4Mk6MxauD8+Pgafz1dCvrOzAy0tLaDrOjAM%0AA5lMxsSdnZ1BdXW1maz5FYlEjKmpKdvoLy8v8fVnZpfL5YBlWTMAURRNVVdV%0AVZXY7e3tQTAYzBNns1kTh/aiKL4jhDw1iVmW1QghQrm6WUQWMf4JEAQhH0ix%0AHbYUBmvhC/eCIPyklHotcXEbGxt6e3u7LbdFbJVuenraiEQijLW3M8IKra+v%0AQygUgqOjI2hoaDArxXGcTikVCtvJv7S09KOvr8+2xdBRZ2cnzM/Po+hgcXHR%0A6O/vZ5qbm439/X0GhY/3KUkSKIoCY2NjMD4+DqiTUChkHBwcMBcXF0iMg8Vd%0ATHJ7dnY2MTo6WpKEJRA86OrqgtXVVXNe8zwPeIeyLFsZmb941traSre3t03R%0AYjCIdblc3zVNu2WX3Y1oNJqamJiwzRzvFwVmrUAgAKlUCjY3N6GtrY3GYjF2%0AaGgof454rAR+MBiWZT0AkC07uQYGBmg8Hnc02VZWVoyenh4mHo/D4OBg2d5u%0AbGyEw8PD3+1UBlkVDoczMzMzjsj/Nsmwh30+3z0A+Jrv4yuM5N7e3szy8jKO%0AuooXlliW5U+Kojy0nDjJhgsGgzpOo0qWqqrg9Xo/6Lr+uNDeCbGJb2pqMnZ3%0Ad6+cz5ZjVPXp6Sn4/X5CKbWtlmNidCoIwjNK6ZOrMhdFMaNp2kdCSOwq3C/H%0Acfgu+27rfgAAAABJRU5ErkJggg==), crosshair");
             });
         } else {
             ('*').hover(function() {

packages/shell-chrome/assets/js/popup.js

@@ -1,7 +1,6 @@
 $(function() {
     // 获取开关状态
     chrome.storage.sync.get('clickState2', function(budget) {
-        // console.log(budget.clickState);
         // 获取页面节点
         let input = document.querySelector("#button-2");
         // 改变开关状态（保持与上次设置时一致）
@@ -9,12 +8,23 @@ $(function() {
     });
     // 获取开关状态
     chrome.storage.sync.get('clickState3', function(budget) {
-        // console.log(budget.clickState);
         // 获取页面节点
         let input = document.querySelector("#button-3");
         // 改变开关状态（保持与上次设置时一致）
         input.checked = budget.clickState3;
     });
+    // 获取番茄钟页面状态
+    chrome.storage.sync.get('clockState', function(budget) {
+        console.log(budget.clockState);
+        if (budget.clockState === "block") {
+            $('#back').css("display", "block");
+            $('#article').css("display", "none");
+            $('#pomodoro').css("display", "block");
+        } else if (budget.clockState === "none") {
+            $('#article').css("display", "block");
+            $('#pomodoro').css("display", "none");
+        }
+    });
 
     // 点击开关时改变按钮状态
     $("#button-2").click(function() {
@@ -22,7 +32,6 @@ $(function() {
         let checked = $("#button-2");
         // 持久化存储开关状态
         chrome.storage.sync.set({ 'clickState2': checked[0].checked });
-        console.log('mouse success');
 
         // 自动刷新页面
         chrome.tabs.query({
@@ -31,7 +40,7 @@ $(function() {
         }, (tabs) => {
             console.log(tabs);
             let message = {
-                info: 'reload'
+                info: 'mouse'
             }
             chrome.tabs.sendMessage(tabs[0].id, message, res => {
                 console.log(res);
@@ -45,7 +54,6 @@ $(function() {
         let checked = $("#button-3");
         // 持久化存储开关状态
         chrome.storage.sync.set({ 'clickState3': checked[0].checked });
-        console.log('click success');
 
         // 自动刷新页面
         chrome.tabs.query({
@@ -54,7 +62,7 @@ $(function() {
         }, (tabs) => {
             console.log(tabs);
             let message = {
-                info: 'reload'
+                info: 'click'
             }
             chrome.tabs.sendMessage(tabs[0].id, message, res => {
                 console.log(res);
@@ -78,4 +86,18 @@ $(function() {
             chrome.extension.getBackgroundPage().takeScreenshot(tabs[0]);
         })
     });
+
+    $('#clock').click(function() {
+        $('#pomodoro').fadeIn(500);
+        $('#article').fadeOut(0);
+        $('#back').css("display", "block");
+        chrome.storage.sync.set({ "clockState": "block" });
+    });
+
+    $('#back').click(function() {
+        $('#pomodoro').fadeOut(0);
+        $('#article').fadeIn(200);
+        $('#back').css("display", "none");
+        chrome.storage.sync.set({ "clockState": "none" });
+    })
 })

packages/shell-chrome/assets/js/popup2.js

@@ -5,51 +5,52 @@ var latitude = 39.90
 
 var searchWeatherfn = async function() {
     // 用经纬度获取
-  let url_jw = longitude + ',' + latitude
-  console.log("url_jw: " + url_jw)
-  let httpUrl = `https://geoapi.qweather.com/v2/city/lookup?location=${url_jw}&key=${key_w}`
+    let url_jw = longitude + ',' + latitude;
+    console.log("url_jw: " + url_jw);
+    let httpUrl = `https://geoapi.qweather.com/v2/city/lookup?location=${url_jw}&key=${key_w}`;
     //获取城市的ID
     // let httpUrl = `https://geoapi.qweather.com/v2/city/lookup?location=黔江区&adm=重庆&key=${key}`
-  let res1 = await fetch(httpUrl) // 不能res，会冲突
-  let result = await res1.json()
-  console.log("下面是result")
-  console.log(result)
-  document.getElementById("weatherSite").innerHTML = result.location[0].adm1
-  let id = result.location[0].id
-  console.log(id)
+    let res1 = await fetch(httpUrl); // 不能res，会冲突
+    let result = await res1.json();
+    console.log("下面是result");
+    console.log(result);
+    document.getElementById("weatherSite").innerHTML = result.location[0].adm1;
+    let id = result.location[0].id;
+    console.log(id);
     //根据城市id获取具体的天气
     let httpUrl1 = `https://devapi.qweather.com/v7/weather/now?location=${id}&key=${key_w}`
-  let res2 = await fetch(httpUrl1)
-  let result1 = await res2.json()
+    let res2 = await fetch(httpUrl1);
+    let result1 = await res2.json();
 
     console.log(result1)
-  console.log(result1.now)
+    console.log(result1.now);
     //显示天气情况
-  let now = result1.now.text
-  document.getElementById("weatherText").innerHTML = now
+    let now = result1.now.text;
+    document.getElementById("weatherText").innerHTML = now;
     //显示温度
     let nowTemp = result1.now.temp
-  document.getElementById("weatherTemp").innerHTML = nowTemp + '°'
+    document.getElementById("weatherTemp").innerHTML = nowTemp + '°';
     //显示图标
-  let svg_icon = result1.now.icon
-  document.getElementById("svg_w").src = "./assets/image/weather/icons/" + svg_icon + ".svg"
+    let svg_icon = result1.now.icon;
+    document.getElementById("svg_w").src = "./assets/image/weather/icons/" + svg_icon + ".svg";
     //切换背景色
-  var bobyEI = document.body
-  svg_icon = parseInt(svg_icon)
+    var bobyEI = document.body;
+    // var bobyEI = document.getElementById("weather")
+    svg_icon = parseInt(svg_icon);
     if (100 <= svg_icon && svg_icon < 101) {
-    bobyEI.style.backgroundImage = "url(./assets/image/weather/sun.webp)"
+        bobyEI.style = "background: url(./assets/image/weather/sun.webp) no-repeat; background-size: cover;"
     } else if (101 <= svg_icon && svg_icon < 104) {
-    bobyEI.style.backgroundImage = "url(./assets/image/weather/yun.webp)"
+        bobyEI.style = "background: url(./assets/image/weather/yun.webp) no-repeat; background-size: cover;"
     } else if (104 <= svg_icon && svg_icon < 150) {
-    bobyEI.style.backgroundImage = "url(./assets/image/weather/yin.webp)"
+        bobyEI.style = "background: url(./assets/image/weather/yin.webp) no-repeat; background-size: cover;"
     } else if (150 <= svg_icon && svg_icon < 300) {
-    bobyEI.style.backgroundImage = "url(./assets/image/weather/night.webp)"
+        bobyEI.style = "background: url(./assets/image/weather/night.webp) no-repeat; background-size: cover;"
     } else if (300 <= svg_icon && svg_icon < 400) {
-    bobyEI.style.backgroundImage = "url(./assets/image/weather/yu.webp)"
+        bobyEI.style = "background: url(./assets/image/weather/yu.webp) no-repeat; background-size: cover;"
     } else if (400 <= svg_icon && svg_icon < 500) {
-    bobyEI.style.backgroundImage = "url(./assets/image/weather/xue.webp)"
+        bobyEI.style = "background: url(./assets/image/weather/xue.webp) no-repeat; background-size: cover;"
     } else {
-    bobyEI.style.backgroundImage = "url(./assets/image/weather/yun.webp)"
+        bobyEI.style = "background: url(./assets/image/weather/yun.webp) no-repeat; background-size: cover;"
     }
 }
 
@@ -89,9 +90,10 @@ document.getElementById("weatherSite").onclick = function () {
 
 // //天气end
 //翻译
-document.getElementById("ToTans").onclick = function () {
-  console.log(chrome.extension.getBackgroundPage())
-  chrome.extension.getBackgroundPage().tranBit()
-}
+//默认参数
+// document.getElementById("TOtans").onclick = function () {
+//   console.log(chrome.extension.getBackgroundPage())
+//   chrome.extension.getBackgroundPage().tranBit()
+// }
 
 //翻译end

packages/shell-chrome/popup.html

@@ -10,23 +10,35 @@
 <body>
     <div id="popup">
         <header>
-            <img src="assets/image/logo.png" alt="Logo">
-               <!-- 天气模块 -->
-             <div id='weather'>
-                <p id="weatherSite">北京</p>
+            <img src="assets/image/logo.png" alt="Logo" id="logo">
+            <div id="weather">
+                <span id="weatherSite">北京</span>
                 <img id="svg_w" src="./assets/image/weather/icons/100.svg">
-                <p id='weatherText'></p>
-                <p id="weatherTemp"></p>
+                <span id='weatherText'></span>
+                <span id="weatherTemp"></span>
             </div>
         </header>
-        <div class="article">
+        <div id="back"></div>
+        <div id="article">
+            <div id="buttons">
+                <button id="transform">翻译</button>
+                <div id="clock">番茄钟</div>
+                <button id="btnScreenshot">截图</button>
+            </div>
+            <div class="setting">
                 <ul>
                     <li>
-                    <div id="expand">
+                        <div class="setting-item">
+                            <span>广告屏蔽</span>
+                            <div class="button">
+                                <input type="checkbox" id="button-1" class="checkbox" />
+                                <div class="knobs"></div>
+                                <div class="layer"></div>
+                            </div>
                         </div>
                     </li>
                     <li>
-                    <div id="mouse-style">
+                        <div class="setting-item">
                             <span>鼠标样式</span>
                             <div class="button">
                                 <input type="checkbox" id="button-2" class="checkbox" />
@@ -36,7 +48,7 @@
                         </div>
                     </li>
                     <li>
-                    <div id="click-per">
+                        <div class="setting-item">
                             <span>点击特效</span>
                             <div class="button">
                                 <input type="checkbox" id="button-3" class="checkbox" />
@@ -46,8 +58,8 @@
                         </div>
                     </li>
                     <li>
-                    <div id="click-per">
-                        <span>确认访问页自动跳转</span>
+                        <div class="setting-item">
+                            <span>访问页自动跳转</span>
                             <div class="button">
                                 <input type="checkbox" id="btnDirectUrl" class="checkbox" />
                                 <div class="knobs"></div>
@@ -55,11 +67,11 @@
                             </div>
                         </div>
                     </li>
+
                 </ul>
             </div>
-        <button id="btnScreenshot">截图</button>
-        <button id="ToTans">翻译</button>
-        <iframe src="assets/html/pomodoro/popup.html" id="pomodoro" style="border: 0; height: 400px;"></iframe>
+        </div>
+        <iframe src="assets/html/pomodoro/popup.html" id="pomodoro" style="border: 0; height: 450px; display: none;"></iframe>
     </div>
     <script src="assets/js/lib/jquery.min.js"></script>
     <script src="assets/js/popup.js"></script>