diff --git a/background.js b/background.js index 568f756..a266f8d 100644 --- 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 new file mode 100644 index 0000000..76f4109 --- /dev/null +++ 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 index 9d4f835..aed6f51 100644 --- 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 index 79ad9d6..677f29f 100644 --- 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 new file mode 100644 index 0000000..2466f66 --- /dev/null +++ b/leakwindow.html @@ -0,0 +1,26 @@ + + + + Leak Logger + + + +
+
+

Leak Log

+
+
+ +
+
+ + +
+
+
+ + + + diff --git a/leakwindow.js b/leakwindow.js new file mode 100644 index 0000000..0123a1a --- /dev/null +++ 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 index 3f079dc..c3aecf4 100644 --- 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); }); });