Add simple options page, options loading, default options

js/background.js

@@ -1,6 +1,48 @@
 // testing endpoint until an actual api with all the annotation data is available
 const annotationsEndpoint = "https://archive.omar.yt/api/v1/annotations/";
 
+//set default options, load user-set options
+let optarchived;
+let optmodern;
+let optpause;
+
+chrome.storage.sync.get(['optarchived'], function (result) {
+	if (result.optarchived === undefined) {
+		chrome.storage.sync.set({
+			optarchived: true
+		}, function () {
+			console.log('Option Saved')
+			optarchived = true
+		});
+	} else {
+		optarchived = result.optarchived;
+	};
+});
+chrome.storage.sync.get(['optmodern'], function (result) {
+	if (result.optmodern === undefined) {
+		chrome.storage.sync.set({
+			optmodern: true
+		}, function () {
+			console.log('Option Saved')
+			optmodern = true
+		});
+	} else {
+		optmodern = result.optmodern;
+	};
+});
+chrome.storage.sync.get(['optpause'], function (result) {
+	if (result.optpause === undefined) {
+		chrome.storage.sync.set({
+			optpause: false
+		}, function () {
+			console.log('Option Saved')
+			optpause = false
+		});
+	} else {
+		optpause = result.optpause;
+	};
+});
+
 chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
 	// if the user navigates to a new page on youtube
 	// youtube dynamically updates page instead of changing paths (usually)

manifest.json

@@ -8,6 +8,7 @@
 
     "permissions": [
         "tabs",
+		"storage",
 		"https://archive.omar.yt/api/v1/annotations/*",
 		"https://gist.githubusercontent.com/*",
         "https://pastebin.com/raw/*"
@@ -16,7 +17,11 @@
         "default_title": "Annotations Restored",
         "default_popup": "popup/index.html"
     },
-
+	"options_ui": {
+		"chrome_style": true,
+		"page": "options/options.html",
+		"open_in_tab": false
+	},
     "content_scripts": [{
         "matches": ["*://www.youtube.com/watch?*"],
         "js": ["js/AnnotationParser.js", "js/AnnotationRenderer.js", "js/content.js"],

options/options.html

@@ -0,0 +1,7 @@
+<p>Annotations Restored Options</p>
+<input id=archived type=checkbox>Show archived annotations created before May 2, 2017 in the YouTube annotations editor</input><br>
+<input id=modern type=checkbox>Show modern annotations from video descriptions</input><br>
+<input id=pause type=checkbox>Enable pause annotations (not yet implemented)</input><br>
+<button id=save>Save Options</button>
+<p id=saved hidden=true>Options Saved!</p>
+<script src="options.js"></script>

options/options.js

@@ -0,0 +1,24 @@
+document.addEventListener('DOMContentLoaded', function () {
+	chrome.storage.sync.get(['optarchived'], function (result) {
+		document.getElementById('archived').checked = result.optarchived;
+	});
+	chrome.storage.sync.get(['optmodern'], function (result) {
+		document.getElementById('modern').checked = result.optmodern;
+	});
+
+	chrome.storage.sync.get(['optpause'], function (result) {
+		document.getElementById('pause').checked = result.optpause;
+	});
+});
+document.getElementById('save').addEventListener('click', function save() {
+	chrome.storage.sync.set({
+		optarchived: document.getElementById('archived').checked
+	}, function() {console.log('Option Saved')});
+	chrome.storage.sync.set({
+		optmodern: document.getElementById('modern').checked
+	}, function() {console.log('Option Saved')});
+	chrome.storage.sync.set({
+		optpause: document.getElementById('pause').checked
+	}, function() {console.log('Option Saved')});
+	document.getElementById('saved').hidden = false;
+});