Bati create api req

extension-ui/background.js

@@ -1,11 +1,20 @@
-
+importScripts('constants.js');
 let blockedSitesCache = null;
+let allowedSitesCache = [];
+let isBlackList = true;
+let currentUser = null;
+
+chrome.runtime.onStartup.addListener(() => {
+  initializeCaches();
+  initializeSession();
+});
 
-// Initialize cache when the extension is loaded
-chrome.runtime.onStartup.addListener(() => initializeBlockedSitesCache());
-chrome.runtime.onInstalled.addListener(() => initializeBlockedSitesCache());
+chrome.runtime.onInstalled.addListener(() => {
+  initializeCaches();
+  initializeSession();
+});
 
-function initializeBlockedSitesCache(callback) {
+function initializeCaches(callback) {
   chrome.storage.local.get("blockedSites", (data) => {
     blockedSitesCache = data.blockedSites || [];
     if (typeof callback === "function") {
@@ -14,15 +23,51 @@ function initializeBlockedSitesCache(callback) {
   });
 }
 
-// Use this function to ensure cache is initialized
 function ensureBlockedSitesCacheInitialized(callback) {
   if (blockedSitesCache === null) {
-    initializeBlockedSitesCache(callback);
+    initializeCaches(callback);
   } else if (typeof callback === "function") {
     callback();
   }
 }
 
+function initializeSession() {
+  chrome.storage.local.get(['userId'], (result) => {
+    if (result.userId) {
+      currentUser = result.userId;
+      console.log("Current User ID:", currentUser);
+    } else {
+      fetchUserIdFromServer();
+    }
+  });
+}
+
+function fetchUserIdFromServer() {
+  fetch('http://localhost:5000/users/me', {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json', 'Cache-Control': 'no-cache'
+    },
+    credentials: 'include'
+  })
+    .then((response) => response.json())
+    .then((user_id) => {
+      if (user_id) {
+        const userId = user_id;
+        currentUser = userId;
+        chrome.storage.local.set({ userId: currentUser }, () => {
+          console.log("User ID fetched from server and stored:", currentUser);
+        });
+      } else {
+        console.log("User ID not found on the server.");
+      }
+    })
+    .catch((error) => {
+      console.error("Error fetching user ID from server:", error);
+    });
+}
+
+
 chrome.webNavigation.onBeforeNavigate.addListener((details) => {
   ensureBlockedSitesCacheInitialized(() => {
     handleBeforeNavigate(details);
@@ -32,35 +77,36 @@ chrome.webNavigation.onBeforeNavigate.addListener((details) => {
 function handleBeforeNavigate(details) {
   try {
     const url = new URL(details.url);
-
     if (url.protocol === 'chrome:' || url.protocol === 'about:') {
       return;
     }
 
     const hostname = url.hostname.toLowerCase();
-
     if (blockedSitesCache.some(site => hostname.includes(site))) {
-      chrome.tabs.get(details.tabId, (tab) => {
-        if (tab.url.startsWith('chrome://') || tab.url.startsWith('about:')) {
-          return;
-        }
-        chrome.scripting.executeScript({
-          target: { tabId: details.tabId },
-          func: () => {
-            //TODO  add UI for the oops window
-             window.stop();
-            window.location.href = chrome.runtime.getURL('oops.html');
-          }
-        }).catch(error => {
-          console.error("Error executing script: ", error);
-        });
-      });
+      blockSite(details.tabId);
     }
   } catch (error) {
     console.error("Invalid URL: ", error);
   }
 }
 
+function blockSite(tabId) {
+  chrome.tabs.get(tabId, (tab) => {
+    if (tab.url.startsWith('chrome://') || tab.url.startsWith('about:')) {
+      return;
+    }
+    chrome.scripting.executeScript({
+      target: { tabId: tabId },
+      func: () => {
+        window.stop();
+        window.location.href = chrome.runtime.getURL('oops.html');
+      }
+    }).catch(error => {
+      console.error("Error executing script: ", error);
+    });
+  });
+}
+
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   if (request.action === 'addBlockedSite') {
     const hostname = request.hostname.toLowerCase();
@@ -74,11 +120,18 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
         sendResponse({ success: false, message: 'Site already blocked' });
       }
     });
-    return true; // כדי להורות שהתגובה היא אסינכרונית
+    return true;
   } else if (request.action === 'getBlockedSites') {
     ensureBlockedSitesCacheInitialized(() => {
       sendResponse({ blockedSites: blockedSitesCache });
     });
-    return true; // כדי להורות שהתגובה היא אסינכרונית
+    return true;
+  } else if (request.action === 'storeUserId' && request.userId) {
+    chrome.storage.local.set({ userId: request.userId }, () => {
+      currentUser = request.userId;
+      console.log('User ID stored:', currentUser);
+      sendResponse({ success: true });
+    });
+    return true;
   }
 });

extension-ui/constants.js

@@ -0,0 +1,7 @@
+
+const TEXTS = {
+    BLOCK_WEBSITES_BUTTON: 'Block Websites',
+    BROWSING_DATA_BUTTON: 'Browsing Data',
+    ENTER_SITE_BUTTON: 'Enter to Site',
+    CONTROL_PANEL_HEADING: 'Extension Control Panel',
+};

extension-ui/content.js

@@ -1,18 +1,25 @@
 let blockedSitesCache = null;
+let allowedSitesCache = null;
+let isBlackList = true;
 
-function initializeBlockedSitesCache(callback) {
-  chrome.storage.local.get("blockedSites", (data) => {
+function initializeCache(callback) {
+  chrome.storage.local.get(["blockedSites", "allowedSites", "isBlackList"], (data) => {
     blockedSitesCache = data.blockedSites || [];
+    allowedSitesCache = data.allowedSites || [];
+    isBlackList = data.isBlackList !== undefined ? data.isBlackList : true;
     if (callback) callback();
   });
 }
-
-initializeBlockedSitesCache(() => {
+initializeCache(() => {
   const hostname = window.location.hostname.toLowerCase();
-  const domain = hostname.split(".")[1];
-  if (blockedSitesCache && blockedSitesCache.includes(domain)) {
-    window.location.href = chrome.runtime.getURL('oops.html');
+
+  if (isBlackList) {
+    if (blockedSitesCache && blockedSitesCache.includes(hostname)) {
+      window.location.href = chrome.runtime.getURL('oops.html');
+    }
+  } else {
+    if (allowedSitesCache && !(allowedSitesCache.includes(hostname))) {
+      window.location.href = chrome.runtime.getURL('oops.html');
+    }
   }
 });
-
-

extension-ui/manifest.json

@@ -1,16 +1,20 @@
 {
   "manifest_version": 3,
   "name": "Website Blocker7",
-  "version": "1.0",
+  "version": "3.0",
   "description": "Blocks specified websites on Chrome using manifest v3",
   "permissions": [
+    "cookies",
     "storage",
-    "scripting",
-    "webNavigation",
     "tabs",
+    "webNavigation",
+    "scripting",
     "activeTab"
+
+
   ],
   "host_permissions": [
+     "http://localhost:5000/*",
     "http://*/*",
     "https://*/*"
   ],
@@ -20,7 +24,14 @@
   "action": {
     "default_popup": "popup.html"
   },
-   "web_accessible_resources": 
-   [{"resources": ["oops.html"],
-    "matches": ["<all_urls>"]}]
-}
+  "web_accessible_resources": [
+    {
+      "resources": ["oops.html"],
+      "matches": ["<all_urls>"]
+    }
+  ],
+  "content_security_policy": {
+    "script-src": ["'self'", "https://*"],
+    "object-src": ["'self'"]
+  }
+}

extension-ui/popup.css

@@ -1,18 +1,70 @@
+:root {
+  --background-color: #f8f9fa;
+  --container-background: #ffffff;
+  --button-background: #28a745;
+  --button-background-hover: #218838;
+  --text-color: #ffffff;
+  --border-color: #ced4da;
+  --list-background: #f1f3f5;
+  --list-border: #dee2e6; }
+
 body {
-  font-family: Arial, sans-serif;
+  font-family: 'Roboto', Arial, sans-serif;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
-  background-color: #F0F0F0;
-}
+  background-color: var(--background-color); }
 
 .container {
   text-align: center;
-}
+  background-color: var(--container-background);
+  border-radius: 10px;
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  width: 80%;
+  max-width: 400px; }
 
-.hidden {
-  display: none;
-}
+button {
+  background-color: var(--button-background);
+  color: var(--text-color);
+  border: none;
+  border-radius: 5px;
+  padding: 12px 20px;
+  margin: 10px 0;
+  cursor: pointer;
+  font-size: 16px;
+  transition: background-color 0.3s, transform 0.2s; }
+
+button:hover {
+  background-color: var(--button-background-hover);
+  transform: translateY(-2px); }
+
+form {
+  margin: 20px 0; }
+
+input[type="text"] {
+  padding: 10px;
+  border: 1px solid var(--border-color);
+  border-radius: 5px;
+  width: 80%;
+  margin: 10px 0;
+  font-size: 14px; }
 
-/*# sourceMappingURL=popup.css.map */
+input[type="text"]:focus {
+  outline: none;
+  border-color: var(--button-background); }
+
+ul {
+  list-style-type: none;
+  padding: 0; }
+
+li {
+  background-color: var(--list-background);
+  border: 1px solid var(--list-border);
+  border-radius: 5px;
+  padding: 10px;
+  margin: 10px 0; }
+
+.hidden {
+  display: none; }

extension-ui/popup.html

@@ -2,28 +2,27 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Website Blocker</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Extension Popup</title>
   <link rel="stylesheet" href="popup.css">
 </head>
 <body>
-  <!-- TODO to use generic components and style this page -->
   <div class="container">
-    <button id="blockSitesBtn">Block Websites</button>
-    <button id="browsingDataBtn">Browsing Data</button>
-    <button id="enterSite">Enter to Site</button>
+    <h2 id="controlPanelHeading"></h2>
+    <button id="blockSitesBtn"></button>
+    <button id="browsingDataBtn"></button>
+    <button id="enterSite"></button>
     <div id="blockDiv" class="hidden">
-      <h3>Blocked Sites:</h3>
+      <h3>Blocked Sites</h3>
       <ul id="blockedSitesList"></ul>
       <form id="blockForm">
-        <input type="text" id="siteInput" placeholder="Enter site name">
+        <input type="text" id="siteInput" placeholder="Enter site URL">
         <button type="submit">Block Site</button>
       </form>
     </div>
-    <div id="browsingDataDiv" class="hidden">
-      <h3>Browsing Data:</h3>
-      <p>This is where browsing data will be displayed.</p>
-    </div>
+    <div id="browsingDataDiv" class="hidden"></div>
   </div>
+  <script src="constants.js"></script>
   <script src="popup.js"></script>
 </body>
 </html>