完成番茄钟合并（张松的代码）

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

@@ -8,11 +8,13 @@ li {
 a {
   text-decoration: none;
 }
-#popup {
-  height: 250px;
-  width: 200px;
+body {
   background: linear-gradient(to right bottom, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%);
 }
+#popup {
+  min-height: 450px;
+  width: 300px;
+}
 #popup header {
   width: inherit;
   height: 30px;

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

@@ -11,10 +11,12 @@ a {
     text-decoration: none;
 }
 
-#popup {
-    height: 250px;
-    width: 200px;
+body {
   background: linear-gradient(to right bottom, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%);
+}
+#popup {
+    min-height: 450px;
+    width: 300px;
     header{
         width: inherit;
         height: 30px;

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

@@ -0,0 +1,176 @@
+@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: "../../";
+    /* color: white; */
+    font-family: 'Source Sans Pro','Fira Sans', sans-serif;
+    margin: 0;
+    padding: 0;
+    /* width: 280px; */
+    /* height: 500px; */
+    height: 200px;
+}
+
+#timer {
+    /* background-color: rgb(77, 25, 161); */
+    padding: 10px 0 20px;
+}
+
+.buttons {
+    width: fit-content;
+    margin: auto;
+    font-size: 20px;
+    color: rgb(169, 172, 172);
+}
+
+.buttons .slider{
+    color: rgb(247, 226, 230);
+}
+
+.button {
+    float: left;
+    margin: 5px;
+    cursor: pointer;
+    padding: 8px;
+}
+
+/*计数部分*/
+#countdown {
+    clear: both;
+    width: fit-content;
+    margin: auto;
+    font-size: 60px;
+    font-weight: 500;
+    padding: 20%;
+    color: aliceblue;
+}
+
+#countdown span{
+    opacity: 0;
+}
+
+
+#start-btn,#end-btn,#reset-btn {
+    /* 文字颜色 */
+    color: #f5e4b9;
+    /* 清除背景色 */
+    background: transparent;
+    /* 边框样式、颜色、宽度 */
+    border: 1px solid #f5e4b9;
+    /* 给边框添加圆角 */
+    border-radius: 6px;
+    /* 字母转大写 */
+    border: none;
+    color: white;
+    padding: 10px 26px;
+    display: block;
+    text-align: center;
+    /* width: 40px; */
+    font-size: 16px;
+    margin: 4px 2px;
+    -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;
+}
+
+#end-btn {
+    background-color: white;
+    color: black;
+    border: 1px solid #ECB390;
+    display: none;
+}
+/* 悬停样式 */
+#end-btn:hover {
+    background-color: #ECB390;
+    color: white;
+}
+
+/* #end-btn{
+    width: 40px;
+    margin: 10px auto 0;
+    padding: 10px 30px;
+    text-align: center;
+    background-color: #F5EEDC;
+    cursor: pointer;
+} */
+
+/* #reset-btn {
+    width: 40px;
+    margin: 10px auto 0;
+    padding: 10px 30px;
+    text-align: center;
+    background-color: #DD4A48;
+    cursor: pointer;
+} */
+
+#reset-btn {
+    background-color: white;
+    color: black;
+    border: 1px solid #DD4A48;
+}
+/* 悬停样式 */
+#reset-btn:hover {
+    background-color: #DD4A48;
+    color: white;
+}
+
+
+/* #end-btn{
+    background-color: #ECB390;
+    display: none;
+} */
+
+/*选中的按钮*/
+.selected {
+    background-color: rgb(244, 242, 248);
+}
+
+
+
+ul {
+    padding: 0;
+}
+
+li {
+    list-style-type: none;
+    padding: 20px 10px;
+    margin-bottom: 5px;
+    background-color: white;
+    color: black;
+}
+
+.right {
+    float: right;
+}
+
+
+.hide {
+    display: none;
+}
+
+footer .settings{
+    position: absolute;
+    bottom: 5px;
+    right: 5px;
+}

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

