Done extension UI and basic interactions

js/aside-script.js

@@ -0,0 +1,40 @@
+chrome.runtime.onMessage.addListener(function(sender, request, sendResponse)
+{
+	var pane = document.querySelector("#aside-pane");
+	if (pane.style.transform == "translateX(110%)")
+	{
+		pane.style.transform = "translateX(0%)";
+	}
+	else
+	{
+		pane.style.transform = "translateX(110%)";
+	}
+
+	UpdateTheme();
+	
+	sendResponse();
+});
+
+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;
+
+	document.body.innerHTML += this.responseText.split("%EXTENSION_PATH%").join(chrome.extension.getURL(""));
+};
+xhr.send();
+
+function UpdateTheme()
+{
+	var css = document.querySelector("#aside-pane #darkCSS")
+	if (window.matchMedia("(prefers-color-scheme: dark)").matches)
+	{
+		css.removeAttribute("disabled");
+	}
+	else
+	{
+		css.setAttribute("disabled", true);
+	}
+}

js/background.js

@@ -0,0 +1,50 @@
+function UpdateTheme()
+{
+	if (window.matchMedia("(prefers-color-scheme: dark)").matches)
+	{
+		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
+	{
+		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"
+			}
+		});
+	}
+}
+
+UpdateTheme();
+chrome.windows.onCreated.addListener(UpdateTheme);
+chrome.windows.onRemoved.addListener(UpdateTheme);
+chrome.windows.onFocusChanged.addListener(UpdateTheme);
+
+chrome.tabs.onUpdated.addListener(UpdateTheme);
+chrome.tabs.onCreated.addListener(UpdateTheme);
+chrome.tabs.onMoved.addListener(UpdateTheme);
+chrome.tabs.onSelectionChanged.addListener(UpdateTheme);
+chrome.tabs.onActiveChanged.addListener(UpdateTheme);
+chrome.tabs.onActivated.addListener(UpdateTheme);
+chrome.tabs.onHighlightChanged.addListener(UpdateTheme);
+chrome.tabs.onHighlighted.addListener(UpdateTheme);
+chrome.tabs.onDetached.addListener(UpdateTheme);
+chrome.tabs.onAttached.addListener(UpdateTheme);
+chrome.tabs.onRemoved.addListener(UpdateTheme);
+chrome.tabs.onReplaced.addListener(UpdateTheme);
+chrome.tabs.onZoomChange.addListener(UpdateTheme);
+
+// TODO: Load saved tabs