diff --git a/Productive Tab Manager/icon.png b/Productive Tab Manager/icon.png new file mode 100644 index 00000000..885d9677 Binary files /dev/null and b/Productive Tab Manager/icon.png differ diff --git a/Productive Tab Manager/manifest.json b/Productive Tab Manager/manifest.json new file mode 100644 index 00000000..c1094831 --- /dev/null +++ b/Productive Tab Manager/manifest.json @@ -0,0 +1,20 @@ +{ + "manifest_version": 3, + "name": "Tab Manager", + "version": "1.0", + "description": "Organize your open tabs and track and remove them for productivity and session saving.", + "permissions": ["tabs", "storage"], + "action": { + "default_popup": "popup.html", + "default_icon": { + "16": "icon.png", + "48": "icon.png", + "128": "icon.png" + } + }, + "icons": { + "16": "icon.png", + "48": "icon.png", + "128": "icon.png" + } +} diff --git a/Productive Tab Manager/popup.css b/Productive Tab Manager/popup.css new file mode 100644 index 00000000..79de5567 --- /dev/null +++ b/Productive Tab Manager/popup.css @@ -0,0 +1,109 @@ +body { + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + padding: 15px; + background-color: #e6e6e6; + color: #333; + width: 350px; + border-radius: 10px; + + font-family: "Fugaz One", sans-serif; + font-weight: 400; + font-style: normal; +} + +.container { + max-width: 100%; + margin: 0 auto; + border-radius: 5px; + background-color: #fff; + padding: 20px; +} + +h1 { + text-align: center; + font-size: 1.5em; + color: #4d4d4d; +} + +h2 { + text-align: left; + font-size: 1.2em; + margin-top: 20px; + color: #4d4d4d; +} + +.button-group { + display: flex; + justify-content: space-between; + margin-bottom: 15px; +} + +button { + flex: 1; + padding: 10px 15px; + margin: 0 5px; + background-color: #6c757d; + color: #fff; + border: none; + border-radius: 3px; + cursor: pointer; + font-size: 0.9em; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: #5a6268; +} + +input[type="text"] { + width: calc(100% - 20px); + padding: 10px; + margin: 10px 0; + border: 1px solid #ccc; + border-radius: 3px; + font-size: 1em; + background-color: #f8f9fa; +} + +#sessionSavedMsg { + display: none; + text-align: center; + background-color: #d4edda; + color: #155724; + padding: 10px; + border: 1px solid #c3e6cb; + border-radius: 3px; + margin-bottom: 10px; + font-size: 0.9em; +} + +ul { + list-style-type: none; + padding: 0; + margin: 0; +} + +li { + padding: 10px; + border: 1px solid #ccc; + border-radius: 3px; + margin-bottom: 5px; + background-color: #fff; + display: flex; + align-items: center; +} + +li a { + flex: 1; + text-decoration: none; + color: #007bff; + transition: color 0.3s ease; +} + +li a:hover { + color: #0056b3; +} + +li input[type="checkbox"] { + margin-right: 10px; +} diff --git a/Productive Tab Manager/popup.html b/Productive Tab Manager/popup.html new file mode 100644 index 00000000..7414d87d --- /dev/null +++ b/Productive Tab Manager/popup.html @@ -0,0 +1,31 @@ + + + + + + + Tab Manager + + + + + + +
+

Tab Manager

+ + + + + +
Session saved!
+ + + +
+ + + diff --git a/Productive Tab Manager/popup.js b/Productive Tab Manager/popup.js new file mode 100644 index 00000000..0856a921 --- /dev/null +++ b/Productive Tab Manager/popup.js @@ -0,0 +1,124 @@ +document.addEventListener("DOMContentLoaded", function () { + const searchInput = document.getElementById("searchInput"); + const tabList = document.getElementById("tabList"); + const saveSessionBtn = document.getElementById("saveSessionBtn"); + const clearSelectedBtn = document.getElementById("clearSelectedBtn"); + const clearAllBtn = document.getElementById("clearAllBtn"); + const sessionSavedMsg = document.getElementById("sessionSavedMsg"); + const sessionList = document.getElementById("sessionList"); + + let sessionHistory = []; + + chrome.tabs.query({}, function (tabs) { + tabs.forEach(function (tab) { + displayTab(tab); + }); + }); + + //To display the history + chrome.storage.local.get("sessionHistory", function (data) { + sessionHistory = data.sessionHistory || []; + sessionHistory.forEach(function (session, index) { + const li = document.createElement("li"); + const sessionLink = document.createElement("a"); + sessionLink.textContent = `Session ${index + 1}`; + sessionLink.href = "#"; + sessionLink.addEventListener("click", function () { + restoreSession(session); + }); + li.appendChild(sessionLink); + sessionList.appendChild(li); + }); + }); + + //For Searching tabs + searchInput.addEventListener("input", function () { + const query = searchInput.value.toLowerCase(); + const tabs = Array.from(tabList.children); + tabs.forEach(function (tab) { + const title = tab.textContent.toLowerCase(); + if (title.includes(query)) { + tab.style.display = "block"; + } else { + tab.style.display = "none"; + } + }); + }); + + //Saving session + saveSessionBtn.addEventListener("click", function () { + const selectedTabs = getSelectedTabs(); + if (selectedTabs.length > 0) { + sessionHistory.unshift(selectedTabs); + sessionHistory = sessionHistory.slice(0, 2); + chrome.storage.local.set({ sessionHistory: sessionHistory }, function () { + console.log("Session saved."); + sessionSavedMsg.style.display = "block"; + setTimeout(function () { + sessionSavedMsg.style.display = "none"; + }, 3000); + }); + } + }); + + clearSelectedBtn.addEventListener("click", function () { + const tabs = Array.from(tabList.children); + tabs.forEach(function (tab) { + const checkbox = tab.querySelector("input[type='checkbox']"); + if (checkbox.checked) { + tabList.removeChild(tab); + } + }); + }); + + // Clearing all tabs + clearAllBtn.addEventListener("click", function () { + tabList.innerHTML = ""; + }); + + // Get selected tabs + function getSelectedTabs() { + const tabs = []; + const tabElements = Array.from(tabList.children); + tabElements.forEach(function (tabElement) { + const checkbox = tabElement.querySelector("input[type='checkbox']"); + if (checkbox.checked) { + const link = tabElement.querySelector("a"); + tabs.push({ url: link.href, title: link.textContent }); + } + }); + return tabs; + } + + function displayTab(tab) { + const li = document.createElement("li"); + const checkbox = document.createElement("input"); + checkbox.type = "checkbox"; + li.appendChild(checkbox); + const link = document.createElement("a"); + link.textContent = tab.title; + link.href = tab.url; + link.target = "_blank"; + li.appendChild(link); + tabList.appendChild(li); + } + + // Restoring prev + function restoreSession(session) { + tabList.innerHTML = ""; + session.forEach(function (tab) { + const li = document.createElement("li"); + const checkbox = document.createElement("input"); + checkbox.type = "checkbox"; + li.appendChild(checkbox); + const link = document.createElement("a"); + link.textContent = tab.title; + link.href = tab.url; + link.target = "_blank"; + li.appendChild(link); + tabList.appendChild(li); + }); + } + + sessionSavedMsg.style.display = "none"; +});