Minor 1.5 (#18)

- Updated repository documentation: added contribution guidelines, Code of Conduct, GitHub templates
- Updated README
- Added confirmation dialog for tabs and collections deletion (#17)
- Complete code refactoring (HTML/JS/CSS)
- Implemented <iframe> base for embedded pane (#13) (Fixed CSS instability on some websites)
- Improved dark theme
- Added opensource fonts to replace Segoe UI on Unix systems (#11, #17)
- Fixed invisible vertical scrollbar
- Code polish and improvement

Co-authored-by: Amine A. <15179425+AmineI@users.noreply.github.com>
Co-Authored-By: Michael Gordeev <michael@xfox111.net>

js/aside-script.js

@@ -1,116 +1,66 @@
-if (document.location.protocol == "chrome-extension:")
-	InitializeStandalone();
-else
+if (window.location === window.parent.location && window.location.protocol != "chrome-extension:")	// For open/close call
 {
-	setTimeout(function ()
+	var iframe = document.querySelector("iframe.tabsAsideIframe");
+	if (!iframe)
 	{
-		var pane = document.querySelector(".tabsAside.pane");
+		iframe = document.createElement('iframe');
 
-		if (pane == null)
+		iframe.setAttribute("class", "tabsAsideIframe");
+
+		iframe.style.position = "fixed";
+		iframe.style.zIndex = "2147483647";
+
+		iframe.style.height = "100%";
+		iframe.style.width = "100%";
+
+		iframe.style.top = "0px";
+		iframe.style.right = "0px";
+		iframe.style.left = "0px";
+		iframe.style.bottom = "0px";
+
+		iframe.style.border = "none";
+		iframe.style.background = "transparent";
+		iframe.style.opacity = 0;
+
+		var bodyStyle = document.body.getAttribute("style");
+		document.body.setAttribute("style", "overflow: hidden !important");
+
+		iframe.onload = () => setTimeout(() => iframe.style.opacity = 1, 100);
+
+		iframe.src = chrome.extension.getURL("TabsAside.html");
+		document.body.appendChild(iframe);
+	}
+	else
+	{
+		iframe.contentWindow.postMessage({ target: "TabsAside", command: "TogglePane" }, "*");
+		setTimeout(() =>
 		{
-			var xhr = new XMLHttpRequest();
-			xhr.open('GET', chrome.extension.getURL("collections.html"), true);
-			xhr.onreadystatechange = function ()
-			{
-				if (this.status !== 200 || document.querySelector("#aside-pane") != null)
-					return;
-
-				if (document.querySelector(".tabsAside.pane") == null)
-				{
-					document.body.innerHTML += this.responseText;
-					chrome.runtime.sendMessage({ command: "loadData" }, function (collections)
-					{
-						if (document.querySelector(".tabsAside.pane section div") == null)
-							collections.forEach(i => 
-							{
-								AddCollection(i);
-							});
-					});
-				}
-
-				setTimeout(function ()
-				{
-					pane = document.querySelector(".tabsAside.pane");
-
-					if (window.matchMedia("(prefers-color-scheme: dark)").matches)
-						pane.parentElement.setAttribute("darkmode", "");
-
-					document.querySelector(".tabsAside .saveTabs").onclick = SetTabsAside;
-
-					document.querySelector("nav > p > small").textContent = chrome.runtime.getManifest()["version"];
-
-					var loadOnRestoreCheckbox = document.querySelector("nav > p > input[type=checkbox]");
-					chrome.storage.sync.get({ "loadOnRestore": false },
-						values => loadOnRestoreCheckbox.checked = values.loadOnRestore
-					);
-					chrome.storage.onChanged.addListener(function (changes, namespace) {
-						if (namespace == 'sync'){
-							for (key in changes) {
-								if (key === 'loadOnRestore') {
-									loadOnRestoreCheckbox.checked = changes[key].newValue
-								}
-							}
-						}
-					});
-					loadOnRestoreCheckbox.addEventListener("click", function ()
-					{
-						chrome.storage.sync.set(
-							{
-								"loadOnRestore": loadOnRestoreCheckbox.checked
-							});
-					});
-
-					document.querySelectorAll(".tabsAside.pane > header nav button").forEach(i => 
-					{
-						i.onclick = function () { window.open(i.value, '_blank'); };
-					});
-
-					document.querySelector(".tabsAside.background").addEventListener("click", function (event)
-					{
-						if (event.target == pane.parentElement)
-						{
-							pane.removeAttribute("opened");
-							pane.parentElement.style.opacity = 0;
-							document.body.style.overflow = "";
-							setTimeout(function ()
-							{
-								pane.parentElement.remove();
-							}, 300);
-						}
-					});
-
-					pane.setAttribute("opened", "");
-					pane.parentElement.style.opacity = 1;
-					document.body.style.overflow = "hidden";
-				}, 50);
-			};
-			xhr.send();
-		}
-		else
-		{
-			if (pane.hasAttribute("opened"))
-			{
-				pane.removeAttribute("opened");
-				pane.parentElement.style.opacity = 0;
-				document.body.style.overflow = "";
-				setTimeout(function ()
-				{
-					if (!pane.hasAttribute("opened"))
-						pane.parentElement.remove();
-				}, 300);
-			}
-			else
-			{
-				pane.setAttribute("opened", "");
-				pane.parentElement.style.opacity = 1;
-			}
-		}
-	}, 50);
+			iframe.remove();
+			document.body.setAttribute("style", bodyStyle);
+		}, 250);
+	}
 }
+else // For init call
+	Initialize();
 
-function InitializeStandalone()
+function Initialize()
 {
-	pane = document.querySelector(".tabsAside.pane");
+	var pane = document.querySelector(".tabsAside.pane");
+	if (!pane)
+		return;
+
+	if (window.location !== window.parent.location)
+	{
+		pane.setAttribute("embedded", "");
+		window.addEventListener('message', event => 
+		{
+			if (event.data.target == "TabsAside")
+			{
+				pane.parentElement.style.opacity = 0;
+				pane.removeAttribute("opened");
+			}
+		}); 
+	}
 
 	if (window.matchMedia("(prefers-color-scheme: dark)").matches)
 	{
@@ -123,39 +73,35 @@ function InitializeStandalone()
 	document.querySelector("nav > p > small").textContent = chrome.runtime.getManifest()["version"];
 
 	var loadOnRestoreCheckbox = document.querySelector("nav > p > input[type=checkbox]");
-	chrome.storage.sync.get({ "loadOnRestore": false },
+	chrome.storage.sync.get(
+		{ "loadOnRestore": false },
 		values => loadOnRestoreCheckbox.checked = values.loadOnRestore
 	);
-	chrome.storage.onChanged.addListener(function (changes, namespace) {
-		if (namespace == 'sync'){
-			for (key in changes) {
-				if (key === 'loadOnRestore') {
-					loadOnRestoreCheckbox.checked = changes[key].newValue
-				}
-			}
-		}
-	});
-	loadOnRestoreCheckbox.addEventListener("click", function ()
+	chrome.storage.onChanged.addListener((changes, namespace) =>
 	{
+		if (namespace == 'sync')
+			for (key in changes)
+				if (key === 'loadOnRestore')
+					loadOnRestoreCheckbox.checked = changes[key].newValue
+	});
+	loadOnRestoreCheckbox.addEventListener("click", () =>
 		chrome.storage.sync.set(
 			{
 				"loadOnRestore": loadOnRestoreCheckbox.checked
-			});
-	});
+			})
+	);
 
 	document.querySelectorAll(".tabsAside.pane > header nav button").forEach(i => 
-	{
-		i.onclick = function () { window.open(i.value, '_blank'); };
-	});
+		i.onclick = () => window.open(i.value, '_blank'));
 
-	chrome.runtime.sendMessage({ command: "loadData" }, function (collections)
+	chrome.runtime.sendMessage({ command: "loadData" }, (collections) =>
 	{
 		if (document.querySelector(".tabsAside.pane section div") == null)
 			collections.forEach(i => 
-			{
-				AddCollection(i);
-			});
+				AddCollection(i));
 	});
+
+	setTimeout(() => pane.setAttribute("opened", ""), 100);
 }
 
 function AddCollection(collection)
