倒计时功能 初版完成

gitee_pomodoro/assets/css/popup.css

@@ -46,7 +46,11 @@ body {
     color: aliceblue;
 }
 
-#start-btn {
+#countdown span{
+    opacity: 0;
+}
+
+#start-btn ,#end-btn{
     width: 40px;
     margin: 10px auto 0;
     padding: 10px 30px;
@@ -64,8 +68,14 @@ body {
     cursor: pointer;
 }
 
+#end-btn{
+    background-color: rgb(0, 128, 187);
+    display: none;
+}
+
+/*选中的按钮*/
 .selected {
-    background-color: rgb(33, 10, 70);;
+    background-color: rgb(244, 242, 248);
 } 
 
 #current-task-display {
@@ -106,7 +116,7 @@ li {
 #add-task-btn {
     width: 200px;
     margin: 0 auto 10px;
-    background-color: rgb(33, 10, 70);
+    /* background-color: rgb(33, 10, 70); */
     padding: 8px;
     cursor: pointer;
     text-align: center;

gitee_pomodoro/assets/js/popup.js

@@ -1,25 +1,194 @@
-const btn = document.querySelector("#switch");
+// const btn = document.querySelector("#switch");
 
-chrome.storage.sync.get("linkOpen", ({ linkOpen }) => {
-  btn.checked = linkOpen;
-});
+// 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 });
+// 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");
+
+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");
     }
-  // 获取当前tab窗口
-  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-    chrome.scripting.executeScript({
-      target: { tabId: tabs[0].id },
-      func: refreshPage,
-    });
   });
+
+  // 定时器初始化
+  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!");
+        }
+      }
+    );
+  }
 });
 
-// 刷新页面
-function refreshPage() {
-  window.location.reload();
+// 开始按钮-绑定事件
+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 }) => {
+      countdownTimer.innerHTML = pomoData.countdownTimer;
+    });
+  }, 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);
+});
+
+//页面反复打开时初始化
+// start();
+
+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";
+  }
+});

gitee_pomodoro/assets/js/script.js

@@ -0,0 +1,356 @@
+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

@@ -0,0 +1,135 @@
+// 用户首次安装插件时执行一次，后面不会再重新执行(除非用户重新安装插件)
+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;
+// chorme.runtime.onMessage.addListener(()=>{
+//     chorme.storage.sync.get("pause",({pause})=>{
+
+//     })
+// })
+
+// 记住 是否暂停、
+
+// 判断计时剩余时间
+
+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",
+      },
+    });
+  } else {
+    //init初始化
+    chrome.storage.sync.set({
+      pomoData: {
+        minutes: 24,
+        seconds: 60,
+        countdownTimer: "25:00",
+        status: "start",
+      },
+    });
+  }
+  chrome.storage.sync.set({
+    status,
+  });
+  sendResponse();
+});
+
+// 番茄钟倒计时功能
+function countdown({ minutes, seconds, status }) {
+  console.log("分秒=============", minutes, seconds);
+  // 设置分钟和秒数
+  // let currentMins = minutes - 1;
+  seconds--;
+  let currentTimer =
+    (minutes < 10 ? "0" : "") +
+    minutes +
+    ":" +
+    (seconds < 10 ? "0" : "") +
+    seconds;
+  // countdownTimer.innerHTML = currentTimer; 拿到
+
+  chrome.storage.sync.set(
+    {
+      pomoData: {
+        seconds: seconds,
+        minutes: minutes,
+        countdownTimer: currentTimer,
+        status,
+      },
+    },
+    function () {
+      if (!chrome.runtime.error) {
+        console.log("started");
+      }
+    }
+  );
+
+  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 });
+  } else if (currentMins === 0) {
+    audio.play();
+    reset();
+  }
+}

gitee_pomodoro/manifest.json

@@ -1,12 +1,11 @@
 {
     "name":"助手-pomodoro",
     "description":"manage your time",
-    "version":"0.1",
+    "version":"0.3",
     "manifest_version":3,
     "background":{
-        "service_worker":"./assets/js/background.js"
+        "service_worker":"background.js"
     },
-    "options_page": "./assets/html/options.html", 
     "permissions":["storage","activeTab", "scripting","notifications","alarms", "contextMenus"],
     "action":{
         "default_popup":"popup.html",

gitee_pomodoro/popup.html

@@ -15,29 +15,31 @@
         <source src="./src/alarm.mp3" type="audio/mp3">
     </audio>
     
+    <!-- 计时部分 -->
+    <div id="timer">
 
-    <header id="timer">
-      <div class="buttons">
+      <!-- 切换背景图片 -->
       <div class="slider">
         <span class="left">&lt;</span>
         <span class="right">&gt;</span>
       </div>
 
-        <div class="button" id="pomodoro-btn">开始专注</div>
-        <!-- <div class="button" id="short-break-btn">Short Break</div>
-        <div class="button" id="long-break-btn">Long Break</div> -->
-      </div>
+      
+        <div class="button" id="pomodoro-btn">专注模式</div>
+      
       <div id="countdown">
-          <span>25:00</span>
+          <span>00:00</span>
+      </div>
+      <!-- 计时开始、重置 -->
+      <div id="start-btn">开始</div>
+      <div id="end-btn">暂停</div>
+      <div id="reset-btn">重置</div>
     </div>
-      <div id="start-btn">Start</div>
-      <div id="reset-btn">Reset</div>
-    </header>
-    
     
+    <!-- 添加任务清单 -->
     <div id="worklist">
       <div id="current-task-display">
-        <div id="message">You are working on:</div>
+        <div id="message">你正在专注于:</div>
         <div id="selected-task"></div>
       </div>
       
@@ -46,9 +48,7 @@
         <div id="add-task-btn">Add Task</div>
       
         <form id="task-form" class="hide">
-          <input id="text" type="text" placeholder="What are you working on?">
-          <label for="est-pomodoro">Est Rounds</label>
-          <input id="est-pomodoro" type="number">
+          <input id="text" type="text" placeholder="输入你要专注的事情">
           <div id="btn-container">
             <button id="save" type="submit">Save</button> 
             <button id="cancel" type="button">Cancel</button>
@@ -57,11 +57,13 @@
       </div>
     </div>
     
+    <!-- 页脚--设置 -->
     <footer>
       <div class="settings">
         <a href="./assets/html/options.html">settings</a>
       </div>
     </footer>
-    <script src="./assets/js/"></script>
+
+    <script src="./assets/js/popup.js"></script>
 </body>
 </html>

gitee_pomodoro/timer.js

@@ -0,0 +1,18 @@
+// window.onload = function(){
+//     chrome.storage.sync.set({
+//         pause: true,
+//         minutes:25,
+//         seconds:60,
+//         pomodoro:"pomodoro",
+//         countdownTimer:"25:00",
+//         pbutton:"pomodoroBtn",
+//         countFlag:false
+//     });
+
+//     chrome.storage.sync.get("countFlag",({countFlag})=>{
+//         if(countFlag){
+//             count();
+//         }
+//     })
+
+// }