Merge pull request #3 from obayomi96/ft-new-features

obayomi96 · web-flow · commit 1c1244e7dac3 · 2023-10-16T10:57:22.000+01:00
[Feature]: Update version with additional features &amp; fixes
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -0,0 +1,12 @@
+## What does this PR do?
+
+
+## How can this PR (Update) be manually tested?
+
+
+## Other Information / Background Context
+
+
+## Issue Information
+
+- Summary of Issue (In your own words):
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-## BLINKALERT CHROME EXTENSION (Version 3.0.0)
+## BLINKALERT CHROME EXTENSION (Version 3.0.3)
 
 ###### DESCRIPTION
 
@@ -14,6 +14,8 @@
  ###### FEATURES
  
  * Reminder at 20 minutes interval to, rest and take the 20-20-20 exercise.
+ * You can select between 3 options of duration interval.
+ * Displays a visual timer on the extension popup for time left till next break.
  * Leads you through the exercise procedures in a new tab.
 
 ###### AUTHOR
diff --git a/css/style.css b/css/style.css
@@ -21,7 +21,7 @@ h3.title {
   text-align: center;
   padding: 10px;
 }
-.version {
+.github {
   font-size: 10px;
   color: grey;
   padding: 10px;
@@ -99,26 +99,7 @@ h3.title {
   border: 0.1rem #eee solid;
 }
 
-.modal-icons {
-  bottom: 0;
-  border-top: 0.5px solid #dadada;
-  height: 30px;
-  width: 100%;
-}
-.logo {
-  padding: 15px;
-}
-.logo-icon {
-  vertical-align: text-bottom;
-  margin-right: 12px;
-}
-.flex-container {
-  display: flex;
-  justify-content: space-between;
-  padding: 10px 22px;
-  bottom: 0;
-}
-.flex {
+.github-a {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
   width: 120px;
@@ -127,10 +108,23 @@ h3.title {
   margin: 0;
   padding: 0;
 }
-.flex:hover {
+
+.github-a:hover {
   opacity: 0.4;
 }
-.flex .fa {
+
+.github-a .fa {
   font-size: 20px;
   color: #2f5876;
 }
+
+#popup-timer {
+  border: 1px solid #dadada;
+  display: inline;
+  padding: 5px;
+  color: black;
+  font-family: Verdana, sans-serif, Arial;
+  font-size: 14px;
+  font-weight: normal;
+  text-decoration: none;
+}
diff --git a/exercise.html b/exercise.html
@@ -1,5 +1,6 @@
 <!doctype html>
 <html>
+
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -9,21 +10,26 @@
   <title>Blink Alert</title>
 </head>
 <header>
-    <h1>20-20-20 Exercise</h1>
-    <hr>
+  <h1>20-20-20 Exercise</h1>
+  <hr>
 </header>
-  <body>
-    <div id="countdown-timer" class="countdown-timer"></div>
-    <div id="modal" class="modal">
-        <div class="modal__header">
-            <h2>Exercise</h2>
-        </div><br><br> 
-        <div id="message">
-            After or during a long day of working with a computer, it is recommended to keep your eyes healthy for the long run by taking the 20-20-20 exercise every 20 minutes</div> <br>
-            <hr>
-    <br><div class="rule" id="message">Look Away From Your Computer, Look at something 20 feets away for 20 seconds (see timer..)<br> -BLINK AS MANY TIMES AS YOU CAN</div>
-      </div>
-    <script src="js/main.js"></script>
-    <script src="js/background.js"></script>
-  </body>
+
+<body>
+  <div id="countdown-timer" class="countdown-timer"></div>
+  <div id="modal" class="modal">
+    <div class="modal__header">
+      <h2>Exercise</h2>
+    </div><br><br>
+    <div id="message">
+      After or during a long day of working with a computer, it is recommended to keep your eyes healthy for the long
+      run by taking the 20-20-20 exercise every 20 minutes</div> <br>
+    <hr>
+    <br>
+    <div class="rule" id="message">Look Away From Your Computer, Look at something 20 feets away for 20 seconds (see
+      timer..)<br> -BLINK AS MANY TIMES AS YOU CAN</div>
+  </div>
+  <script src="js/main.js"></script>
+  <script src="js/background.js"></script>
+</body>
+
 </html>
diff --git a/js/background.js b/js/background.js
@@ -0,0 +1,45 @@
+// Chrome notification API
+const options = {
+  type: "basic",
+  title: "Blink Alert! - Take a break",
+  message:
+    "Look away from your computer for 20 seconds. (click here to take full exercise)",
+  iconUrl: "../images/eyeIcon_128.png",
+};
+
+let selectedDuration;
+let intervalId;
+
+const createNotification = () => {
+  chrome.notifications.create(options);
+};
+
+const createExerciseTab = () => {
+  chrome.tabs.create({ url: "exercise.html" });
+};
+
+chrome.notifications.onClicked.addListener(createExerciseTab);
+
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  if (message.updateInterval) {
+    chrome.storage.local.get("duration", ({ duration }) => {
+      selectedDuration = duration;
+      if (intervalId) {
+        clearInterval(intervalId);
+      }
+      intervalId = setInterval(createNotification, +selectedDuration);
+    });
+  }
+});
+
+chrome.runtime.onInstalled.addListener(() => {
+  // Set an initial alarm when the extension is installed or updated
+  chrome.storage.local.get("duration", ({ duration }) => {
+    selectedDuration = duration;
+    intervalId = setInterval(createNotification, +selectedDuration);
+  });
+});
+
+const keepAlive = () => setInterval(chrome.runtime.getPlatformInfo, 20e3);
+chrome.runtime.onStartup.addListener(keepAlive);
+keepAlive();
diff --git a/js/main.js b/js/main.js
@@ -1,11 +1,10 @@
-// 20 minutes countdown timer
+// 20 minutes countdown timer for excersise page
 function countdown(elementName, minutes, seconds) {
   let element, endTime, hours, mins, msLeft, time;
   // Make countdown double digits when less that 10
   function twoDigits(n) {
     return n <= 9 ? "0" + n : n;
   }
-  // Timer counter update
   function updateTimer() {
     msLeft = endTime - +new Date();
     if (msLeft < 1000) {
@@ -16,13 +15,13 @@ function countdown(elementName, minutes, seconds) {
       mins = time.getUTCMinutes();
       element.innerHTML =
         (hours ? "0" + ":" + twoDigits(mins) : mins) +
-        ":" + twoDigits(time.getUTCSeconds());
+        ":" +
+        twoDigits(time.getUTCSeconds());
       setTimeout(updateTimer, time.getUTCMilliseconds() + 500);
     }
-  } // updateTimer function end
-
+  }
   element = document.getElementById(elementName);
   endTime = +new Date() + 1000 * (60 * minutes + seconds) + 500;
   updateTimer();
-} // countdown function end
+}
 countdown("countdown-timer", 0, 20);
diff --git a/js/popup.js b/js/popup.js
@@ -1,71 +1,45 @@
-// // Chrome notification API
-const options = {
-  type: "basic",
-  title: "Blink Alert! - Its been 20 minutes!",
-  message:
-    "Look away from your Computer, Look at something 20 feet away for 20 seconds. (CLICK HERE TO TAKE EXERCISE)",
-  iconUrl: "images/eyeIcon_128.png",
-};
-
-let selectedDuration;
-
-const durationBtn1 = document.getElementById("durationBtn1");
-const durationBtn2 = document.getElementById("durationBtn2");
-const durationBtn3 = document.getElementById("durationBtn3");
-
 const checkSelectedBtn = (value) => {
-  if (value === "1200000") {
+  if (value === 1200000) {
     durationBtn1.classList.add("btnSelected");
     durationBtn2.classList.remove("btnSelected");
     durationBtn3.classList.remove("btnSelected");
-  } else if (value === "3600000") {
+  } else if (value === 3600000) {
     durationBtn2.classList.add("btnSelected");
     durationBtn1.classList.remove("btnSelected");
     durationBtn3.classList.remove("btnSelected");
-  } else if (value === "7200000") {
+  } else if (value === 7200000) {
     durationBtn3.classList.add("btnSelected");
     durationBtn1.classList.remove("btnSelected");
     durationBtn2.classList.remove("btnSelected");
   }
 };
 
-chrome.storage.local.get("duration", ({ duration }) => {
-  selectedDuration = duration || 1200000;
-  checkSelectedBtn(duration);
-});
+const durationBtn1 = document.getElementById("durationBtn1");
+const durationBtn2 = document.getElementById("durationBtn2");
+const durationBtn3 = document.getElementById("durationBtn3");
 
-durationBtn1.addEventListener("click", () => {
-  chrome.storage.local.set({ duration: "1200000" }, () => {
-    selectedDuration = 1200000;
-  });
-  chrome.storage.local.get("duration", ({ duration }) => {
-    checkSelectedBtn(duration);
+const setDuration = (value) => {
+  chrome.storage.local.set({ duration: value }, () => {
+    // Send a message to the background script to update the interval
+    chrome.runtime.sendMessage({ updateInterval: true });
+    checkSelectedBtn(value);
   });
-});
+};
 
-durationBtn2.addEventListener("click", () => {
-  chrome.storage.local.set({ duration: "3600000" }, () => {
-    selectedDuration = 3600000;
-  });
+document.addEventListener("DOMContentLoaded", () => {
   chrome.storage.local.get("duration", ({ duration }) => {
-    checkSelectedBtn(duration);
+    setDuration(duration || 1200000);
   });
 });
 
-durationBtn3.addEventListener("click", () => {
-  chrome.storage.local.set({ duration: "7200000" }, () => {
-    selectedDuration = 7200000;
-  });
-  chrome.storage.local.get("duration", ({ duration }) => {
-    checkSelectedBtn(duration);
-  });
+durationBtn1.addEventListener("click", () => {
+  setDuration(1200000);
 });
 
-setInterval(() => {
-  chrome.notifications.create(options);
-}, Number(selectedDuration) || 1200000);
+durationBtn2.addEventListener("click", () => {
+  setDuration(3600000);
+});
 
-// Create a new tab onclick of notification
-chrome.notifications.onClicked.addListener(function () {
-  chrome.tabs.create({ url: "exercise.html" });
+durationBtn3.addEventListener("click", () => {
+  setDuration(7200000);
 });
diff --git a/manifest.json b/manifest.json
@@ -2,7 +2,7 @@
 	"manifest_version": 3,
 	"name": "Blink Alert",
 	"description": "A reminder for a computer user to take the 20-20-20 blinking exercise at set intervals",
-	"version": "3.0.2",
+	"version": "3.0.3",
 	"icons": {
 		"19": "images/eyeIcon.png",
 		"128": "images/eyeIcon_128.png"
@@ -19,6 +19,9 @@
 		"notifications",
 		"storage"
 	],
+	"background": {
+		"service_worker": "js/background.js"
+	},
 	"content_security_policy": {
 		"extension_pages": "script-src 'self'; object-src 'self'"
 	}
diff --git a/popup.html b/popup.html