@@ -169,75 +115,53 @@ function AddCollection(collection)
 	{
 		rawTabs +=
 			"<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>" +
-			"<span>" + collection.titles[i] + "</span>" +
-			"<button title='Remove tab from collection'>&#xE106;</button>" +
-			"</div>" +
+				"<span class='openTab' value='" + collection.links[i] + "'></span>" +
+				"<div>" +
+					"<div" + ((collection.icons[i] == 0 || collection.icons[i] == null) ? "" : " style='background-image: url(\"" + collection.icons[i] + "\")'") + "></div>" +
+					"<span>" + collection.titles[i] + "</span>" +
+					"<button class='btn remove' title='Remove tab from collection'></button>" +
+				"</div>" +
 			"</div>";
 	}
 
-	list.innerHTML += "<div>" +
-		"<div>" +
-		"<span>Tabs: " + collection.links.length + "</span>" +
-		"<small>" + GetAgo(collection.timestamp) + "</small>" +
-		"<a>Restore tabs</a>" +
-		"<div>" +
-		"<button title='More...'>&#xE10C;</button>" +
-		"<nav>" +
-		"<button>Restore without removing</button>" +
-		// "<button hidden>Add tabs to favorites</button>" +
-		// "<button hidden>Share tabs</button>" +
-		"</nav>" +
-		"</div>" +
-		"<button title='Remove collection'>&#xE106;</button>" +
-		"</div>" +
+	list.innerHTML +=
+		"<div class='collectionSet'>" +
+			"<div class='header'>" +
+				"<span>Tabs: " + collection.links.length + "</span>" +
+				"<small>" + GetAgo(collection.timestamp) + "</small>" +
+				"<a class='restoreCollection'>Restore tabs</a>" +
+				"<div>" +
+					"<button class='btn more' title='More...'></button>" +
+					"<nav>" +
+						"<button class='restoreCollection noDelete'>Restore without removing</button>" +
+					"</nav>" +
+				"</div>" +
+				"<button class='btn remove' title='Remove collection'></button>" +
+			"</div>" +
 
