diff --git a/locales.json b/locales.json
deleted file mode 100644
index 7a2112b..0000000
--- a/locales.json
+++ /dev/null
@@ -1 +0,0 @@
-{"locales": ["de-DE", "en-US"]}
diff --git a/options/buildPrefInputs.js b/options/buildPrefInputs.js
new file mode 100644
index 0000000..e8e7aaf
--- /dev/null
+++ b/options/buildPrefInputs.js
@@ -0,0 +1,190 @@
+var table = document.createElement("table");
+table.className = "settings";
+document.body.appendChild(table);
+
+[
+	{
+		"name": "whiteList",
+		"title": "White list",
+		"type": "string",
+		"value": ""
+	},
+	{
+		"name": "blackList",
+		"title": "Black list",
+		"type": "string",
+		"value": ""
+	},
+	{
+		"name": "blockMode",
+		"title": "block mode",
+		"type": "menulist",
+		"value": "fakeReadout",
+		"options": [
+			{
+				"value": "blockReadout",
+				"label": "block readout API"
+			},
+			{
+				"value": "fakeReadout",
+				"label": "fake readout API"
+			},
+			{
+				"value": "fakeInput",
+				"label": "fake input API"
+			},
+			{
+				"value": "askReadout",
+				"label": "ask for readout API permission"
+			},
+			{
+				"value": "",
+				"label": ""
+			},
+			{
+				"value": "blockEverything",
+				"label": "block everything"
+			},
+			{
+				"value": "block",
+				"label": "allow only white list"
+			},
+			{
+				"value": "ask",
+				"label": "ask for permission"
+			},
+			{
+				"value": "allow",
+				"label": "block only black list"
+			},
+			{
+				"value": "allowEverything",
+				"label": "allow everything"
+			}
+		]
+	},
+	{
+		"name": "maxFakeSize",
+		"title": "Maximal fake size",
+		"type": "integer",
+		"value": 0
+	},
+	{
+		"name": "rng",
+		"title": "Random number generator",
+		"type": "menulist",
+		"value": "nonPersistent",
+		"options": [
+			{
+				"value": "nonPersistent",
+				"label": "non persistent"
+			},
+			{
+				"value": "persistent",
+				"label": "persistent"
+			}
+		]
+	},
+	{
+		"name": "storePersistentRnd",
+		"title": "Store persistent data",
+		"type": "bool",
+		"value": false
+	},
+	{
+		"name": "clearPersistentRnd",
+		"title": "Clear persistent random storage",
+		"type": "control",
+		"label": "Clear"
+	},
+	{
+		"name": "askOnlyOnce",
+		"title": "Ask only once",
+		"type": "bool",
+		"value": true
+	},
+	{
+		"name": "showNotifications",
+		"title": "Show notifications",
+		"type": "bool",
+		"value": true
+	},
+	{
+		"name": "notificationDisplayTime",
+		"title": "notification display time",
+		"type": "integer",
+		"value": 30
+	},
+	{
+		"name": "ignoreList",
+		"title": "Ignore list",
+		"type": "string",
+		"value": ""
+	},
+	{
+		"name": "showCallingFile",
+		"title": "Display calling file",
+		"type": "bool",
+		"value": false
+	},
+	{
+		"name": "showCompleteCallingStack",
+		"title": "Display complete calling stack",
+		"type": "bool",
+		"value": false
+	},{
+		"name": "enableStackList",
+		"title": "Use file specific scoped white list",
+		"type": "bool",
+		"value": false
+	},
+	{
+		"name": "stackList",
+		"title": "File specific white list",
+		"type": "string",
+		"value": ""
+	},
+	{
+		"name": "showReleaseNotes",
+		"title": "Release notes",
+		"type": "control",
+		"label": "Show"
+	}
+].forEach(function(pref){
+	var html = '<td><span class="title">__MSG_' + pref.name + '_title__</span><div class="description">__MSG_' + pref.name + '_description__</div></td><td>';
+	var inputAttributes = ' data-storage-name="' + pref.name + '" data-storage-type="' + pref.type + '" class="setting"'
+	switch (pref.type){
+		case "integer":
+			html += '<input type="number"' + inputAttributes + ' value="' + pref.value + '">';
+			break;
+		case "string":
+			html += '<input type="text"' + inputAttributes + ' value="' + pref.value + '">';
+			break;
+		case "bool":
+			html += '<input type="checkbox"' + inputAttributes + (pref.value? ' checked="checked"': "") + '>';
+			break;
+		case "menulist":
+			html += '<select' + inputAttributes + '>' +
+				pref.options.map(function(option){
+					if (option.value){
+						return '<option value="' + option.value + '"' + (option.value === pref.value? " selected": "") + '>__MSG_' + pref.name + '_options.' + option.label + '__</option>';
+					}
+					else {
+						return '<option disabled>----------------</option>';
+					}
+				}).join("") +
+				'</select>';
+			break;
+		case "control":
+			html += '<button' + inputAttributes + '">__MSG_' + pref.name + '_label__</button>';
+			break;
+		default:
+			console.log("Unknown preference type: " + pref.type);
+	}
+	html += "</td>";
+	var tr = document.createElement("tr");
+	tr.className = "settingRow";
+	tr.innerHTML = html;
+	console.log(html);
+	table.appendChild(tr);
+});
\ No newline at end of file
diff --git a/options/options.css b/options/options.css
new file mode 100644
index 0000000..4089e8f
--- /dev/null
+++ b/options/options.css
@@ -0,0 +1,23 @@
+.settings {
+	table-layout: fixed;
+	width: 100%;
+	border-spacing: 0;
+}
+.settings * {
+	vertical-align: top;
+}
+
+.settings .settingRow td{
+	padding: 0.5em 0;
+	border-top: 1px solid #c1c1c1;
+}
+
+.settings .settingRow .description {
+	color: graytext;
+	margin-inline-start: 2em;
+	white-space: pre-wrap;
+}
+input[type=""], input[type="text"], input[type="number"], select {
+	width: 100%;
+	box-sizing: border-box;
+}
\ No newline at end of file
diff --git a/options/options.html b/options/options.html
new file mode 100644
index 0000000..8cbd7bf
--- /dev/null
+++ b/options/options.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>CanvasBlocker Settings</title>
+		<link href="options.css" rel="stylesheet" type="text/css">
+	</head>
+	<body>
+		<script src="buildPrefInputs.js"></script>
+		<script src="options.js"></script>
+	</body>
+</html>
\ No newline at end of file
diff --git a/options/options.js b/options/options.js
new file mode 100644
index 0000000..4bc6156
--- /dev/null
+++ b/options/options.js
@@ -0,0 +1,68 @@
+(function(){
+	function traverse(node, func){
+		func(node);
+		Array.from(node.childNodes).forEach(function(child){traverse(child, func);});
+	}
+	
+	// getting the translation of all the messages
+	traverse(document.body, function(node){
+		if (node.nodeType == 3){
+			node.nodeValue = node.nodeValue.replace(/\b__MSG_(.+)__\b/g, function(m, key){
+				try {
+					return browser.i18n.getMessage(key);
+				}
+				catch (e){
+					return "Unknown i18n key: " + key;
+				}
+			});
+		}
+	});
+	
+	Array.from(document.querySelectorAll("input.setting, select.setting")).forEach(function(input){
+		var storageName = input.dataset.storageName;
+		browser.storage.local.get(storageName).then(function(value){
+			// console.log(storageName, "got storage value", value);
+			if (value.hasOwnProperty(storageName)){
+				input.value = value[storageName];
+			}
+		});
+		
+		input.addEventListener("change", function(){
+			var value;
+			if (this.type === "checkbox"){
+				value = this.checked;
+			}
+			else {
+				value = this.value;
+			}
+			var obj = {};
+			obj[storageName] = value;
+			browser.storage.local.set(obj);
+		});
+	});
+	
+	var callbacks = {
+		showReleaseNotes: function(){
+			console.log("sdsdsdsd");
+			window.open("../releaseNotes.txt", "_blank");
+		},
+		clearPersistentRnd: function(){
+			browser.runtime.sendMessage({"canvasBlocker-clear-domain-rnd": true});
+			browser.storage.local.set({persistentRndStorage: ""});
+		}
+	};
+	Array.from(document.querySelectorAll("button.setting")).forEach(function(button){
+		var storageName = button.dataset.storageName;
+		button.addEventListener("click", function(){
+			if (callbacks[storageName]){
+				callbacks[storageName]();
+			}
+		});
+	});
+	
+	browser.storage.onChanged.addListener(function(data){
+		Object.keys(data).forEach(function(storageName){
+			
+		});
+	});
+}());	
\ No newline at end of file
diff --git a/releaseNotes.txt b/releaseNotes.txt
index 04152b9..57eab7b 100644
--- a/releaseNotes.txt
+++ b/releaseNotes.txt
@@ -6,7 +6,7 @@ Version 0.4.0:
 		- 
 	
 	fixes:
-		- 
+		- ask mode did not work for input types
 
 Version 0.3.8:
 	changes: