Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added Productive Tab Manager #276

Merged
merged 1 commit into from
May 18, 2024
Merged

Added Productive Tab Manager #276

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added Productive Tab Manager/icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 20 additions & 0 deletions Productive Tab Manager/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
}
109 changes: 109 additions & 0 deletions Productive Tab Manager/popup.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
31 changes: 31 additions & 0 deletions Productive Tab Manager/popup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
124 changes: 124 additions & 0 deletions Productive Tab Manager/popup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
});
Loading