增加了badge图标提醒，修改了按钮样式，增加了背景图片

gitee_pomodoro/assets/css/popup.css

@@ -1,11 +1,12 @@
-/* @import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500&display=swap'); */
+@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_ocean.jpg) no-repeat;
+    background: url(../../images/pomo_green.jpeg) no-repeat;
     background-image: "../../";
     /* color: white; */
-    font-family: 'Fira Sans', sans-serif;
+    font-family: 'Source Sans Pro','Fira Sans', sans-serif;
     margin: 0;
     padding: 0;
     width: 280px;
@@ -42,7 +43,7 @@ body {
     margin: auto;
     font-size: 60px;
     font-weight: 500;
-    padding: 20px;
+    padding: 20%;
     color: aliceblue;
 }
 
@@ -50,44 +51,101 @@ body {
     opacity: 0;
 }
 
-#start-btn ,#end-btn{
+
-    width: 40px;
+#start-btn,#end-btn,#reset-btn {
-    margin: 10px auto 0;
+    /* 文字颜色 */
-    padding: 10px 30px;
+    color: #f5e4b9; 
+    /* 清除背景色 */
+    background: transparent; 
+    /* 边框样式、颜色、宽度 */
+    border: 1px solid #f5e4b9;
+    /* 给边框添加圆角 */
+    border-radius: 6px; 
+    /* 字母转大写 */
+    border: none;
+    color: white;
+    padding: 10px 26px;
+    display: block;
     text-align: center;
