Finished the alert (notification), fixed existing bugs

workingver/background.js

@@ -31,7 +31,7 @@ correct logic of the file should be:
 // }
 
 
-
+let prohibitedWebsites = [];
 
 chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
     if (request.action === "setGroupId") {
@@ -44,21 +44,27 @@ chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
         })
     }
     if (request.action === "setWebsites") {
-        prohibitedWebsites = request.websites.map((url) => url.hostname);
+        // websites are all string type! not URL
+        // there is no input validation
+        // temporarily assume all inputs are hosts already
+        // prohibitedWebsites = request.websites.map((url) => (new URL(url)).hostname);
+        // console.log(prohibitedWebsites);
+        // console.log(typeof(request.websites));
+        // console.log(typeof(request.websites[0]));
         // updateList(groupId, prohibitedWebsites);  // Update the server with the new list
+        prohibitedWebsites = request.websites
         chrome.storage.local.set({ groupId: request.groupId, websites: request.websites}, function() {
             console.log('groupId saved:', request.groupId);
             console.log('websites saved:', request.websites);
             sendResponse({ success: true });
         return true; // Indicates asynchronous response
         })
-    }else if (request.action === "receivedList") {
+    } else if (request.action === "receivedList") {
         prohibitedWebsites = request.sites;  // Store the updated list to local prohibitedWebsites
     }
 
 });
 
-let prohibitedWebsites = [];
 // const socket = io('http://localhost:3000'); // Replace with your server address.
 
 // When a user sets or updates their groupId, store it locally.
@@ -87,24 +93,70 @@ let prohibitedWebsites = [];
 chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
     // Check if the tab is completely loaded and has a URL
     if (changeInfo.status === 'complete' && tab.url) {
-        console.log(typeof(tab.url));
-        const visitedDomain = tab.url.hostname; // Extract the domain from the visited URL
+        console.log(tab.url);
+        // this url is not of type URL (is string)
+        // so conversion is needed
+        // some url cannot be parsed by URL constructor
+        let visitedDomain = "";
+        try {
+            const url = new URL(tab.url);
+            console.log(url);
+            visitedDomain = url.hostname; // Extract the domain from the visited URL
+        } catch (error) {
+            console.log("Invalid url, skipped");
+            return null;
+        }
 
         // Now, you fetch the most recent list of prohibited websites from the server 
         // Note: Make sure to handle how `getList` from `client.js` returns the list to `background.js`
         chrome.storage.local.get('groupId', function(data) {
             // getList(data.groupId);
+            console.log(prohibitedWebsites);
 
             // After getting the list from the server (which should be updated in the `prohibitedWebsites` array),
             // Check if the visited domain is in the prohibited list
             if (prohibitedWebsites.includes(visitedDomain)) {
-
-                chrome.notifications.create({
+
+                console.log(prohibitedWebsites);
+                console.log(prohibitedWebsites.includes(visitedDomain));
+                console.log(visitedDomain);
+
+                // this works without any error on my end
+                // but I did not see any notifications popping up (probably due to privacy settings?)
+                var username = "User"; 
+
+                chrome.storage.local.get('username', (result) => {
+                    // This is not correct yet, but the default is set to be User, so the output is reasonable
+                    username = result.username;
+                });
+                chrome.notifications.create("prohibitedVisit", {
                             type: 'basic',
-                            iconUrl: '128.png',
+                            iconUrl: './128.png',
                             title: 'Notification',
-                            message: 'visited prohibited website'
+                            // TODO: change username if the sever is working as intended
+                            message: `${username} visited prohibited website ${tab.url}`,
                         });
+                console.log("Notifications sent");
+
+                // this is left as a back up
+                // sendMessage not working here
+                // need popup to have handshake message to initiate message sending
+                // background can only send back through response
+                // chrome.runtime.sendMessage({
+                //     action: "prohibitedVisit",
+                //     website: tab.url,
+                //     username: "noname", // server not working so this is just a stab
+                // });
+
+                // works fine, but popup has some issue receiving it correctly
+                chrome.alarms.create(
+                    "prohibitedVisit", {
+                        delayInMinutes: 0, 
+                        periodInMinutes: 2,
+                    }
+                );
+                console.log("Alarms sent")
+                // can maybe set the local storage for url and username info
             }
         });
     }

workingver/manifest.json

@@ -3,7 +3,7 @@
   "manifest_version": 3,
   "name": "Group Notify Extension",
   "version": "1.0",
-  "permissions": ["webRequest", "storage", "tabs", "alarms"],
+  "permissions": ["webRequest", "storage", "tabs", "alarms", "notifications"],
   "background": {
     "service_worker": "background.js"
   },

workingver/popup.js

@@ -20,14 +20,22 @@ document.addEventListener('DOMContentLoaded', function() {
 
     saveButton.addEventListener('click', function() {
         const blockedWebsites = Array.from(blockedList.children).map(li => li.textContent);
-        const messageObj = {action: "setWebsites", websites: blockedWebsites, groupId: group.value};
+        const messageObj = {
+            action: "setWebsites", 
+            websites: blockedWebsites, 
+            groupId: group.value
+        };
         console.log("Sending message:", messageObj);
         chrome.runtime.sendMessage(messageObj);
     });
 
 
     saveUserButton.addEventListener('click',function(){
-        const messageObj = {action: "setGroupId", groupId: group.value, username: nameInput.value};
+        const messageObj = {
+            action: "setGroupId", 
+            groupId: group.value, 
+            username: nameInput.value
+        };
         console.log("Sending message:", messageObj);
         chrome.runtime.sendMessage(messageObj);
         // chrome.runtime.sendMessage({groupId: group, username: nameInput}, function(response) {
@@ -53,8 +61,31 @@ document.addEventListener('DOMContentLoaded', function() {
     //        });
     //    }
     // });
+
+    // NOT WOWRKING RIGHT NOW!!!
+    // chrome.alarms.onAlarm.addListener(async (alarm) => {
+    //     console.log("Alarm received");
+    //     console.log(alarm);
+    //     alarm = JSON.stringify(alarm);
+    //     console.log(alarm);
+    //     if (alarm.name === "prohibitedVisit") {
+    //         // TODO: change username if the sever is working as intended
+    //         alert(`User visited a prohibited website ${request.website}`);
+    //     }
+    // });
 });
 
+// chrome.runtime.onMessage.addListener(
+//     (request, sender, sendResponse) => {
+//         if (request.action === "prohibitedVisit") {
+//             console.log("Receiving prohibited visit message")
+//             // TODO: change chrome.storage.local.get('username') if the sever is working as intended
+//             alert(`User ${chrome.storage.local.get('username')} visited a prohibited website ${request.website}`);
+//         }
+//     }
+// );
+
+
 function redirect(){
 
 }