diff --git a/packages/shell-chrome/assets/css/main.css b/packages/shell-chrome/assets/css/main.css
index 8080d2b..e3faffb 100644
--- a/packages/shell-chrome/assets/css/main.css
+++ b/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;
diff --git a/packages/shell-chrome/assets/css/main.less b/packages/shell-chrome/assets/css/main.less
index 28945a3..9c15e04 100644
--- a/packages/shell-chrome/assets/css/main.less
+++ b/packages/shell-chrome/assets/css/main.less
@@ -11,10 +11,12 @@ a {
text-decoration: none;
}
+body {
+ background: linear-gradient(to right bottom, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%);
+}
#popup {
- height: 250px;
- width: 200px;
- background: linear-gradient(to right bottom, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%);
+ min-height: 450px;
+ width: 300px;
header{
width: inherit;
height: 30px;
@@ -167,4 +169,4 @@ a {
}
}
}
-}
\ No newline at end of file
+}
diff --git a/packages/shell-chrome/assets/html/pomodoro/assets/css/popup.css b/packages/shell-chrome/assets/html/pomodoro/assets/css/popup.css
new file mode 100644
index 0000000..3c92d2d
--- /dev/null
+++ b/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;
+}
diff --git a/packages/shell-chrome/assets/html/pomodoro/assets/js/popup.js b/packages/shell-chrome/assets/html/pomodoro/assets/js/popup.js
new file mode 100644
index 0000000..25f3955
--- /dev/null
+++ b/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";
+ }
+});
diff --git a/packages/shell-chrome/assets/html/pomodoro/background.js b/packages/shell-chrome/assets/html/pomodoro/background.js
new file mode 100644
index 0000000..5586ffa
--- /dev/null
+++ b/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" });
diff --git a/packages/shell-chrome/assets/html/pomodoro/images/pomo1.png b/packages/shell-chrome/assets/html/pomodoro/images/pomo1.png
new file mode 100644
index 0000000..b6dc55c
Binary files /dev/null and b/packages/shell-chrome/assets/html/pomodoro/images/pomo1.png differ
diff --git a/packages/shell-chrome/assets/html/pomodoro/images/pomo_128.png b/packages/shell-chrome/assets/html/pomodoro/images/pomo_128.png
new file mode 100644
index 0000000..de1eb07
Binary files /dev/null and b/packages/shell-chrome/assets/html/pomodoro/images/pomo_128.png differ
diff --git a/packages/shell-chrome/assets/html/pomodoro/images/pomo_16.png b/packages/shell-chrome/assets/html/pomodoro/images/pomo_16.png
new file mode 100644
index 0000000..a8a233b
Binary files /dev/null and b/packages/shell-chrome/assets/html/pomodoro/images/pomo_16.png differ
diff --git a/packages/shell-chrome/assets/html/pomodoro/images/pomo_48.png b/packages/shell-chrome/assets/html/pomodoro/images/pomo_48.png
new file mode 100644
index 0000000..40ce3ba
Binary files /dev/null and b/packages/shell-chrome/assets/html/pomodoro/images/pomo_48.png differ
diff --git a/packages/shell-chrome/assets/html/pomodoro/images/pomo_crystal.jpg b/packages/shell-chrome/assets/html/pomodoro/images/pomo_crystal.jpg
new file mode 100644
index 0000000..ca6ed77
Binary files /dev/null and b/packages/shell-chrome/assets/html/pomodoro/images/pomo_crystal.jpg differ
diff --git a/packages/shell-chrome/assets/html/pomodoro/images/pomo_fire.jpeg b/packages/shell-chrome/assets/html/pomodoro/images/pomo_fire.jpeg
new file mode 100644
index 0000000..91f1a30
Binary files /dev/null and b/packages/shell-chrome/assets/html/pomodoro/images/pomo_fire.jpeg differ
diff --git a/packages/shell-chrome/assets/html/pomodoro/images/pomo_foresr.jpeg b/packages/shell-chrome/assets/html/pomodoro/images/pomo_foresr.jpeg
new file mode 100644
index 0000000..265bef8
Binary files /dev/null and b/packages/shell-chrome/assets/html/pomodoro/images/pomo_foresr.jpeg differ
diff --git a/packages/shell-chrome/assets/html/pomodoro/images/pomo_green.jpeg b/packages/shell-chrome/assets/html/pomodoro/images/pomo_green.jpeg
new file mode 100644
index 0000000..9517fee
Binary files /dev/null and b/packages/shell-chrome/assets/html/pomodoro/images/pomo_green.jpeg differ
diff --git a/packages/shell-chrome/assets/html/pomodoro/images/pomo_leaf.jpeg b/packages/shell-chrome/assets/html/pomodoro/images/pomo_leaf.jpeg
new file mode 100644
index 0000000..fef0e27
Binary files /dev/null and b/packages/shell-chrome/assets/html/pomodoro/images/pomo_leaf.jpeg differ
diff --git a/packages/shell-chrome/assets/html/pomodoro/images/pomo_light.jpeg b/packages/shell-chrome/assets/html/pomodoro/images/pomo_light.jpeg
new file mode 100644
index 0000000..7b30a8b
Binary files /dev/null and b/packages/shell-chrome/assets/html/pomodoro/images/pomo_light.jpeg differ
diff --git a/packages/shell-chrome/assets/html/pomodoro/images/pomo_ocean.jpg b/packages/shell-chrome/assets/html/pomodoro/images/pomo_ocean.jpg
new file mode 100644
index 0000000..6409d59
Binary files /dev/null and b/packages/shell-chrome/assets/html/pomodoro/images/pomo_ocean.jpg differ
diff --git a/packages/shell-chrome/assets/html/pomodoro/images/pomo_waterfall.jpg b/packages/shell-chrome/assets/html/pomodoro/images/pomo_waterfall.jpg
new file mode 100644
index 0000000..8937b95
Binary files /dev/null and b/packages/shell-chrome/assets/html/pomodoro/images/pomo_waterfall.jpg differ
diff --git a/packages/shell-chrome/assets/html/pomodoro/notification.html b/packages/shell-chrome/assets/html/pomodoro/notification.html
new file mode 100644
index 0000000..cfaac01
--- /dev/null
+++ b/packages/shell-chrome/assets/html/pomodoro/notification.html
@@ -0,0 +1,9 @@
+
+
+ 播放歌曲时的一些不错的文字。
<音频自动播放>
+
+
+
+
diff --git a/packages/shell-chrome/assets/html/pomodoro/popup.html b/packages/shell-chrome/assets/html/pomodoro/popup.html
new file mode 100644
index 0000000..1301838
--- /dev/null
+++ b/packages/shell-chrome/assets/html/pomodoro/popup.html
@@ -0,0 +1,71 @@
+
+
+
+
+
+
+ my todo list
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <
+ >
+
+
+
+
+
+
+ 00:00
+
+
+
+
+
+
+
+