-		"<div>" + rawTabs + "</div>" +
+			"<div class='set' class='tabsList'>" + rawTabs + "</div>" +
 		"</div>"
 
-	list.querySelectorAll("a").forEach(i => 
-	{
-		i.onclick = function () { RestoreTabs(i.parentElement.parentElement) };
-	});
+	list.querySelectorAll(".restoreCollection").forEach(i => 
+		i.onclick = () => RestoreTabs(i.parentElement.parentElement));
 
-	list.querySelectorAll("nav button:first-child").forEach(i => 
-	{
-		i.onclick = function () { RestoreTabs(i.parentElement.parentElement.parentElement.parentElement, false) };
-	});
+	list.querySelectorAll(".restoreCollection.noDelete").forEach(i => 
+		i.onclick = () => RestoreTabs(i.parentElement.parentElement.parentElement.parentElement, false));
 
-	list.querySelectorAll("div > div:last-child > div > span").forEach(i => 
-	{
-		i.onclick = function ()
-		{
+	list.querySelectorAll(".openTab").forEach(i =>
+		i.onclick = () =>
 			chrome.runtime.sendMessage(
 				{
 					command: "openTab",
 					url: i.getAttribute("value")
 				}
-			);
-		};
-	})
+			));
 
-	document.querySelectorAll(".tabsAside.pane > section > div > div:first-child > button").forEach(i => 
-	{
-		i.onclick = function () { RemoveTabs(i.parentElement.parentElement) };
-	});
+	document.querySelectorAll(".btn.remove").forEach(i =>
+		i.onclick = () => RemoveTabs(i.parentElement.parentElement));
 
