✨ feat: Add ability to block/unblock websites.

- This commit adds crude, un-optimized code.
- Shall attempt to optimize them in the upcoming commits.
- Bump version to 0.0.1
- Have added comments & kept the console.logs intact for easier interpretation of code.

src/background.js

@@ -1,17 +1,38 @@
 console.log("Get Back To Work, NOW 😡");
 
+// Setting initial mode as Chill
 let mode = "Chill";
-
 chrome.runtime.onInstalled.addListener(() => {
   console.log("Beginning to set default mode to 'Chill'.");
   chrome.storage.sync.set({ mode });
   chrome.storage.sync.get("blockedWebsites", ({ blockedWebsites }) => {
     if (blockedWebsites === undefined) {
-    //   console.log("ha bhai, blockedWebsites nahi hai list me.");
+      // checking if there is a list of empty websites in storage. if not initializing an empty list.
+      console.log("ha bhai, blockedWebsites nahi hai list me.");
       let blockedWebsites = [];
       chrome.storage.sync.set({ blockedWebsites });
     }
   });
+  chrome.declarativeNetRequest.getDynamicRules((rules) => {
+    // removing old persisted dynamic rules from storage
+    console.log(
+      "Hello, here in the service worker. Deleting the old persisted rules."
+    );
+    let rulesToBeDeleted = [];
+    for (let i = 0; i < rules.length; i++) {
+      rulesToBeDeleted.push(rules[i].id);
+    }
+    console.log("Rules to be deleted: " + rulesToBeDeleted);
+    chrome.declarativeNetRequest.updateDynamicRules(
+      {
+        removeRuleIds: rulesToBeDeleted,
+      },
+      () => {
+        console.log("Done deleting 🥰");
+      }
+    );
+  });
+  // showing options page. TODO make an onboarding page.
   chrome.tabs.create({
     url: chrome.runtime.getURL("options/options.html"),
   });

src/manifest.json

@@ -5,7 +5,7 @@
 
   "author": "Dheeraj Lalwani",
 
-  "version": "0.0.0",
+  "version": "0.0.1",
 
   "manifest_version": 3,
 
@@ -16,7 +16,7 @@
 
   "options_page": "options/options.html",
 
-  "permissions": ["storage", "tabs"],
+  "permissions": ["storage", "tabs", "declarativeNetRequest"],
 
   "action": {
     "default_popup": "popup/popup.html",

src/options/options.js

@@ -1,19 +1,5 @@
 let list = document.querySelector("#list");
-// let deleteButtonsContainer = document.querySelector("#delete_buttons");
 console.log(list);
-// console.log(delete_buttons);
-
-let isValidURL = (testString) => {
-  let url;
-  try {
-    url = new URL(testString);
-  } catch (err) {
-    console.log("Bhai tera to try/catch me hi kat gaya.");
-    console.log(err);
-    return false;
-  }
-  return url.protocol === "http:" || url.protocol === "https:";
-};
 
 document.addEventListener("DOMContentLoaded", () => {
   console.log("Load ho gaya window.");
@@ -26,23 +12,52 @@ document.addEventListener("DOMContentLoaded", () => {
     }
     console.log(blockedWebsites);
     let listItems = "";
-    // let deleteButtons = "";
+    // inserting the buttons links & delete buttons on the page.
     for (let i = 0; i < blockedWebsites.length; i++) {
       listItems += `<li class="website_list_item"><span tabindex=0>${blockedWebsites[i]}</span> <button class="delete_button" id="${i}" value="${i}">Delete</button></li>`;
     }
     list.innerHTML = listItems;
     let deleteButtons = document.querySelectorAll(".delete_button");
     for (let j = 0; j < deleteButtons.length; j++) {
+      // implementing the delete website logic
       deleteButtons[j].addEventListener("click", () => {
-        console.log(deleteButtons[j].value);
-        blockedWebsites.splice(deleteButtons[j].value, 1);
-        chrome.storage.sync.set({ blockedWebsites });
-        location.reload();
+        chrome.storage.sync.get("mode", ({ mode }) => {
+          // checking if mode is work.
+          if (mode === "Work") {
+            alert("Cannot delete when in work mode!"); // TODO while refactoring, replace alert with a modal or a message toast.
+          } else {
+            let btnToBeDeleted = deleteButtons[j].value;
+            console.log(btnToBeDeleted);
+            chrome.declarativeNetRequest.getDynamicRules((rules) => {
+              for (let k = 0; k < rules.length; j++) {
+                if (
+                  rules[k].condition.urlFilter ===
+                  blockedWebsites[btnToBeDeleted]
+                ) {
+                  chrome.declarativeNetApi.updateDynamicRules(
+                    {
+                      removeRuleIds: [rules[k].id],
+                    },
+                    () => {
+                      console.log(
+                        "Deleted: " + blockedWebsites[btnToBeDeleted]
+                      );
+                    }
+                  );
+                }
+              }
+            });
+            blockedWebsites.splice(btnToBeDeleted, 1);
+            chrome.storage.sync.set({ blockedWebsites });
+            location.reload();
+          }
+        });
       });
     }
   });
 });
 
+// implementing logic for adding new website.
 let addButton = document.querySelector("#add_button");
 console.log(addButton);
 addButton.addEventListener("click", () => {

src/popup/popup.css

@@ -55,9 +55,11 @@ body {
   color: #1f283f;
   border: none;
   border-radius: 10px;
+  cursor: pointer;
 }
 
 .random {
   background-color: #f95050;
   color: #00d660;
 }
+

src/popup/popup.js

@@ -27,11 +27,58 @@ function changeMode() {
       bgColor = "#f95050";
       color = "#ffffff";
       console.log("Mode was 'Chill'. Now setting to 'Work'.");
+      chrome.storage.sync.get("blockedWebsites", ({ blockedWebsites }) => {
+        console.log("The following websites shall be blocked.");
+        blockedWebsites.forEach((url, index) => {
+          // actually updating the rules.
+          let id = index + 1;
+          chrome.declarativeNetRequest.updateDynamicRules({
+            addRules: [
+              {
+                id: id,
+                priority: 1,
+                action: { type: "block" },
+                condition: {
+                  urlFilter: url,
+                  resourceTypes: [
+                    "main_frame",
+                    "sub_frame",
+                    "xmlhttprequest",
+                    "other",
+                    "script",
+                    "stylesheet",
+                  ],
+                },
+              },
+            ],
+            removeRuleIds: [id],
+          });
+        });
+      });
     } else {
       mode = "Chill";
       bgColor = "#00d660";
       color = "#000000";
       console.log("Mode was 'Work'. Now setting to 'Chill'.");
+      chrome.declarativeNetRequest.getDynamicRules((rules) => {
+        console.log(
+          "Hello, here in popup.js, deleting rules because work mode is turned off."
+        );
+        // deleting rules when mode changed to chill.
+        let rulesToBeDeleted = [];
+        for (let i = 0; i < rules.length; i++) {
+          rulesToBeDeleted.push(rules[i].id);
+        }
+        console.log("Rules to be deleted: " + rulesToBeDeleted);
+        chrome.declarativeNetRequest.updateDynamicRules(
+          {
+            removeRuleIds: rulesToBeDeleted,
+          },
+          () => {
+            console.log("Done deleting 🥰");
+          }
+        );
+      });
     }
     chrome.storage.sync.set({ mode });
     modeButton.innerHTML = mode;