@@ -0,0 +1,217 @@
+// const btn = document.querySelector("#switch");
+
+// chrome.storage.sync.get("linkOpen", ({ linkOpen }) => {
+//   btn.checked = linkOpen;
+// });
+
+// btn.addEventListener("change", () => {
+//   if (btn.checked) {
+//     chrome.storage.sync.set({ linkOpen: true });
+//   } else {
+//     chrome.storage.sync.set({ linkOpen: false });
+//   }
+//   // 获取当前tab窗口
+//   chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+//     chrome.scripting.executeScript({
+//       target: { tabId: tabs[0].id },
+//       func: refreshPage,
+//     });
+//   });
+// });
+
+// // 刷新页面
+// function refreshPage() {
+//   window.location.reload();
+// }
+
+const startBtn = document.getElementById("start-btn");
+const resetBtn = document.getElementById("reset-btn");
+const endBtn = document.getElementById("end-btn");
+const countdownTimer = document.getElementById("countdown");
+
+const audio = document.getElementById("audio");
+//全局唯一的定时器
+let timer = null;
+
+let minutes, seconds;
+let pause;
+let pomodoro = "pomodoro";
+
+//两端通信 防抖
+// let clickFlag = false;
+
+//番茄钟按钮-绑定事件
+document.addEventListener("click", (e) => {
+  if (!e.target.matches(".button")) return;
+
+  // reset when pomodoro button selected
+  pause = true;
+  seconds = 60;
+  startBtn.innerHTML = "开始";
+
+  chrome.storage.sync.set({ pause: pause, seconds: seconds }, function () {
+    if (!chrome.runtime.error) {
+      alert("初始化pause、seconds");
+    }
+  });
+
+  // 定时器初始化
+  if (e.target.matches("#pomodoro-btn")) {
+    countdownTimer.innerHTML = "25:00";
+    pomodoro = "pomodoro";
+    minutes = 25;
+    chrome.storage.sync.set(
+      { minutes: minutes, countdownTimer: "25:00" },
+      function () {
+        if (!chrome.runtime.error) {
+          alert("added target pomodoro!");
+        }
+      }
+    );
+  }
+});
+
+// 开始按钮-绑定事件
+startBtn.addEventListener("click", () => {
+  // countdown(); 在后台运行，需要取出状态
+  debounce(start(), 100);
+});
+
+function start() {
+  chrome.storage.sync.get("pomoData", ({ pomoData }) => {
+    const { minutes, seconds, status } = pomoData;
+
+    chrome.runtime.sendMessage(
+      {
+        status: "start",
+        content: {
+          minutes,
+          seconds,
+        },
+      },
+      (response) => {
+        console.log(response);
+
+        startBtn.style.display = "none";
+        endBtn.style.display = "block";
+        getTimer();
+      }
+    );
+  });
+}
+
+endBtn.addEventListener("click", () => {
+  setTimeout(end, 200);
+});
+
+function end() {
+  chrome.runtime.sendMessage(
+    {
+      status: "paused",
+    },
+    (response) => {
+      console.log(response);
+
+      startBtn.style.display = "block";
+      endBtn.style.display = "none";
+      clearTimer();
+    }
+  );
+}
+
+function getTimer() {
+  clearTimer();
+  timer = setInterval(() => {
+    chrome.storage.sync.get("pomoData", ({ pomoData }) => {
+      // console.log("pomodata****",pomoData)
+      // const{minutes,seconds,countdownTimer} = pomoData;
+      countdownTimer.innerHTML = pomoData.countdownTimer;
+
+      //更新后倒计时判断，如果结束则重新初始化界面
+      if(pomoData.countdownTimer == "00:00"){
+
+        audio.play();  
+        //不能放在页面上，要在后台进行
+        chrome.runtime.sendMessage(
+          {
+            status: "playend",
+          },
+          (response) => {
+            console.log(response,"**************下面");
+            countdownTimer.innerHTML = "25:00";
+            
+            startBtn.style.display = "block";
+            endBtn.style.display = "none";
+            clearTimer();
+          }
+        );
+
+      }
+    });
+  }, 200);
+
+}
+
+function clearTimer() {
+  clearInterval(timer);
+}
+
+/*
+ * fn [function] 需要防抖的函数
+ * delay [number] 毫秒，防抖期限值
+ */
+function debounce(fn, delay) {
+  let timer = null; //借助闭包
+  return function () {
+    if (timer) {
+      clearTimeout(timer); //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
+      timer = setTimeout(fn, delay);
+    } else {
+      timer = setTimeout(fn, delay); // 进入该分支说明当前并没有在计时，那么就开始一个计时
+    }
+  };
+}
+
+// 重置按钮-绑定事件
+resetBtn.addEventListener("click", () => {
+  setTimeout(() => {
+    chrome.runtime.sendMessage(
+      {
+        status: "reset",
+      },
+      (response) => {
+        // console.log(response);
+        countdownTimer.innerHTML = "25:00";
+
+        startBtn.style.display = "block";
+        endBtn.style.display = "none";
+        clearTimer();
+      }
+    );
+  }, 100);
+});
+
+//页面反复打开时页面初始化
+chrome.storage.sync.get("pomoData", ({ pomoData }) => {
+  console.log(pomoData);
+  const { status } = pomoData;
+
+  if (status === "start") {
+    startBtn.style.display = "none";
+    endBtn.style.display = "block";
+    getTimer();
+  } else if (status === "paused") {
+    startBtn.style.display = "block";
+    endBtn.style.display = "none";
+    chrome.storage.sync.get("pomoData", ({ pomoData }) => {
+      countdownTimer.innerHTML = pomoData.countdownTimer;
+    });
+  } else if (status === "init") {
+    chrome.runtime.sendMessage({
+      status: "init",
+    });
+    countdownTimer.innerHTML = "25:00";
+  }else if(status === 'playend'){
+    countdownTimer.innerHTML = "25:00";
+  }
+});

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