-    background-color: rgb(0, 179, 12);
+    /* 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;
 }
 
-#reset-btn {
+#end-btn {
-    width: 40px;
+    background-color: white; 
-    margin: 10px auto 0;
+    color: black; 
-    padding: 10px 30px;
+    border: 1px solid #ECB390;
-    text-align: center;
-    background-color: rgb(187, 0, 0);
-    cursor: pointer;
-}
-
-#end-btn{
-    background-color: rgb(0, 128, 187);
     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);
 } 
 
-#current-task-display {
-    width: 100%;
-    padding-top: 30px;
-    margin: auto;
-    text-align: center;
-}
 
-#tasks-container {
-    margin: auto;
-}
 
 ul {
     padding: 0;
@@ -105,52 +163,6 @@ li {
     float: right;
 }
 
-.delete-btn {
-    padding: 10px;
-    background-color: rgb(33, 10, 70);
-    color: white;
-    margin-left: 10px;
-    cursor: pointer;
-}
-
-#add-task-btn {
-    width: 200px;
-    margin: 0 auto 10px;
-    /* background-color: rgb(33, 10, 70); */
-    padding: 8px;
-    cursor: pointer;
-    text-align: center;
-}
-
-#task-form {
-    clear: both;
-    background-color: white;
-    color: black;
-    height: 100px;
-    padding: 15px;
-}
-
-#text {
-    border: none;
-    width: 95%;
-    font-size: 18px;
-    margin-bottom: 5px;
-}
-
-#est-pomodoro {
-    margin: 10px 10px 0;
-    width: 50px;
-    padding: 5px;
-}
-
-#save, #cancel {
-    border: none;
-    width: 60px;
-    padding: 8px;
-    margin-left: 5px;
-    cursor: pointer;
-    float: right;
-}
 
 .hide {
     display: none;

gitee_pomodoro/assets/js/popup.js

@@ -130,15 +130,16 @@ function getTimer() {
       //更新后倒计时判断，如果结束则重新初始化界面
       if(pomoData.countdownTimer == "00:00"){
 
-        audio.play();
+        audio.play();  
+        //不能放在页面上，要在后台进行
         chrome.runtime.sendMessage(
           {
-            status: "init",
+            status: "playend",
           },
           (response) => {
-            console.log(response);
+            console.log(response,"**************下面");
             countdownTimer.innerHTML = "25:00";
-    
+            
             startBtn.style.display = "block";
             endBtn.style.display = "none";
             clearTimer();
@@ -210,5 +211,7 @@ chrome.storage.sync.get("pomoData", ({ pomoData }) => {
       status: "init",
     });
     countdownTimer.innerHTML = "25:00";
+  }else if(status === 'playend'){
+    countdownTimer.innerHTML = "25:00";
   }
 });

gitee_pomodoro/assets/js/script.js

@@ -1,356 +0,0 @@
-const pomodoroBtns = document.querySelectorAll('.button')
-const pomodoroBtn = document.getElementById('pomodoro-btn')
-const shortBreakBtn = document.getElementById('short-break-btn')
-const longBreakBtn = document.getElementById('long-break-btn')
-
-const startBtn = document.getElementById('start-btn')
-const resetBtn = document.getElementById('reset-btn')
-const countdownTimer = document.getElementById('countdown')
-
-const addTaskBtn = document.getElementById('add-task-btn')
-const addTaskForm = document.getElementById('task-form')
-const cancelBtn = document.getElementById('cancel')
-const taskNameInput = document.getElementById('text')
-const pomodoroInput = document.getElementById('est-pomodoro')
-const saveBtn = document.getElementById('save')
-const tasksList = document.getElementById('tasks')
-const template = document.getElementById('list-item-template')
-const selectedTask = document.getElementById('selected-task')
-const audio = document.getElementById('audio')
-
-let minutes,seconds 
-let pause 
-let pomodoro = "pomodoro"
-let tasks = []
-let pomodorosCompleted = 0
-let selectedTaskElement
-
-let array = ["minutes","seconds","pause","countdownTimer","pbutton"];
-
-//变量初始化
-chrome.storage.sync.get(array,function(value){
-    if(!chrome.runtime.error){
-        // console.log(value);
-        // alert("value:"+value)
-
-        if(value.minutes){
-            minutes = value.minutes;
-        }else{
-            minutes = 25;
-        }
-
-        if(value.seconds){
-            seconds = value.seconds;
-        }else{
-            seconds = 60;
-        }
-
-        if(value.countdownTimer){
-            countdownTimer.innerHTML = value.countdownTimer;
-        }else{
-            countdownTimer.innerHTML = "25:00";
-        }
-
-        if((value.pause) && (value.countdownTimer != "25:00")){
-            pause = value.pause;
-            startBtn.innerHTML = "开始"
-        }else if((!value.pause) && (value.countdownTimer != "25:00")){
-            pause = value.pause;
-            startBtn.innerHTML = "暂停"
-            countdown();
-        }else{
-            pause = true;
-        }
-            
-        if (value.pbutton){
-            if (value.pbutton == "shortBreakBtn"){
-                shortBreakBtn.classList.add('selected');
-            }else if (value.pbutton == "longBreakBtn"){
-                longBreakBtn.classList.add('selected');
-            }else {
-                pomodoroBtn.classList.add('selected');
-            }
-        }else{
-            pomodoroBtn.classList.add('selected');
-        }
-    }
-});
-
-//番茄钟按钮-绑定事件
-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");
-        }
-    })
-
-    //选中番茄钟按钮指定样式
-    pomodoroBtns.forEach(button => {
-        button.classList.remove('selected')
-    })
-    e.target.classList.add('selected')
-
-    let pbutton;
-
-    if (e.target.classList == shortBreakBtn.classList){
-        pbutton = "shortBreakBtn"
-    }else if (e.target.classList == longBreakBtn.classList){
-        pbutton = "longBreakBtn"
-    }else {
-        pbutton = "pomodoroBtn"
-    }
-
-    chrome.storage.sync.set({"pbutton":pbutton},function(){
-        if(!chrome.runtime.error){
-            console.log("added target pomodoro");
-        }
-    })
-
-    // 定时器初始化
-    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', async() => {
-    // if countdown is paused, start/resume countdown, otherwise, pause countdown
-    if (pause) {
-        startBtn.innerHTML = "暂停";
-        pause = false
-        countdown();
-        chrome.storage.sync.set({"pause":false},function(){
-            if(!chrome.runtime.error){
-                alert("开始专注啦！");
-            }
-        })
-    } else if (!pause) {
-        startBtn.innerHTML = "开始"
-        pause = true
-        chrome.storage.sync.set({"pause":true},function(){
-            if(!chrome.runtime.error){
-                alert("你暂停了专注！")
-            }
-        })
-    };
-
-})
-
-// 重置按钮-绑定事件
-resetBtn.addEventListener('click', () => {
-    minutes = 25
-    pause = true
-    pomodoro = "pomodoro"
-    seconds = 60
-    
-    startBtn.innerHTML = "开始"
-    countdownTimer.innerHTML = '25:00'
-
-    let dict = {
-        "minutes":25,
-        "pause":true,
-        "seconds":60,
-        "countdownTimer":"25:00"
-    }
-
-    chrome.storage.sync.set(dict,function(){
-        if(!chrome.runtime.error){
-            alert("reset");
-        }
-    })
-
-})
-
-
-// 番茄钟倒计时功能
-function countdown() {
-    // return if countdown is paused
-    if(pause) return;
-
-    // set minutes and seconds
-    let currentMins = minutes - 1;
-    seconds--;
-    let currentTimer = (currentMins < 10 ? "0" : "") + currentMins.toString() + ':' + (seconds < 10 ? "0" : "") + String(seconds);
-    countdownTimer.innerHTML = currentTimer;
-
-    chrome.storage.sync.set({"seconds":seconds,"countdownTimer":currentTimer},function(){
-        if(!chrome.runtime.error){
-            console.log("started");
-        }
-    })
-    // count down every second, when a minute is up, countdown one minute
-    // when time reaches 0:00, reset
-    if(seconds > 0) {
-        setTimeout(countdown, 1000);
-    } else if(currentMins > 0){
-        seconds = 60
-        minutes--;
-        chrome.storage.sync.set({"seconds":seconds,"minutes":minutes},function(){
-            if(!chrome.runtime.error){
-                console.log("started");
-            }
-        })
-        countdown();        
-    } else if(currentMins === 0) {
-        audio.play()
-        reset()        
-    }
-}
-
-// reset function when countdown ends
-function reset() {
-    // set to start the next round    
-    startBtn.innerHTML = "Start"
-    pause = true
-
-    pomodoroBtns.forEach(button => {
-        button.classList.remove('selected')
-    })
-
-    // if current round is a break, set for pomodoro
-    if (pomodoro === "short break" || pomodoro === "long break") {
-        pomodoro = "pomodoro"
-        countdownTimer.innerHTML = '25:00'
-        minutes = 25
-        pomodoroBtn.classList.add('selected')
-        return
-    }
-
-    // if current round is a pomodoro, set for break
-    // if less than four pomodoros have been completed, go to short break
-    // if four pomodoros have been completed, go to long break
-    if (pomodoro === "pomodoro" && pomodorosCompleted < 4) {
-        pomodorosCompleted++
-        pomodoro = "short break"
-        countdownTimer.innerHTML = '05:00'
-        minutes = 5
-        shortBreakBtn.classList.add('selected')
-    } else if (pomodoro === "pomodoro" && pomodorosCompleted === 4) {
-        pomodorosCompleted = 0
-        pomodoro = "long break"
-        countdownTimer.innerHTML = '15:00'
-        minutes = 15
-        longBreakBtn.classList.add('selected')
-    }
-
-    // if a task has been selected
-    if (selectedTaskElement != null) {
-        const selectedTaskId = selectedTaskElement.dataset.taskId
-        const current = tasks.find(task => task.id === selectedTaskId)
-        current.completedPomodoros++
-        const pomodoroCount = selectedTaskElement.querySelector('.pomodoro-count')
-        pomodoroCount.innerHTML = current.completedPomodoros.toString() + '/' + current.totalPomodoros 
-    }
-  // TODO add option to start next round automatically
-}
-
-/*****************************************************************************************************
- **任务栏部分功能
- ****************************************************************************************************/
-// show/hide task form
-addTaskBtn.addEventListener('click', () => {
-    addTaskForm.classList.toggle('hide')
-})
-
-// cancel task and close task form
-cancelBtn.addEventListener('click', () => {
-    taskNameInput.value = ""
-    pomodoroInput.value = ""
-    addTaskForm.classList.add('hide')
-})
-
-//保存要做的任务并放在页面上
-saveBtn.addEventListener('click', e => {
-    e.preventDefault();
-
-    // get the inputs
-    const taskName = taskNameInput.value
-    const pomodoros = pomodoroInput.value
-
-    // don't add task if a form element is blank or estimated pomodoros is <=0
-    if (taskName === "" || pomodoros === "" || pomodoros <= 0) return
-
-    // create new object
-    const newTask = {
-        name: taskName,
-        completedPomodoros: 0,
-        totalPomodoros: pomodoros,
-        complete: false,
-        id: new Date().valueOf().toString()
-    }
-    // add task to array
-    tasks.push(newTask)
-    // render task
-    addTask(newTask)
-
-    // clear inputs
-    taskNameInput.value = ""
-    pomodoroInput.value = ""
-})
-
-// event listener for the list item, checkbox and delete button
-document.addEventListener('click', e => {
-    // if a delete button is selected
-    if(e.target.matches('.delete-btn')) {
-        // find the list item associaited with the delete button and remove it
-        const listItem = e.target.closest('.list-item')
-        listItem.remove()
-
-        // find the id of the task to remove the task object from the array  
-        const taskId = listItem.dataset.taskId
-        tasks = tasks.filter(task => task.id !== taskId )
-
-        // remove title when selected task is deleted
-        if (listItem === selectedTaskElement) {
-            selectedTask.innerHTML = ""
-        }
-    }
-    // if a list item is selected
-    if(e.target.matches('.list-item')) {
-        // set the task as the selected element and put title in selected-task div
-        selectedTaskElement = e.target
-        const taskName = e.target.querySelector('.task-name')
-        const text = taskName.innerHTML
-        selectedTask.innerHTML = text
-    }
-
-    // if a checkbox is selected
-    if(e.target.matches('input[type=checkbox]')) {
-        // ge the list item and the id of the item
-        const listItem = e.target.closest('.list-item')
-        const taskId = listItem.dataset.taskId
-        // find the task object in the array
-        const checkedTask = tasks.find(task => task.id === taskId)
-        // if set to true, change to false, and if set to false, set to true
-        if(checkedTask.complete) checkedTask.complete = false
-        else if(!checkedTask.complete)checkedTask.complete = true
-    }
-})
-
-// add task as list item
-function addTask(task) {
-    const templateClone = template.content.cloneNode(true)
-    const listItem = templateClone.querySelector('.list-item')
-    listItem.dataset.taskId = task.id
-    const checkbox = templateClone.querySelector('input[type=checkbox]')
-    checkbox.checked = task.complete
-    const taskName = templateClone.querySelector('.task-name')
-    taskName.innerHTML = task.name
-    const pomodoroCount = templateClone.querySelector('.pomodoro-count')
-    pomodoroCount.innerHTML = task.completedPomodoros.toString() + '/' + task.totalPomodoros
-    tasksList.appendChild(templateClone)
-}

