added leak windw log

muthusalami · Aug 21, 2024 · 95338e0 · 95338e0
1 parent dbfaa56
commit 95338e0
Show file tree

Hide file tree

Showing 7 changed files with 201 additions and 10 deletions.
diff --git a/background.js b/background.js
@@ -89,7 +89,7 @@ function webRequestListenerFunction(details) {
   ) {
     processedUrls.add(details.url);
     saveProcessedUrls();
-    updateLeakCount(currentTabId, 1); // Update leak count for the current tab
+    updateLeakCount(currentTabId, 1); // update leak count for the current tab
     console.log("Leak detected:", details.url);
   }
 }

diff --git a/css/leaklogger-style.css b/css/leaklogger-style.css
@@ -0,0 +1,101 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
+
+/* leak Logger body styles */
+#leak-logger {
+  font-family: "Roboto", sans-serif;
+  font-size: 14px;
+  line-height: 1.6;
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+#leak-logger .wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 90%;
+  max-width: 1600px;
+  margin: 20px auto;
+  padding: 20px;
+  gap: 30px;
+}
+
+#leak-logger .container h1,
+#leak-logger .container h2,
+#leak-logger .container h3,
+#leak-logger .container h4,
+#leak-logger .container h5 {
+  font-family: "Roboto", sans-serif;
+}
+
+#leak-logger .container {
+  font-family: monospace;
+  flex: 1;
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  background-color: #f9f9f9;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  overflow-y: scroll;
+  max-height: 75vh;
+  overflow-x: hidden;
+  word-wrap: break-word;
+}
+
+#leak-logger .container div {
+  margin-bottom: 10px;
+  padding: 8px;
+  border-left: 3px solid #005ea1;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+#leak-logger #log,
+#leak-logger #log2,
+#leak-logger #leaklog {
+  white-space: pre-wrap;
+}
+
+#leak-logger .input-wrapper {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+#leak-logger .input-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 45%;
+  text-align: center;
+}
+
+#leak-logger #tabDropdown3 {
+  width: 100%;
+  padding: 10px;
+  font-size: 16px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  margin-bottom: 10px;
+}
+
+#leak-logger #openTabButton3 {
+  padding: 10px 20px;
+  padding-bottom: 10px;
+  font-size: 16px;
+  cursor: pointer;
+  background-color: #0075c8;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+#leak-logger #openTabButton3:hover {
+  background-color: #4b5e6b;
+}
diff --git a/css/logwindow-style.css b/css/logwindow-style.css
@@ -49,10 +49,9 @@ body {
   white-space: pre-wrap; /* preserve white spaces and line breaks, but wrap text */
   word-wrap: break-word; /* break long words onto the next line */
 }
-#log {
-  white-space: pre-wrap;
-}
-#log2 {
+#log,
+#log2,
+#leaklog {
   white-space: pre-wrap;
 }
 .input-wrapper {
@@ -70,7 +69,8 @@ body {
   text-align: center;
 }
 #tabDropdown1,
-#tabDropdown2 {
+#tabDropdown2,
+#tabDropdown3 {
   width: 100%;
   padding: 10px;
   font-size: 16px;
@@ -79,7 +79,8 @@ body {
   margin-bottom: 10px;
 }
 #openTabButton1,
-#openTabButton2 {
+#openTabButton2,
+#openTabButton3 {
   padding: 10px 20px;
   padding-bottom: 10px;
   font-size: 16px;
@@ -91,6 +92,7 @@ body {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 #openTabButton1:hover,
-#openTabButton2:hover {
+#openTabButton2:hover,
+#openTabButton3:hover {
   background-color: #4b5e6b;
 }
diff --git a/display.js b/display.js
@@ -23,6 +23,18 @@ $(document).ready(function () {
   });
 });
 
+// launches leakwindow.html
+document
+  .getElementById("openLeakWindow")
+  .addEventListener("click", function () {
+    chrome.windows.create({
+      url: chrome.runtime.getURL("leakwindow.html"),
+      type: "popup",
+      width: 2400,
+      height: 1200,
+    });
+  });
+
 // launches logwindow.html
 document.getElementById("openLogWindow").addEventListener("click", function () {
   chrome.windows.create({

diff --git a/leakwindow.html b/leakwindow.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Leak Logger</title>
+    <link rel="stylesheet" type="text/css" href="css/leaklogger-style.css" />
+  </head>
+  <body id="leak-logger">
+    <div class="wrapper">
+      <div class="container">
+        <h1>Leak Log</h1>
+        <div id="leaklog"></div>
+      </div>
+
+      <div class="input-wrapper">
+        <div class="input-container centered">
+          <select id="tabDropdown3">
+            <option value="">select a tab</option>
+          </select>
+          <button id="openTabButton3">Display Leaks</button>
+        </div>
+      </div>
+    </div>
+
+    <script src="leakwindow.js"></script>
+  </body>
+</html>
diff --git a/leakwindow.js b/leakwindow.js
@@ -0,0 +1,50 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const tabDropdown = document.getElementById("tabDropdown3");
+  const displayLeaksButton = document.getElementById("openTabButton3");
+  const leakLogContainer = document.getElementById("leaklog");
+
+  // populate the dropdown with open tabs
+  function populateTabDropdown() {
+    chrome.tabs.query({}, function (tabs) {
+      tabs.forEach((tab) => {
+        const option = document.createElement("option");
+        option.value = tab.id;
+        option.textContent = `Tab ${tab.id}: ${tab.title}`;
+        tabDropdown.appendChild(option);
+      });
+    });
+  }
+
+  // function to display the processed URLs for the selected tab
+  function displayProcessedUrls(tabId) {
+    const storageKey = `processedUrls_${tabId}`;
+    chrome.storage.local.get([storageKey], function (result) {
+      const processedUrls = result[storageKey] || [];
+      leakLogContainer.innerHTML = "";
+
+      // display URLs in the leaklog container
+      if (processedUrls.length > 0) {
+        processedUrls.forEach((url) => {
+          const listItem = document.createElement("div");
+          listItem.textContent = url;
+          leakLogContainer.appendChild(listItem);
+        });
+      } else {
+        leakLogContainer.textContent = "No processed URLs found for this tab.";
+      }
+    });
+  }
+
+  // event listener for the display leaks button
+  displayLeaksButton.addEventListener("click", function () {
+    const selectedTabId = tabDropdown.value;
+    if (selectedTabId) {
+      displayProcessedUrls(parseInt(selectedTabId));
+    } else {
+      leakLogContainer.textContent = "Please select a tab.";
+    }
+  });
+
+  // populate dropdown on page load
+  populateTabDropdown();
+});
diff --git a/logwindow.js b/logwindow.js
@@ -19,11 +19,11 @@ document.addEventListener("DOMContentLoaded", () => {
         const option2 = document.createElement("option");
 
         option1.value = tab.id;
-        option1.textContent = tab.title || tab.url;
+        option1.textContent = `Tab ${tab.id}: ${tab.title}`;
         tabDropdown1.appendChild(option1);
 
         option2.value = tab.id;
-        option2.textContent = tab.title || tab.url;
+        option2.textContent = `Tab ${tab.id}: ${tab.title}`;
         tabDropdown2.appendChild(option2);
       });
     });