-	/*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 => 
-	{
-		i.onclick = function () { RemoveOneTab(i.parentElement.parentElement) };
-	});
+	document.querySelectorAll(".tabsList .btn.remove").forEach(i =>
+		i.onclick = () => RemoveOneTab(i.parentElement.parentElement));
 }
 
 function SetTabsAside()
@@ -253,85 +177,47 @@ function RestoreTabs(collectionData, removeCollection = true)
 			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);
-				setTimeout(function ()
-				{
-					document.querySelector(".tabsAside.pane > section > h2").removeAttribute("hidden");
-				}, 250);
-			}
-			else
-				RemoveElement(collectionData);
+			if (removeCollection)
+				RemoveCollectionElement(collectionData);
 		}
 	);
 }
 
 function RemoveTabs(collectionData)
 {
+	if (!confirm("Are you sure you want to delete this collection?"))
+		return;
+
 	chrome.runtime.sendMessage(
 		{
 			command: "deleteTabs",
 			collectionIndex: Array.prototype.slice.call(collectionData.parentElement.children).indexOf(collectionData) - 1
 		},
-		function ()
-		{
-			if (collectionData.parentElement.children.length < 3)
-			{
-				RemoveElement(collectionData);
-				setTimeout(function ()
-				{
-					document.querySelector(".tabsAside.pane > section > h2").removeAttribute("hidden");
-				}, 250);
-			}
-			else
-				RemoveElement(collectionData);
-		}
+		() => RemoveCollectionElement(collectionData)
 	);
 }
 
-function AddToFavorites(collectionData)
-{
-	chrome.runtime.sendMessage(
-		{
-			command: "toFavorites",
-			collectionIndex: Array.prototype.slice.call(collectionData.parentElement.children).indexOf(collectionData) - 1
-		});
-}
-
-function ShareTabs(collectionData)
-{
-	chrome.runtime.sendMessage(
-		{
-			command: "share",
-			collectionIndex: Array.prototype.slice.call(collectionData.parentElement.children).indexOf(collectionData) - 1
-		});
-}
-
 function RemoveOneTab(tabData)
 {
+	if (!confirm("Are you sure you want to delete this tab?"))
+		return;
+
 	chrome.runtime.sendMessage(
 		{
 			command: "removeTab",
 			collectionIndex: Array.prototype.slice.call(tabData.parentElement.parentElement.parentElement.children).indexOf(tabData.parentElement.parentElement) - 1,
 			tabIndex: Array.prototype.slice.call(tabData.parentElement.children).indexOf(tabData)
 		},
-		function ()
+		() =>
 		{
-			tabData.parentElement.previousElementSibling.children[0].textContent = "Tabs: " + tabData.parentElement.children.length - 1;
+			tabData.parentElement.previousElementSibling.children[0].textContent = "Tabs: " + (tabData.parentElement.children.length - 1);
 			if (tabData.parentElement.children.length < 2)
 			{
 				RemoveElement(tabData.parentElement.parentElement);
 				if (document.querySelector("tabsAside.pane > section").children.length < 2)
-					setTimeout(function ()
-					{
-						document.querySelector(".tabsAside.pane > section > h2").removeAttribute("hidden");
-					}, 250);
+					setTimeout(() => document.querySelector(".tabsAside.pane > section > h2").removeAttribute("hidden"), 250);
 			}
 			else
 				RemoveElement(tabData);
@@ -379,11 +265,12 @@ function GetAgo(timestamp)
 function RemoveElement(el)
 {
 	el.style.opacity = 0;
-	setTimeout(function ()
-	{
-		el.remove();
-	}, 200);
+	setTimeout(() => el.remove(), 200);
 }
 
-// TODO: Add more actions
-// TODO: Make backup system
+function RemoveCollectionElement(el)
+{
+	RemoveElement(el);
+	if (el.parentElement.children.length < 2)
+		setTimeout(() => document.querySelector(".tabsAside.pane > section > h2").removeAttribute("hidden"), 250);	
+}

js/background.js

@@ -1,28 +1,9 @@
-chrome.browserAction.onClicked.addListener(function (tab)
+chrome.browserAction.onClicked.addListener((tab) =>
 {
 	if (tab.url.startsWith("http")
 		&& !tab.url.includes("chrome.google.com")
 		&& !tab.url.includes("microsoftedge.microsoft.com"))
 	{
-		chrome.tabs.insertCSS(
-			{
-				file: "css/style.css",
-				allFrames: true,
-				runAt: "document_idle"
-			});
-		chrome.tabs.insertCSS(
-			{
-				file: "css/style.generic.css",
-				allFrames: true,
-				runAt: "document_idle"
-			});
-		chrome.tabs.insertCSS(
-			{
-				file: "css/style.dark.css",
-				allFrames: true,
-				runAt: "document_idle"
-			});
-
 		chrome.tabs.executeScript(tab.id,
 			{
 				file: "js/aside-script.js",
@@ -30,89 +11,38 @@ chrome.browserAction.onClicked.addListener(function (tab)
 				runAt: "document_idle"
 			});
 	}
-	else if (tab.url.startsWith("chrome-extension") && tab.url.endsWith("TabsAside.html"))
+	else if (tab.url == chrome.runtime.getURL("TabsAside.html"))
 		chrome.tabs.remove(tab.id);
 	else
 	{
-		chrome.tabs.create({
-			url: chrome.extension.getURL("TabsAside.html"),
-			active: true
-		},
-			chrome.tabs.onActivated.addListener(function TabsAsideCloser(activeInfo) {
-				chrome.tabs.query({ url: chrome.extension.getURL("TabsAside.html") }, function (result) {
-					if (result.length)
-						setTimeout(function () {
-							result.forEach(i => {
-								if (activeInfo.tabId != i.id)
-									chrome.tabs.remove(i.id);
-							});
-						}, 200);
-					else chrome.tabs.onActivated.removeListener(TabsAsideCloser);
-				});
-			}));
+		chrome.tabs.create(
+			{
+				url: chrome.extension.getURL("TabsAside.html"),
+				active: true
+			},
+			(activeTab) =>
+				chrome.tabs.onActivated.addListener(function TabsAsideCloser(activeInfo) 
+				{
+					chrome.tabs.query({ url: chrome.extension.getURL("TabsAside.html") }, (result) =>
+					{
+						if (result.length)
+							setTimeout(() =>
+							{
+								result.forEach(i => 
+									{
+									if (activeInfo.tabId != i.id)
+										chrome.tabs.remove(i.id);
+									});
+							}, 200);
+						else chrome.tabs.onActivated.removeListener(TabsAsideCloser);
+					});
+				}));
 	}
 });
 
+var collections = JSON.parse(localStorage.getItem("sets")) || [];
 
-function UpdateTheme()
-{
-	if (window.matchMedia("(prefers-color-scheme: dark)").matches)
-	{
-		if (collections.length)
-			chrome.browserAction.setIcon(
-				{
-					path:
-					{
-						"128": "icons/dark/full/128.png",
-						"48": "icons/dark/full/48.png",
-						"32": "icons/dark/full/32.png",
-						"16": "icons/dark/full/16.png"
-					}
-				});
-		else
-			chrome.browserAction.setIcon(
-				{
-					path:
-					{
-						"128": "icons/dark/empty/128.png",
-						"48": "icons/dark/empty/48.png",
-						"32": "icons/dark/empty/32.png",
-						"16": "icons/dark/empty/16.png"
-					}
-				});
-	}
-	else
-	{
-		if (collections.length)
-			chrome.browserAction.setIcon(
-				{
-					path:
-					{
-						"128": "icons/light/full/128.png",
-						"48": "icons/light/full/48.png",
-						"32": "icons/light/full/32.png",
-						"16": "icons/light/full/16.png"
-					}
-				});
-		else
-			chrome.browserAction.setIcon(
-				{
-					path:
-					{
-						"128": "icons/light/empty/128.png",
-						"48": "icons/light/empty/48.png",
-						"32": "icons/light/empty/32.png",
-						"16": "icons/light/empty/16.png"
-					}
-				});
-	}
-}
-
-var collections = JSON.parse(localStorage.getItem("sets"));
-if (collections == null)
-	collections = [];
-
-chrome.runtime.onMessage.addListener(function (message, sender, sendResponse)
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) =>
 {
 	switch (message.command)
 	{
@@ -137,33 +67,47 @@ chrome.runtime.onMessage.addListener(function (message, sender, sendResponse)
 			RemoveTab(message.collectionIndex, message.tabIndex);
 			sendResponse();
 			break;
-		case "toFavorites":
-			AddTabsToFavorites(message.collectionIndex);
-			break;
-		case "share":
-			ShareTabs(message.collectionIndex);
-			break;
 	}
 });
 
+// This function updates the extension's toolbar icon
+function UpdateTheme()
+{
+	var theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+	var iconStatus = collections.length ? "full" : "empty";
+
+	var basePath = "icons/" + theme + "/" + iconStatus + "/";
+
+	chrome.browserAction.setIcon(
+		{
+			path:
+			{
+				"128": basePath + "128.png",
+				"48": basePath + "48.png",
+				"32": basePath + "32.png",
+				"16": basePath + "16.png"
+			}
+		});
+}
+
 UpdateTheme();
 chrome.windows.onFocusChanged.addListener(UpdateTheme);
-
 chrome.tabs.onUpdated.addListener(UpdateTheme);
 chrome.tabs.onActivated.addListener(UpdateTheme);
 
+// Set current tabs aside
 function SaveCollection()
 {
-	chrome.tabs.query({ currentWindow: true }, function (rawTabs)
+	chrome.tabs.query({ currentWindow: true }, (rawTabs) =>
 	{
-		var tabs = rawTabs.filter(i => !(i.url.startsWith("chrome-extension") && i.url.endsWith("TabsAside.html")) && !i.pinned && !i.url.includes("//newtab"));
+		var tabs = rawTabs.filter(i => i.url != chrome.runtime.getURL("TabsAside.html") && !i.pinned && !i.url.includes("//newtab"));
 
 		if (tabs.length < 1)
 		{
 			alert("No tabs available to save");
 			return;
 		}
-		
+
 		var collection =
 		{
 			timestamp: Date.now(),
@@ -188,9 +132,11 @@ function SaveCollection()
 		collections = JSON.parse(localStorage.getItem("sets"));
 
 		var newTabId;
-		chrome.tabs.create({}, function(tab) { newTabId = tab.id; });
-		
-		chrome.tabs.remove(rawTabs.filter(i => !i.url.startsWith("chrome-extension") && !i.url.endsWith("TabsAside.html") && !i.pinned && i.id != newTabId).map(tab => tab.id));
+		chrome.tabs.create({}, (tab) => 
+		{
+			newTabId = tab.id;
+			chrome.tabs.remove(rawTabs.filter(i => !i.pinned && i.id != newTabId).map(tab => tab.id));
+		});
 
 		UpdateTheme();
 	});
@@ -212,20 +158,23 @@ function RestoreCollection(collectionIndex, removeCollection)
 			{
 				url: i,
 				active: false
-			} , function (createdTab)
-		{
-			chrome.storage.sync.get({ "loadOnRestore" : false }, values => {
-				if (!values.loadOnRestore)
-					chrome.tabs.onUpdated.addListener(function discarder(updatedTabId, changeInfo, updatedTab) {
-						if (updatedTabId === createdTab.id) {
-							chrome.tabs.onUpdated.removeListener(discarder);
-							if (!updatedTab.active) {
-								chrome.tabs.discard(updatedTabId);
+			},
+			(createdTab) =>
+			{
+				chrome.storage.sync.get({ "loadOnRestore" : false }, values => 
+				{
+					if (!values.loadOnRestore)
+						chrome.tabs.onUpdated.addListener(function DiscardTab(updatedTabId, changeInfo, updatedTab) 
+						{
+							if (updatedTabId === createdTab.id) {
+								chrome.tabs.onUpdated.removeListener(DiscardTab);
+								if (!updatedTab.active) {
+									chrome.tabs.discard(updatedTabId);
+								}
 							}
-						}
-					});
+						});
+				});
 			});
-		});
 	});
 
 	if (!removeCollection)
@@ -237,24 +186,6 @@ function RestoreCollection(collectionIndex, removeCollection)
 	UpdateTheme();
 }
 
-function AddTabsToFavorites(collectionIndex)
-{
-	alert("Adding to favorites");
-	/*for (var i = 0; i < collections[collectionIndex].links.length; i++)
-	{
-		chrome.bookmarks.create(
-			{
-				title: collections[collectionIndex].titles[i],
-				url: collections[collectionIndex].links[i],
-			});
-	}*/
-}
-
-function ShareTabs(collectionId)
-{
-	alert("Sharing");
-}
-
 function RemoveTab(collectionIndex, tabIndex)
 {
 	var set = collections[collectionIndex];
@@ -292,7 +223,7 @@ function RemoveTab(collectionIndex, tabIndex)
 
 var thumbnails = [];
 
-function AppendThumbnail(tabId, cahngeInfo, tab)
+function AppendThumbnail(tabId, tab)
 {
 	if (!tab.active || !tab.url.startsWith("http"))
 		return;
@@ -302,7 +233,7 @@ function AppendThumbnail(tabId, cahngeInfo, tab)
 			format: "jpeg",
 			quality: 1
 		},
-		function (dataUrl)
+		(dataUrl) =>
 		{
 			if (!dataUrl)
 			{
@@ -325,4 +256,8 @@ function AppendThumbnail(tabId, cahngeInfo, tab)
 	);
 }
 
-chrome.tabs.onUpdated.addListener(AppendThumbnail);
+chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) =>
+{
+	if (changeInfo.status === "complete")
+		AppendThumbnail(tabId, tab)
+});