gitee_pomodoro/background.js

@@ -21,11 +21,6 @@ let array = ["minutes", "seconds", "pause", "countdownTimer", "pbutton"];
 //全局唯一的定时器
 let timer = null;
 
-
-// 记住 是否暂停、
-
-// 判断计时剩余时间
-
 chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
   const { status, content } = message;
 
@@ -52,26 +47,42 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
         status: "init",
       },
     });
-  } else {
+  } else if (status === "init") {
     //init初始化
     chrome.storage.sync.set({
       pomoData: {
-        minutes: 0,
+        minutes: 24,
-        seconds: 5,
+        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--;
@@ -83,7 +94,7 @@ function countdown({ minutes, seconds, status }) {
     seconds;
   // countdownTimer.innerHTML = currentTimer; 拿到
   console.log("分秒=============", minutes, seconds);
-  
+
   chrome.storage.sync.set(
     {
       pomoData: {
@@ -100,6 +111,11 @@ function countdown({ minutes, seconds, status }) {
     }
   );
 
+  //设置badge文本用来显示剩余分钟数
+  chrome.storage.sync.get("pomoData", ({ pomoData }) => {
+    chrome.action.setBadgeText({ text: pomoData.minutes.toString() });
+  });
+
   console.log(currentTimer);
   // count down every second, when a minute is up, countdown one minute
   // when time reaches 0:00, reset
@@ -125,6 +141,9 @@ function countdown({ minutes, seconds, status }) {
         }
       }
     );
-    countdown({ minutes, seconds,status });
+    countdown({ minutes, seconds, status });
-  } 
+  }
 }
+
+//设置badge文本背景颜色
+chrome.action.setBadgeBackgroundColor({ color: "#DD4A48" });

gitee_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>

gitee_pomodoro/popup.html

@@ -25,18 +25,20 @@
       </div>
 
       
-        <div class="button" id="pomodoro-btn">专注模式</div>
+        <!-- <div class="button" id="pomodoro-btn"></div> -->
       
       <div id="countdown">
           <span>00:00</span>
       </div>
-      <!-- 计时开始、重置 -->
+      <div class="buttons">
-      <div id="start-btn">开始</div>
+          <!-- 计时开始、重置 -->
-      <div id="end-btn">暂停</div>
+      <button id="start-btn">开始</button>
-      <div id="reset-btn">重置</div>
+      <button id="end-btn">暂停</button>
+      <button id="reset-btn">重置</button>
+      </div>
     </div>
     
-    <!-- 添加任务清单 -->
+    <!-- 后续——添加任务清单
     <div id="worklist">
       <div id="current-task-display">
         <div id="message">你正在专注于:</div>
@@ -55,12 +57,12 @@
           </div>
         </form>
       </div>
-    </div>
+    </div> -->
     
     <!-- 页脚--设置 -->
     <footer>
       <div class="settings">
-        <a href="./assets/html/options.html">settings</a>
+        <!-- <a href="./assets/html/options.html">settings</a> -->
       </div>
     </footer>