Add basic prototype of frontend with twig

spectabular/manifest.json

@@ -7,5 +7,8 @@
 	"browser_action": {
 		"default_title": "Spectabular",
 		"default_popup": "twig/browser-action.html"
-	}
+	},
+	"web_accessible_resources": [
+		"twig/*.html.twig"
+	]
 }

src/ts/browser-action.ts

@@ -0,0 +1,12 @@
+import * as twig from "twig";
+
+const MAIN_TEMPLATE_URI: string = chrome.runtime.getURL("twig/main.html.twig");
+//Using async:false is fine here because we're just getting the resource from chrome, not a real remote.
+//Using the `as any` cast here because the @types/twig package is out of date and requires `url` rather than `href`
+const MAIN_TEMPLATE: twig.Template = twig.twig({href: MAIN_TEMPLATE_URI, async: false} as any);
+
+document.addEventListener("DOMContentLoaded", () => {
+	chrome.tabs.query({}, (tabs: chrome.tabs.Tab[]) => {
+		document.querySelector("body").innerHTML = String(MAIN_TEMPLATE.render({tabs}));
+	});
+});

src/twig/main.html.twig

@@ -0,0 +1 @@
+{% include "tab-list.html.twig" %}

src/twig/tab-list.html.twig

@@ -0,0 +1,7 @@
+{% block tab_list %}
+	<ul id="tabs">
+	{% for tab in tabs %}
+		<li tab-id={{ tab.id }}>{{ tab.title }}</li>
+	{% endfor %}
+	</ul>
+{% endblock %}