Patch 1.2.2 (#7)

"Save tabs" now doesn't affect pinned tabs (#6)

PRIVACY

@@ -0,0 +1,7 @@
+Tabs Aside Extension Privacy Policy
+1. Developers of the extension don't affiliate with Google LLC. or Microsoft Corporation in any way
+2. This extension doesn't transfer any personal data (data which may be used to track your location or reveal your identity) to any remote or local server
+3. This extension doesn't share any personal data with third parties
+4. This extension stores following personal data:
+  - Browser tabs which have been saved for later by user via this extension (if user click "Set current tabs aside" button). This includes titles, favicons and web links
+5. User can delete all saved personal data by removing this extension from his browser

README.md

@@ -1,14 +1,12 @@
 # Tabs aside for Google Chrome
 
-![Chrome Web Store](https://img.shields.io/chrome-web-store/users/mgmjbodjgijnebfgohlnjkegdpbdjgin?label=Chrome%20Web%20Store%20downloads)
+[![Chrome Web Store](https://img.shields.io/chrome-web-store/users/mgmjbodjgijnebfgohlnjkegdpbdjgin?label=Chrome%20Web%20Store%20downloads)](https://chrome.google.com/webstore/detail/tabs-aside/mgmjbodjgijnebfgohlnjkegdpbdjgin)
-![Chrome Web Store](https://img.shields.io/chrome-web-store/rating/mgmjbodjgijnebfgohlnjkegdpbdjgin)
+[![Chrome Web Store](https://img.shields.io/chrome-web-store/rating/mgmjbodjgijnebfgohlnjkegdpbdjgin)](https://chrome.google.com/webstore/detail/tabs-aside/mgmjbodjgijnebfgohlnjkegdpbdjgin)
-
 [![GitHub release (latest by date)](https://img.shields.io/github/v/release/xfox111/chromiumtabsaside)](https://github.com/xfox111/chromiumtabsaside/releases/latest)
-![GitHub All Releases](https://img.shields.io/github/downloads/xfox111/chromiumtabsaside/total?label=GitHub%20downloads)
 
 [![GitHub issues](https://img.shields.io/github/issues/xfox111/chromiumtabsaside)](https://github.com/xfox111/ChromiumTabsAside/issues)
 [![GitHub last commit](https://img.shields.io/github/last-commit/xfox111/chromiumtabsaside)](https://github.com/xfox111/ChromiumTabsAside/commits/master)
-![GitHub repo size](https://img.shields.io/github/repo-size/xfox111/chromiumtabsaside?label=repo%20size)
+[![GitHub repo size](https://img.shields.io/github/repo-size/xfox111/chromiumtabsaside?label=repo%20size)](https://github.com/xfox111/ChromiumTabsAside)
 [![MIT License](https://img.shields.io/github/license/xfox111/chromiumtabsaside)](https://opensource.org/licenses/MIT)
 
 [![Twitter Follow](https://img.shields.io/twitter/follow/xfox111?style=social)](https://twitter.com/xfox111)
@@ -16,27 +14,24 @@
 
 ![Tabs aside](https://xfox111.net/images/TabsAside.png)
 
-If you’re like me, you often  find yourself with a bunch of open tabs. You’d like to get those tabs out of the way sometimes, but they’re maybe not worth saving as actual bookmarks.
+If you’re like me, you often find yourself with a bunch of open tabs. You’d like to get those tabs out of the way sometimes, but they’re maybe not worth saving as actual bookmarks.
 
-In the Edge browser Microsoft has introduced new feature called "Tabs aside" (or Tab groups) which lets you set tabs aside in a sort of temporary workspace so that you can call them back up later.
+In the Edge browser, Microsoft has introduced a new feature called "Tabs aside" (or Tab groups) which lets you set tabs aside in a sort of temporary workspace so that you can call them back up later.
 
-Unfortunately, in new Chromium-based Microsoft Edge the devs decided not to implement this must-have-feature. So I've decided to create an browser extension which replicates this awesome feature in Chromium-based browsers
+Unfortunately, in new Chromium-based Microsoft Edge, the devs decided not to implement this must-have-feature. So I've decided to create a browser extension which replicates this awesome feature in Chromium-based browsers
 
 ## Features
 - Familiar UI inherited from legacy Microsoft Edge with some improvements
 - Auto Dark mode
 - Now you can restore one tab from collection without removing
 
-## To-do list
+## Download
-- Add ability to backup and restore saved tabs
+- [Google Chrome Webstore](https://chrome.google.com/webstore/detail/tabs-aside/mgmjbodjgijnebfgohlnjkegdpbdjgin)
-- Add ability to share collections
+- [Microsoft Edge Add-ons Webstore](https://microsoftedge.microsoft.com/addons/detail/kmnblllmalkiapkfknnlpobmjjdnlhnd)
-- Add ability to add collections to bookmarks
+- [GitHub Releases](https://github.com/xfox111/chromiumtabsaside/releases/latest)
-- Add ability to sync saved tabs across different devices
+
-- Add saved tabs thumbnails
+## Project roadmap
-- Add ability to reorder tabs inside collections
+You can go to the project's [roadmap kanban board](https://github.com/XFox111/ChromiumTabsAside/projects/1) and see what have we planned and watch our progress in realtime
-- Add ability to restore collections without removing them from the pane
-- Add more languages (probably engage auto translator)
-- Code cleanup
 
 ## Copyrights
 > ©2020 Michael "XFox" Gordeev

TabsAside.html

@@ -33,7 +33,7 @@
 				<nav>
 					<div>
 						<button value="https://github.com/xfox111/ChromiumTabsAside">Visit GitHub page</button>
-						<button value="https://chrome.google.com/webstore/category/extensions">Leave feedback</button>
+						<button value="https://chrome.google.com/webstore/detail/tabs-aside/mgmjbodjgijnebfgohlnjkegdpbdjgin">Leave feedback</button>
 						<button value="https://buymeacoffee.com/xfox111">Buy me a coffee!</button>
 						<button hidden>Backup saved tabs</button>
 					</div>
@@ -50,34 +50,6 @@
 
 		<section>
 			<h2>You have no aside tabs</h1>
-
-				<!--<div>
-					<div>
-						<span>Tabs: $(tabsCount)</span>
-						<small>$(timestamp)</small>
-		
-						<a>Restore tabs</a>
-		
-						<div>
-							<button title="More...">&#xE10C;</button>
-							<nav>
-								<button>Add tabs to favorites</button>
-								<button>Share tabs</button>
-							</nav>
-						</div>
-						<button title="Remove collection">&#xE106;</button>
-					</div>
-		
-					<div>
-						<div title="Tab title caption">
-							<div>
-								<div></div>
-								<span>$(title)</span>
-								<button title="Remove tab from collection">&#xE106;</button>
-							</div>
-						</div>
-					</div>
-				</div>-->
 		</section>
 	</aside>
 

collections.html

@@ -7,9 +7,9 @@
 	
 				<nav>
 					<div>
-						<button onclick="window.open('https://github.com/xfox111/ChromiumTabsAside', '_blank')">Visit GitHub page</button>
+						<button value="https://github.com/xfox111/ChromiumTabsAside">Visit GitHub page</button>
-						<button onclick="window.open('https://chrome.google.com/webstore/category/extensions', '_blank')">Leave feedback</button>
+						<button value="https://chrome.google.com/webstore/detail/tabs-aside/mgmjbodjgijnebfgohlnjkegdpbdjgin">Leave feedback</button>
-						<button onclick="window.open('https://buymeacoffee.com/xfox111', '_blank')">Buy me a coffee!</button>
+						<button value="https://buymeacoffee.com/xfox111">Buy me a coffee!</button>
 						<!--<button hidden>Backup saved tabs</button>-->
 					</div>
 					<p>

css/style.css

@@ -9,6 +9,7 @@
 	left: 0 !important;
 	transition: .2s !important;
 	opacity: 0;
+	color: black !important;
 }
 
 .tabsAside.pane
@@ -122,8 +123,11 @@
 
 	.tabsAside.pane > section > h2
 	{
+		color: inherit !important;
 		margin: 0px 40px !important;
 		font-weight: normal !important;
+		font-size: 1.5em !important;
+		line-height: normal !important;
 	}
 
 	/* Collection header */
@@ -158,15 +162,10 @@
 			line-height: initial !important;
 		}
 
-		.tabsAside.pane > section > div > div:first-child > div
-		{
-			display: none !important;	/* TODO: Implement this menu */
-		}
-
 			.tabsAside.pane > section > div > div:first-child > div > nav
 			{
-				width: 200px !important;
+				width: 250px !important;
-				margin-top: 10px !important;
+				margin-top: 40px !important;
 				right: 50px !important;
 			}
 
@@ -192,6 +191,8 @@
 
 				background-color: #c2c2c2 !important;
 				background-image: url("chrome-extension://__MSG_@@extension_id__/images/tab_thumbnail.png");
+				background-size: cover !important;
+				background-position-x: center !important;
 
 				display: inline-grid !important;
 				grid-template-rows: 1fr auto !important;

css/style.generic.css

@@ -35,6 +35,7 @@
 {
 	font-family: 'Segoe UI', 'Segoe MDL2 Assets' !important;
 	color: #0078d7 !important;
+	font-weight: 400 !important;
 }
 	.tabsAside a:hover 
 	{
@@ -108,6 +109,7 @@
 		cursor: pointer !important;
 		background-color: transparent !important;
 		border: none !important;
+		box-sizing: border-box !important;
 		
 		font-size: medium !important;
 		text-align: start !important;

js/aside-script.js

@@ -123,7 +123,7 @@ function AddCollection(collection)
 	for (var i = 0; i < collection.links.length; i++)
 	{
 		rawTabs +=
-			"<div title='" + collection.titles[i] + "'>" +
+			"<div title='" + collection.titles[i] + "'" + ((collection.thumbnails && collection.thumbnails[i]) ? " style='background-image: url(" + collection.thumbnails[i] + ")'" : "") + ">" +
 			"<span value='" + collection.links[i] + "'></span>" +
 			"<div>" +
 			"<div" + ((collection.icons[i] == 0 || collection.icons[i] == null) ? "" : " style='background-image: url(\"" + collection.icons[i] + "\")'") + "></div>" +
@@ -141,8 +141,9 @@ function AddCollection(collection)
 		"<div>" +
 		"<button title='More...'>&#xE10C;</button>" +
 		"<nav>" +
-		"<button>Add tabs to favorites</button>" +
+		"<button>Restore without removing</button>" +
-		"<button>Share tabs</button>" +
+		"<button hidden>Add tabs to favorites</button>" +
+		"<button hidden>Share tabs</button>" +
 		"</nav>" +
 		"</div>" +
 		"<button title='Remove collection'>&#xE106;</button>" +
@@ -156,6 +157,11 @@ function AddCollection(collection)
 		i.onclick = function () { RestoreTabs(i.parentElement.parentElement) };
 	});
 
+	list.querySelectorAll("nav button:first-child").forEach(i => 
+	{
+		i.onclick = function () { RestoreTabs(i.parentElement.parentElement.parentElement.parentElement, false) };
+	});
+
 	list.querySelectorAll("div > div:last-child > div > span").forEach(i => 
 	{
 		i.onclick = function () {
@@ -173,14 +179,14 @@ function AddCollection(collection)
 		i.onclick = function () { RemoveTabs(i.parentElement.parentElement) };
 	});
 
-	document.querySelectorAll(".tabsAside.pane > section > div > div:first-child > div > nav > button:first-child").forEach(i => 
+	/*document.querySelectorAll(".tabsAside.pane > section > div > div:first-child > div > nav > button:first-child").forEach(i => 
 	{
 		i.onclick = function () { AddToFavorites(i.parentElement.parentElement.parentElement.parentElement) };
 	});
 	document.querySelectorAll(".tabsAside.pane > section > div > div:first-child > div > nav > button:last-child").forEach(i => 
 	{
 		i.onclick = function () { ShareTabs(i.parentElement.parentElement.parentElement.parentElement) };
-	});
+	});*/
 
 	document.querySelectorAll(".tabsAside.pane > section > div > div:last-child > div > div > button").forEach(i => 
 	{
@@ -193,15 +199,19 @@ function SetTabsAside()
 	chrome.runtime.sendMessage({ command: "saveTabs" });
 }
 
-function RestoreTabs(collectionData)
+function RestoreTabs(collectionData, removeCollection = true)
 {
 	chrome.runtime.sendMessage(
 		{
 			command: "restoreTabs",
+			removeCollection: removeCollection,
 			collectionIndex: Array.prototype.slice.call(collectionData.parentElement.children).indexOf(collectionData) - 1
 		},
 		function ()
 		{
+			if (!removeCollection)
+				return;
+
 			if (collectionData.parentElement.children.length < 3)
 			{
 				RemoveElement(collectionData);

js/background.js

@@ -1,6 +1,8 @@
 chrome.browserAction.onClicked.addListener(function (tab)
 {
-	if (tab.url.startsWith("http"))
+	if (tab.url.startsWith("http")
+	&& !tab.url.includes("chrome.google.com")
+	&& !tab.url.includes("microsoftedge.microsoft.com"))
 	{
 		chrome.tabs.insertCSS(
 			{
@@ -127,7 +129,7 @@ chrome.runtime.onMessage.addListener(function (message, sender, sendResponse)
 			SaveCollection();
 			break;
 		case "restoreTabs":
-			RestoreCollection(message.collectionIndex);
+			RestoreCollection(message.collectionIndex, message.removeCollection);
 			sendResponse();
 			break;
 		case "deleteTabs":
@@ -169,7 +171,7 @@ function SaveCollection()
 {
 	chrome.tabs.query({ currentWindow: true }, function (tabs)
 	{
-		tabs = tabs.filter(i => !i.url.startsWith("chrome-extension") && !i.url.endsWith("TabsAside.html"));
+		tabs = tabs.filter(i => !i.url.startsWith("chrome-extension") && !i.url.endsWith("TabsAside.html") && !i.pinned);
 		
 		var collection =
 		{
@@ -177,8 +179,8 @@ function SaveCollection()
 			tabsCount: tabs.length,
 			titles: tabs.map(tab => tab.title ?? ""),
 			links: tabs.map(tab => tab.url ?? ""),
-			icons: tabs.map(tab => tab.favIconUrl ?? "")//,
+			icons: tabs.map(tab => tab.favIconUrl ?? ""),
-			//tumbnails: tabs.map(tab => chrome.tabs.captureVisibleTab)
+			thumbnails: tabs.map(tab => thumbnails.find(i => i.tabId == tab.id)?.url ?? "")
 		};
 
 		var rawData;
@@ -209,7 +211,7 @@ function DeleteCollection(collectionIndex)
 	UpdateTheme();
 }
 
-function RestoreCollection(collectionIndex)
+function RestoreCollection(collectionIndex, removeCollection)
 {
 	collections[collectionIndex].links.forEach(i => 
 	{
@@ -220,6 +222,9 @@ function RestoreCollection(collectionIndex)
 			});
 	});
 
+	if (!removeCollection)
+		return;
+
 	collections = collections.filter(i => i != collections[collectionIndex]);
 	localStorage.setItem("sets", JSON.stringify(collections));
 
@@ -278,3 +283,40 @@ function RemoveTab(collectionIndex, tabIndex)
 
 	UpdateTheme();
 }
+
+var thumbnails = [];
+
+function AppendThumbnail(tabId, cahngeInfo, tab)
+{
+	if (!tab.active || !tab.url.startsWith("http"))
+		return;
+
+	chrome.tabs.captureVisibleTab(
+		{
+			format: "jpeg",
+			quality: 1
+		},
+		function (dataUrl)
+		{
+			if(!dataUrl)
+			{
+				console.log("Failed to retrieve thumbnail");
+				return;
+			}
+
+			console.log("Thumbnail retrieved");
+			var item = thumbnails.find(i => i.tabId == tabId);
+			if (item)
+				item.url = dataUrl;
+			else
+				thumbnails.unshift(
+					{
+						tabId: tabId,
+						url: dataUrl
+					}
+				);
+		}
+	);
+}
+
+chrome.tabs.onUpdated.addListener(AppendThumbnail);

manifest.json

@@ -1,6 +1,6 @@
 {
 	"name": "Tabs Aside",
-	"version": "1.0",
+	"version": "1.2.2",
 	"manifest_version": 2,
 	"description": "Classic Microsoft Edge \"Tabs Aside\" feature for Chromium browsers",
 	"author": "Michael \"XFox\" Gordeev",
@@ -8,7 +8,7 @@
 	[
 		"tabs",
 		"unlimitedStorage",
-		"activeTab"
+		"<all_urls>"
 	],
 	
 	"icons":