Merge pull request #276 from triggereddown/tab_manager

Added Productive Tab Manager
Sulagna-Dutta-Roy · May 18, 2024 · 7efb4e2 · 7efb4e2
2 parents f710ea9 + 965ae6f
commit 7efb4e2
Show file tree

Hide file tree

Showing 5 changed files with 284 additions and 0 deletions.
diff --git a/Productive Tab Manager/icon.png b/Productive Tab Manager/icon.png
diff --git a/Productive Tab Manager/manifest.json 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
@@ -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
@@ -0,0 +1,31 @@
+<!-- Author-Deep Moitra -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tab Manager</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Fugaz+One&family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&family=Major+Mono+Display&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="popup.css" />
+  </head>
+  <body>
+    <div class="container">
+      <h1>Tab Manager</h1>
+      <button id="saveSessionBtn">Save Session</button>
+      <button id="clearSelectedBtn">Clear Selected</button>
+      <button id="clearAllBtn">Clear All</button>
+
+      <input type="text" id="searchInput" placeholder="Search tabs..." />
+      <div id="sessionSavedMsg">Session saved!</div>
+      <ul id="tabList"></ul>
+
+      <ul id="sessionList"></ul>
+    </div>
+    <script src="popup.js"></script>
+  </body>
+</html>
diff --git a/Productive Tab Manager/popup.js 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";
+});