@@ -0,0 +1,150 @@
+// 用户首次安装插件时执行一次，后面不会再重新执行(除非用户重新安装插件)
+chrome.runtime.onInstalled.addListener(() => {
+  // 插件功能安装默认启用
+  chrome.storage.sync.set({
+    //初始化数据
+    pomoData: {
+      minutes: 24,
+      seconds: 60,
+      countdownTimer: "25:00",
+      status: "init",
+    },
+  });
+});
+
+let minutes, seconds;
+let pause;
+let pomodoro = "pomodoro";
+
+let array = ["minutes", "seconds", "pause", "countdownTimer", "pbutton"];
+
+//全局唯一的定时器
+let timer = null;
+
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  const { status, content } = message;
+
+  console.log(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: "start",
+      },
+    });
+  } 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();
+});
+
+// 番茄钟倒计时功能
+function countdown({ minutes, seconds, status }) {
+  // 设置分钟和秒数
+  // let currentMins = minutes - 1;
+  seconds--;
+  let currentTimer =
+    (minutes < 10 ? "0" : "") +
+    minutes +
+    ":" +
+    (seconds < 10 ? "0" : "") +
+    seconds;
+  // countdownTimer.innerHTML = currentTimer; 拿到
+  console.log("分秒=============", minutes, seconds);
+
+  chrome.storage.sync.set(
+    {
+      pomoData: {
+        seconds: seconds,
+        minutes: minutes,
+        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) {
+          console.log("started");
+        }
+      }
+    );
+    countdown({ minutes, seconds, status });
+  }
+}
+
+//设置badge文本背景颜色
+chrome.browserAction.setBadgeBackgroundColor({ color: "#DD4A48" });

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

@@ -0,0 +1,9 @@
+<html> 
+    <body> 
+        <p>播放歌曲时的一些不错的文字。</p> <音频自动播放> 
+        <source
+src =http://www.html5rocks.com/en/tutorials/audio/quick/test.mp3type=audio/mpeg /> <source src
+=http://www.html5rocks.com/en/tutorials/audio/quick/test.oggtype=audio/ogg />
+</audio> 
+</body> 
+</html>

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

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>my todo list</title>
+    <link rel="stylesheet" href="./assets/css/popup.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <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">
+    </audio>
+    
+    <!-- 计时部分 -->
+    <div id="timer">
+
+      <!-- 切换背景图片 -->
+      <div class="slider">
+        <span class="left">&lt;</span>
+        <span class="right">&gt;</span>
+      </div>
+
+      
+        <!-- <div class="button" id="pomodoro-btn"></div> -->
+      
+      <div id="countdown">
+          <span>00:00</span>
+      </div>
+      <div class="buttons">
+          <!-- 计时开始、重置 -->
+      <button id="start-btn">开始</button>
+      <button id="end-btn">暂停</button>
+      <button id="reset-btn">重置</button>
+      </div>
+    </div>
+    
+    <!-- 后续——添加任务清单
+    <div id="worklist">
+      <div id="current-task-display">
+        <div id="message">你正在专注于:</div>
+        <div id="selected-task"></div>
+      </div>
+      
+      <div id="tasks-container">
+        <ul id="tasks"></ul>
+        <div id="add-task-btn">Add Task</div>
+      
+        <form id="task-form" class="hide">
+          <input id="text" type="text" placeholder="输入你要专注的事情">
+          <div id="btn-container">
+            <button id="save" type="submit">Save</button> 
+            <button id="cancel" type="button">Cancel</button>
+          </div>
+        </form>
+      </div>
+    </div> -->
+    
+    <!-- 页脚--设置 -->
+    <footer>
+      <div class="settings">
+        <!-- <a href="./assets/html/options.html">settings</a> -->
+      </div>
+    </footer>
+
+    <script src="./assets/js/popup.js"></script>
+</body>
+</html>

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

@@ -70,12 +70,5 @@ $(function() {
 
     btnDirectUrl.addEventListener("change", () => {
         chrome.storage.sync.set({ linkOpen: !btnDirectUrl.checked });
-        // 获取当前tab窗口
-        chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-            chrome.scripting.executeScript({
-                target: { tabId: tabs[0].id },
-                func: () => { window.location.reload() },
-            });
-        });
     });
 })

packages/shell-chrome/manifest.json

@@ -15,6 +15,7 @@
     "scripts": [
       "assets/js/lib/jquery.min.js",
       "assets/js/background.js",
+      "assets/html/pomodoro/background.js",
       "assets/js/advanced-search/background.js"
     ]
   },

packages/shell-chrome/popup.html

@@ -50,6 +50,7 @@
                 </li>
             </ul>
         </div>
+        <iframe src="assets/html/pomodoro/popup.html" id="pomodoro" style="border: 0; height: 400px;"></iframe>
     </div>
     <script src="assets/js/lib/jquery.min.js"></script>
     <script src="assets/js/popup.js"></script>