Added header to standalone options page

_locales/de/messages.json

@@ -17,6 +17,18 @@
 		"description": ""
 	},
 	
+	"options": {
+		"message": "CanvasBlocker Einstellungen",
+		"description": ""
+	},
+	"optionsIntroduction": {
+		"message": "Über diese Seite können Sie die Einstellungen des Add-ons CanvasBlocker verändern.",
+		"description": ""
+	},
+	"installedNotice": {
+		"message": "CanvasBlocker wurde installiert oder aktualisiert. Wenn Sie diese Seite in Zukunft erreichen wollen, erstellen Sie bitte ein Lesezeichen.",
+		"description": ""
+	},
 	
 	"section_asking": {
 		"message": "Nachfragen",

_locales/en/messages.json

@@ -17,6 +17,18 @@
 		"description": ""
 	},
 	
+	"options": {
+		"message": "CanvasBlocker options",
+		"description": ""
+	},
+	"optionsIntroduction": {
+		"message": "This page provides a way to change the settings of the CanvasBlocker add-on.",
+		"description": ""
+	},
+	"installedNotice": {
+		"message": "CanvasBlocker was installed or updated. If you want to be able to access this page in the future, please bookmark it.",
+		"description": ""
+	},
 	
 	"section_asking": {
 		"message": "Asking",

options/options.css

@@ -1,3 +1,18 @@
+body.standalone {
+	padding: 0.5em;
+}
+
+header {
+	margin-bottom: 1em;
+}
+
+header .installedNotice {
+	margin: 0.5em;
+	padding: 0.5em;
+	border: 1px dotted #880000;
+	color: #880000;
+}
+
 .settings {
 	width: 100%;
 	border-spacing: 0;

options/options.js

@@ -34,6 +34,27 @@
 		}
 	};
 	
+	if (window === window.top){
+		let head = document.createElement("header");
+		let heading = document.createElement("h1");
+		heading.textContent = browser.i18n.getMessage("options");
+		head.appendChild(heading);
+		
+		let introduction = document.createElement("div");
+		introduction.textContent = browser.i18n.getMessage("optionsIntroduction");
+		head.appendChild(introduction);
+		
+		if (window.location.search === "?installed"){
+			let bookmarkingNotice = document.createElement("div");
+			bookmarkingNotice.className = "installedNotice";
+			bookmarkingNotice.textContent = browser.i18n.getMessage("installedNotice");
+			head.appendChild(bookmarkingNotice);
+		}
+		
+		document.body.appendChild(head);
+		document.body.classList.add("standalone");
+	}
+	
 	var table = document.createElement("table");
 	table.className = "settings " + (settings.displayDescriptions? "display": "hide") + "Descriptions";
 	settings.on("displayDescriptions", function(){