Code refactoring

The code was repetitive and old. This change is one iteration towards a
complete refactoring of the code which brings it to a better state.

Also, the extension icon now can be clicked to open the options page.

Change-Id: I998355cd871e31d6590608ff2563d43040944a83
diff --git a/src/background.js b/src/background.js
index 3c34a89..ed86f66 100644
--- a/src/background.js
+++ b/src/background.js
@@ -1,53 +1,64 @@
-// To generate isoLangs, edit code at isolangs.json and use Closure to minimize it
-var isoLangs={af:{name:"Afrikaans",nativeName:"Afrikaans"},sq:{name:"Albanian",nativeName:"Shqip"},am:{name:"Amharic",nativeName:"\u12a0\u121b\u122d\u129b"},ar:{name:"Arabic",nativeName:"\u0627\u0644\u0639\u0631\u0628\u064a\u0629"},hy:{name:"Armenian",nativeName:"\u0540\u0561\u0575\u0565\u0580\u0565\u0576"},az:{name:"Azerbaijani",nativeName:"az\u0259rbaycan dili"},eu:{name:"Basque",nativeName:"euskara"},be:{name:"Belarusian",nativeName:"\u0411\u0435\u043b\u0430\u0440\u0443\u0441\u043a\u0430\u044f"},
-bn:{name:"Bengali",nativeName:"\u09ac\u09be\u0982\u09b2\u09be"},bs:{name:"Bosnian",nativeName:"bosanski jezik"},bg:{name:"Bulgarian",nativeName:"\u0431\u044a\u043b\u0433\u0430\u0440\u0441\u043a\u0438 \u0435\u0437\u0438\u043a"},ca:{name:"Catalan",nativeName:"Catal\u00e0"},ceb:{name:"Cebuano",nativeName:"Bisaya"},ny:{name:"Chichewa",nativeName:"chiChe\u0175a"},zh:{name:"Chinese",nativeName:"\u4e2d\u6587 (Zh\u014dngw\u00e9n)"},co:{name:"Corsican",nativeName:"corsu"},hr:{name:"Croatian",nativeName:"hrvatski"},
-cs:{name:"Czech",nativeName:"\u010desky"},da:{name:"Danish",nativeName:"dansk"},nl:{name:"Dutch",nativeName:"Nederlands"},en:{name:"English",nativeName:"English"},eo:{name:"Esperanto",nativeName:"Esperanto"},et:{name:"Estonian",nativeName:"eesti"},tl:{name:"Filipino",nativeName:"Pilipino"},fi:{name:"Finnish",nativeName:"suomi"},fr:{name:"French",nativeName:"fran\u00e7ais"},fy:{name:"Frisian",nativeName:"Frysk"},gl:{name:"Galician",nativeName:"Galego"},ka:{name:"Georgian",nativeName:"\u10e5\u10d0\u10e0\u10d7\u10e3\u10da\u10d8"},
-de:{name:"German",nativeName:"Deutsch"},el:{name:"Greek",nativeName:"\u0395\u03bb\u03bb\u03b7\u03bd\u03b9\u03ba\u03ac"},gu:{name:"Gujarati",nativeName:"\u0a97\u0ac1\u0a9c\u0ab0\u0abe\u0aa4\u0ac0"},ht:{name:"Haitian Creole",nativeName:"Krey\u00f2l ayisyen"},ha:{name:"Hausa",nativeName:"Hausa"},haw:{name:"Hawaiian",nativeName:"Hausa"},iw:{name:"Hebrew",nativeName:"\u05e2\u05d1\u05e8\u05d9\u05ea"},hi:{name:"Hindi",nativeName:"\u0939\u093f\u0928\u094d\u0926\u0940, \u0939\u093f\u0902\u0926\u0940"},hmn:{name:"Hmong",
-nativeName:"lus Hmoob"},hu:{name:"Hungarian",nativeName:"Magyar"},is:{name:"Icelandic",nativeName:"\u00cdslenska"},ig:{name:"Igbo",nativeName:"As\u1ee5s\u1ee5 Igbo"},id:{name:"Indonesian",nativeName:"Bahasa Indonesia"},ga:{name:"Irish",nativeName:"Gaeilge"},it:{name:"Italian",nativeName:"Italiano"},ja:{name:"Japanese",nativeName:"\u65e5\u672c\u8a9e (\u306b\u307b\u3093\u3054\uff0f\u306b\u3063\u307d\u3093\u3054)"},jv:{name:"Javanese",nativeName:"basa Jawa"},kn:{name:"Kannada",nativeName:"\u0c95\u0ca8\u0ccd\u0ca8\u0ca1"},
-kk:{name:"Kazakh",nativeName:"\u049a\u0430\u0437\u0430\u049b \u0442\u0456\u043b\u0456"},km:{name:"Khmer",nativeName:"\u1797\u17b6\u179f\u17b6\u1781\u17d2\u1798\u17c2\u179a"},ko:{name:"Korean",nativeName:"\ud55c\uad6d\uc5b4 (\u97d3\u570b\u8a9e)"},ku:{name:"Kurdish (Kurmanji)",nativeName:"Kurd\u00ee"},ky:{name:"Kyrgyz",nativeName:"\u043a\u044b\u0440\u0433\u044b\u0437 \u0442\u0438\u043b\u0438"},lo:{name:"Lao",nativeName:"\u0e9e\u0eb2\u0eaa\u0eb2\u0ea5\u0eb2\u0ea7"},la:{name:"Latin",nativeName:"latine"},
-lv:{name:"Latvian",nativeName:"latvie\u0161u valoda"},lt:{name:"Lithuanian",nativeName:"lietuvi\u0173 kalba"},lb:{name:"Luxembourgish",nativeName:"L\u00ebtzebuergesch"},mk:{name:"Macedonian",nativeName:"\u043c\u0430\u043a\u0435\u0434\u043e\u043d\u0441\u043a\u0438 \u0458\u0430\u0437\u0438\u043a"},mg:{name:"Malagasy",nativeName:"Malagasy fiteny"},ms:{name:"Malay",nativeName:"bahasa Melayu"},ml:{name:"Malayalam",nativeName:"\u0d2e\u0d32\u0d2f\u0d3e\u0d33\u0d02"},mt:{name:"Maltese",nativeName:"Malti"},
-mi:{name:"M\u0101ori",nativeName:"te reo M\u0101ori"},mr:{name:"Marathi",nativeName:"\u092e\u0930\u093e\u0920\u0940"},mn:{name:"Mongolian",nativeName:"\u043c\u043e\u043d\u0433\u043e\u043b"},my:{name:"Myanmar",nativeName:"\u1017\u1019\u102c\u1005\u102c"},ne:{name:"Nepali",nativeName:"\u0928\u0947\u092a\u093e\u0932\u0940"},no:{name:"Norwegian",nativeName:"Norsk"},ps:{name:"Pashto",nativeName:"\u067e\u069a\u062a\u0648"},fa:{name:"Persian",nativeName:"\u0641\u0627\u0631\u0633\u06cc"},pl:{name:"Polish",
-nativeName:"polski"},pt:{name:"Portuguese",nativeName:"Portugu\u00eas"},pa:{name:"Punjabi",nativeName:"\u0a2a\u0a70\u0a1c\u0a3e\u0a2c"},ro:{name:"Romanian",nativeName:"rom\u00e2n\u0103"},ru:{name:"Russian",nativeName:"\u0440\u0443\u0441\u0441\u043a\u0438\u0439 \u044f\u0437\u044b\u043a"},sm:{name:"Samoan",nativeName:"gagana faa Samoa"},gd:{name:"Scots Gaelic",nativeName:"G\u00e0idhlig"},sr:{name:"Serbian",nativeName:"\u0441\u0440\u043f\u0441\u043a\u0438 \u0458\u0435\u0437\u0438\u043a"},st:{name:"Sesotho",
-nativeName:"Sesotho"},sn:{name:"Shona",nativeName:"chiShona"},sd:{name:"Sindhi",nativeName:"\u0938\u093f\u0928\u094d\u0927\u0940"},si:{name:"Sinhala",nativeName:"\u0dc3\u0dd2\u0d82\u0dc4\u0dbd"},sk:{name:"Slovak",nativeName:"sloven\u010dina"},sl:{name:"Slovenian",nativeName:"sloven\u0161\u010dina"},so:{name:"Somali",nativeName:"Soomaaliga"},es:{name:"Spanish",nativeName:"espa\u00f1ol"},su:{name:"Sundanese",nativeName:"Basa Sunda"},sw:{name:"Swahili",nativeName:"Kiswahili"},sv:{name:"Swedish",nativeName:"svenska"},
-tg:{name:"Tajik",nativeName:"\u0442\u043e\u04b7\u0438\u043a\u04e3"},ta:{name:"Tamil",nativeName:"\u0ba4\u0bae\u0bbf\u0bb4\u0bcd"},te:{name:"Telugu",nativeName:"\u0c24\u0c46\u0c32\u0c41\u0c17\u0c41"},th:{name:"Thai",nativeName:"\u0e44\u0e17\u0e22"},tr:{name:"Turkish",nativeName:"T\u00fcrk\u00e7e"},uk:{name:"Ukrainian",nativeName:"\u0443\u043a\u0440\u0430\u0457\u043d\u0441\u044c\u043a\u0430"},ur:{name:"Urdu",nativeName:"\u0627\u0631\u062f\u0648"},uz:{name:"Uzbek",nativeName:"zbek"},vi:{name:"Vietnamese",
-nativeName:"Ti\u1ebfng Vi\u1ec7t"},cy:{name:"Welsh",nativeName:"Cymraeg"},xh:{name:"Xhosa",nativeName:"isiXhosa"},yi:{name:"Yiddish",nativeName:"\u05d9\u05d9\u05b4\u05d3\u05d9\u05e9"},yo:{name:"Yoruba",nativeName:"Yor\u00f9b\u00e1"},za:{name:"Zhuang, Chuang",nativeName:"Sa\u026f cue\u014b\u0185"},zu:{name:"Zulu",nativeName:"isiZulu"}};
-
-var array_elements = new Array(), translator_tab = false, translator_window = false;
+var array_elements = [], translator_tab = null, translator_window = null;
 
 function isEmpty(obj) {
-    return Object.keys(obj).length === 0;
+	return Object.keys(obj).length === 0;
 }
 
-function click(info, tab) {
-	chrome.storage.sync.get("uniquetab", function(items) {
-		var settings_tab = {'url': 'https://translate.google.com/#auto/'+array_elements[info.menuItemId]['langCode']+'/'+encodeURIComponent(info.selectionText)};
-		if (translator_tab && items.uniquetab == "yep") {
-			chrome.tabs.update(translator_tab, settings_tab, function(tab){
-				chrome.tabs.highlight({'windowId': tab.windowId, 'tabs': tab.index}, function() {
-					chrome.windows.update(tab.windowId, {focused: true}, function() {});
-				});
+function getTranslationUrl(lang, text) {
+	var params = new URLSearchParams({
+		sl: 'auto',
+		tl: lang,
+		text: text,
+		op: 'translate',
+	});
+	return 'https://translate.google.com/?' + params.toString();
+}
+
+function translationClick(info, tab) {
+	console.log(info.selectionText);
+	chrome.storage.sync.get('uniquetab', items => {
+		var url = getTranslationUrl(
+		    array_elements[info.menuItemId]['langCode'], info.selectionText);
+		var settings_tab = {url};
+		if (translator_tab && items.uniquetab == 'yep') {
+			chrome.tabs.update(translator_tab, settings_tab, tab => {
+				chrome.tabs.highlight(
+				    {
+					    windowId: tab.windowId,
+					    tabs: tab.index,
+				    },
+				    _ => {
+					    chrome.windows.update(tab.windowId, {
+						    focused: true,
+					    });
+				    });
 			});
-		} else if (items.uniquetab == "panel") {
-			chrome.windows.create({
-				type: 'panel', url: 'https://translate.google.com/#auto/'+array_elements[info.menuItemId]['langCode']+'/'+encodeURIComponent(info.selectionText), width: 1000, height: 382}, function(tab) {
-					translator_window = tab.windowId;
-					translator_tab = tab.id;
-					chrome.windows.onRemoved.addListener(function (windowId) {
-						if (windowId == translator_window) {
-							translator_window = false;
-							translator_tab = false;
-						}
-					});
-				}
-			);
+		} else if (items.uniquetab == 'panel') {
+			chrome.windows.create(
+			    {
+				    type: 'panel',
+				    url,
+				    width: 1000,
+				    height: 382,
+			    },
+			    function(tab) {
+				    translator_window = tab.windowId;
+				    translator_tab = tab.id;
+				    chrome.windows.onRemoved.addListener(function(windowId) {
+					    if (windowId == translator_window) {
+						    translator_window = null;
+						    translator_tab = null;
+					    }
+				    });
+			    });
 		} else {
 			chrome.tabs.create(settings_tab, function(tab) {
 				translator_window = tab.windowId;
 				translator_tab = tab.id;
-				chrome.tabs.onRemoved.addListener(function (tabId, removeInfo) {
+				chrome.tabs.onRemoved.addListener(function(tabId, removeInfo) {
 					if (tabId == translator_tab) {
-						translator_window = false;
-						translator_tab = false;
+						translator_window = null;
+						translator_tab = null;
 					}
 				});
 			});
@@ -55,25 +66,30 @@
 	});
 }
 
-function click2(info, tab) {
+function openOptionsPage() {
 	if (chrome.runtime.openOptionsPage) {
 		// New way to open options pages, if supported (Chrome 42+).
 		chrome.runtime.openOptionsPage();
 	} else {
-		chrome.tabs.create({'url': 'chrome-extension://'+chrome.i18n.getMessage("@@extension_id")+'/options.html', 'active': true}, function(tab) {
-			chrome.windows.update(tab.windowId, {'focused': true}, function() {});
-		});
+		chrome.tabs.create(
+		    {
+			    'url': 'chrome-extension://' +
+			        chrome.i18n.getMessage('@@extension_id') + '/options.html',
+			    'active': true
+		    },
+		    tab => {
+			    chrome.windows.update(tab.windowId, {focused: true});
+		    });
 	}
-
 }
 
 function createmenus() {
-	chrome.storage.sync.get("translateinto", function(items) {
+	chrome.storage.sync.get('translateinto', function(items) {
 		chrome.contextMenus.removeAll();
 
 		var count = 0, singleone = true;
 
-		for (var language in items.translateinto) {
+		for (var language of Object.keys(items.translateinto)) {
 			if (count == 0) {
 				count++;
 			} else {
@@ -83,130 +99,168 @@
 		}
 
 		if (singleone) {
-			for (var language_id in items.translateinto) {
+			for (var language_id of Object.keys(items.translateinto)) {
 				var language = items.translateinto[language_id];
 				var languagem = isoLangs[language];
-				var title = languagem.name + " ("+languagem.nativeName+")";
-				var parent = chrome.contextMenus.create({"id": "tr_single_parent", "title": chrome.i18n.getMessage("contextmenu_title2", languagem.name), "contexts": ["selection"]});
-				array_elements[parent] = new Array();
-				array_elements[parent]["langCode"] = language;
-				array_elements[parent]["langName"] = languagem.name;
-				array_elements[parent]["langNativeName"] = language.nativeName;
+				var id = chrome.contextMenus.create({
+					'id': 'tr_single_parent',
+					'title': chrome.i18n.getMessage('contextmenu_title2', languagem.name),
+					'contexts': ['selection'],
+				});
+				array_elements[id] = new Array();
+				array_elements[id]['langCode'] = language;
 			}
 		} else {
-			var parent = chrome.contextMenus.create({"id": "parent", "title": chrome.i18n.getMessage("contextmenu_title"), "contexts": ["selection"]});
-			for (var language_id in items.translateinto) {
+			var parentEl = chrome.contextMenus.create({
+				'id': 'parent',
+				'title': chrome.i18n.getMessage('contextmenu_title'),
+				'contexts': ['selection']
+			});
+			for (var language_id of Object.keys(items.translateinto)) {
 				var language = items.translateinto[language_id];
 				var languagem = isoLangs[language];
-				var title = languagem.name + " ("+languagem.nativeName+")";
-				var id = chrome.contextMenus.create({"id": "tr_language_"+language, "title": title, "parentId": parent, "contexts":["selection"]});
+				var title = languagem.name + ' (' + languagem.nativeName + ')';
+				var id = chrome.contextMenus.create({
+					'id': 'tr_language_' + language,
+					'title': title,
+					'parentId': parentEl,
+					'contexts': ['selection']
+				});
 				array_elements[id] = new Array();
-				array_elements[id]["langCode"] = language;
-				array_elements[id]["langName"] = languagem.name;
-				array_elements[id]["langNativeName"] = language.nativeName;
+				array_elements[id]['langCode'] = language;
 			}
-			var id = chrome.contextMenus.create({"id": "tr_separator", "type": "separator","parentId": parent, "contexts":["selection"]});
-			var id = chrome.contextMenus.create({"id": "tr_options", "title": chrome.i18n.getMessage("contextmenu_edit"), "parentId": parent, "contexts":["selection"]});
+			chrome.contextMenus.create({
+				'id': 'tr_separator',
+				'type': 'separator',
+				'parentId': parentEl,
+				'contexts': ['selection']
+			});
+			chrome.contextMenus.create({
+				'id': 'tr_options',
+				'title': chrome.i18n.getMessage('contextmenu_edit'),
+				'parentId': parentEl,
+				'contexts': ['selection']
+			});
 		}
 	});
 }
 
 chrome.runtime.onInstalled.addListener(function(details) {
 	chrome.storage.sync.get(null, function(items) {
-		if (details.reason == "install") {
+		if (details.reason == 'install') {
 			if (isEmpty(items)) {
-				var settings = {'translateinto': {}, 'uniquetab': ''}, default_language = chrome.i18n.getMessage("@@ui_locale").split("_")[0];
-				if (isoLangs[default_language] != "undefined") {
+				var settings = {'translateinto': {}, 'uniquetab': ''},
+				    default_language =
+				        chrome.i18n.getMessage('@@ui_locale').split('_')[0];
+
+				if (isoLangs[default_language] != 'undefined') {
 					settings.translateinto[default_language] = default_language;
 				}
+
 				chrome.storage.sync.set(settings, function() {
-					chrome.notifications.create("install", {
-						type: "basic",
-						iconUrl: "icons/translate-128.png",
-						title: chrome.i18n.getMessage("notification_install_title"),
-						message: chrome.i18n.getMessage("notification_install_message"),
+					chrome.notifications.create('install', {
+						type: 'basic',
+						iconUrl: 'icons/translate-128.png',
+						title: chrome.i18n.getMessage('notification_install_title'),
+						message: chrome.i18n.getMessage('notification_install_message'),
 						isClickable: true
-					}, function(id) {});
+					});
 				});
 			}
 		}
-		if (details.reason == "update") {
-			var version = details.previousVersion.split(".");
-			if (version[0] == "0" && version[1] < "6") {
-				var settings = {'languages': {}, 'uniquetab': ''}, default_language = chrome.i18n.getMessage("@@ui_locale").split("_")[0];
-				if (isoLangs[default_language] != "undefined") {
+		if (details.reason == 'update') {
+			var version = details.previousVersion.split('.');
+
+			// Updating from a version previous to v0.6
+			if (version[0] == '0' && version[1] < '6') {
+				var settings = {
+					languages: {},
+					uniquetab: '',
+				};
+				var default_language =
+				    chrome.i18n.getMessage('@@ui_locale').split('_')[0];
+
+				if (isoLangs[default_language] != 'undefined')
 					settings.languages[default_language] = default_language;
-				}
+
 				chrome.storage.sync.set(settings, function() {
-					chrome.notifications.create("upgradedtostorage", {
-						type: "basic",
-						iconUrl: "icons/translate-128.png",
-						title: chrome.i18n.getMessage("notification_upgradedtostorage_title"),
-						message: chrome.i18n.getMessage("notification_upgradedtostorage_message"),
-						isClickable: true
-					}, function(id) {});
+					chrome.notifications.create('upgradedtostorage', {
+						type: 'basic',
+						iconUrl: 'icons/translate-128.png',
+						title:
+						    chrome.i18n.getMessage('notification_upgradedtostorage_title'),
+						message: chrome.i18n.getMessage(
+						    'notification_upgradedtostorage_message'),
+						isClickable: true,
+					});
 				});
 			}
-			if (version[0] == "0" && version[1] < "7") {
+
+			// Updating from a version previous to v0.7
+			if (version[0] == '0' && version[1] < '7') {
 				items.translateinto = {};
 				var i = 0;
 				for (var language in items.languages) {
 					items.translateinto[i] = items.languages[language];
 					i++;
 				}
-				delete(items.languages);
-				chrome.storage.sync.set(items, function() {
-					chrome.notifications.create("reorder", {
-						type: "basic",
-						iconUrl: "icons/translate-128.png",
-						title: chrome.i18n.getMessage("notification_reorder_title"),
-						message: chrome.i18n.getMessage("notification_reorder_message"),
+				delete items.languages;
+				chrome.storage.sync.set(items, _ => {
+					chrome.notifications.create('reorder', {
+						type: 'basic',
+						iconUrl: 'icons/translate-128.png',
+						title: chrome.i18n.getMessage('notification_reorder_title'),
+						message: chrome.i18n.getMessage('notification_reorder_message'),
 						isClickable: true
-					}, function(id) {});
+					});
 				});
 			}
 		}
 	});
 });
 
-chrome.storage.onChanged.addListener(function(changes, areaName) {
-	if (areaName == "sync")
-		createmenus();
+chrome.storage.onChanged.addListener((changes, areaName) => {
+	if (areaName == 'sync') createmenus();
 });
 
-chrome.storage.sync.get(null, function(items) {
+chrome.storage.sync.get(null, items => {
 	if (items.translateinto) {
 		createmenus();
 	} else {
 		chrome.contextMenus.removeAll();
-		var parent = chrome.contextMenus.create({"id": "tr_parent", "title": chrome.i18n.getMessage("contextmenu_title"), "contexts":["selection"]});
-		var id = chrome.contextMenus.create({"id": "tr_options", "title": chrome.i18n.getMessage("contextmenu_edit"), "parentId": parent, "contexts":["selection"]});
+		var parent = chrome.contextMenus.create({
+			'id': 'tr_parent',
+			'title': chrome.i18n.getMessage('contextmenu_title'),
+			'contexts': ['selection']
+		});
+		var id = chrome.contextMenus.create({
+			'id': 'tr_options',
+			'title': chrome.i18n.getMessage('contextmenu_edit'),
+			'parentId': parent,
+			'contexts': ['selection']
+		});
 	}
 });
 
-chrome.notifications.onClicked.addListener(function(notification_id) {
-	switch(notification_id) {
-		case "install":
-		click2();
-		break;
-
-		case "upgradedtostorage":
-		click2();
-		break;
-
-		case "reorder":
-		click2();
-		break;
+chrome.notifications.onClicked.addListener(notification_id => {
+	switch (notification_id) {
+		case 'install':
+		case 'upgradedtostorage':
+		case 'reorder':
+			openOptionsPage();
+			break;
 	}
-	chrome.notifications.clear(notification_id, function() {
-
-	});
+	chrome.notifications.clear(notification_id);
 });
 
-chrome.contextMenus.onClicked.addListener(function(info, tab) {
-	if (info.menuItemId == "tr_options") {
-		click2(info, tab);
+chrome.contextMenus.onClicked.addListener((info, tab) => {
+	if (info.menuItemId == 'tr_options') {
+		openOptionsPage();
 	} else {
-		click(info, tab);
+		translationClick(info, tab);
 	}
 });
+
+chrome.browserAction.onClicked.addListener(_ => {
+	openOptionsPage();
+});
diff --git a/src/js/common.js b/src/js/common.js
new file mode 100644
index 0000000..8289ced
--- /dev/null
+++ b/src/js/common.js
@@ -0,0 +1,106 @@
+var isoLangs = {
+  'af': {'name': 'Afrikaans', 'nativeName': 'Afrikaans'},
+  'sq': {'name': 'Albanian', 'nativeName': 'Shqip'},
+  'am': {'name': 'Amharic', 'nativeName': 'አማርኛ'},
+  'ar': {'name': 'Arabic', 'nativeName': 'العربية'},
+  'hy': {'name': 'Armenian', 'nativeName': 'Հայերեն'},
+  'az': {'name': 'Azerbaijani', 'nativeName': 'azərbaycan dili'},
+  'eu': {'name': 'Basque', 'nativeName': 'euskara'},
+  'be': {'name': 'Belarusian', 'nativeName': 'Беларуская'},
+  'bn': {'name': 'Bengali', 'nativeName': 'বাংলা'},
+  'bs': {'name': 'Bosnian', 'nativeName': 'bosanski jezik'},
+  'bg': {'name': 'Bulgarian', 'nativeName': 'български език'},
+  'ca': {'name': 'Catalan', 'nativeName': 'Català'},
+  'ceb': {'name': 'Cebuano', 'nativeName': 'Bisaya'},
+  'ny': {'name': 'Chichewa', 'nativeName': 'chiCheŵa'},
+  'zh': {'name': 'Chinese', 'nativeName': '中文 (Zhōngwén)'},
+  'co': {'name': 'Corsican', 'nativeName': 'corsu'},
+  'hr': {'name': 'Croatian', 'nativeName': 'hrvatski'},
+  'cs': {'name': 'Czech', 'nativeName': 'česky'},
+  'da': {'name': 'Danish', 'nativeName': 'dansk'},
+  'nl': {'name': 'Dutch', 'nativeName': 'Nederlands'},
+  'en': {'name': 'English', 'nativeName': 'English'},
+  'eo': {'name': 'Esperanto', 'nativeName': 'Esperanto'},
+  'et': {'name': 'Estonian', 'nativeName': 'eesti'},
+  'tl': {'name': 'Filipino', 'nativeName': 'Pilipino'},
+  'fi': {'name': 'Finnish', 'nativeName': 'suomi'},
+  'fr': {'name': 'French', 'nativeName': 'français'},
+  'fy': {'name': 'Frisian', 'nativeName': 'Frysk'},
+  'gl': {'name': 'Galician', 'nativeName': 'Galego'},
+  'ka': {'name': 'Georgian', 'nativeName': 'ქართული'},
+  'de': {'name': 'German', 'nativeName': 'Deutsch'},
+  'el': {'name': 'Greek', 'nativeName': 'Ελληνικά'},
+  'gu': {'name': 'Gujarati', 'nativeName': 'ગુજરાતી'},
+  'ht': {'name': 'Haitian Creole', 'nativeName': 'Kreyòl ayisyen'},
+  'ha': {'name': 'Hausa', 'nativeName': 'Hausa'},
+  'haw': {'name': 'Hawaiian', 'nativeName': 'Hausa'},
+  'iw': {'name': 'Hebrew', 'nativeName': 'עברית'},
+  'hi': {'name': 'Hindi', 'nativeName': 'हिन्दी, हिंदी'},
+  'hmn': {'name': 'Hmong', 'nativeName': 'lus Hmoob'},
+  'hu': {'name': 'Hungarian', 'nativeName': 'Magyar'},
+  'is': {'name': 'Icelandic', 'nativeName': 'Íslenska'},
+  'ig': {'name': 'Igbo', 'nativeName': 'Asụsụ Igbo'},
+  'id': {'name': 'Indonesian', 'nativeName': 'Bahasa Indonesia'},
+  'ga': {'name': 'Irish', 'nativeName': 'Gaeilge'},
+  'it': {'name': 'Italian', 'nativeName': 'Italiano'},
+  'ja': {'name': 'Japanese', 'nativeName': '日本語 (にほんご/にっぽんご)'},
+  'jv': {'name': 'Javanese', 'nativeName': 'basa Jawa'},
+  'kn': {'name': 'Kannada', 'nativeName': 'ಕನ್ನಡ'},
+  'kk': {'name': 'Kazakh', 'nativeName': 'Қазақ тілі'},
+  'km': {'name': 'Khmer', 'nativeName': 'ភាសាខ្មែរ'},
+  'ko': {'name': 'Korean', 'nativeName': '한국어 (韓國語)'},
+  'ku': {'name': 'Kurdish (Kurmanji)', 'nativeName': 'Kurdî'},
+  'ky': {'name': 'Kyrgyz', 'nativeName': 'кыргыз тили'},
+  'lo': {'name': 'Lao', 'nativeName': 'ພາສາລາວ'},
+  'la': {'name': 'Latin', 'nativeName': 'latine'},
+  'lv': {'name': 'Latvian', 'nativeName': 'latviešu valoda'},
+  'lt': {'name': 'Lithuanian', 'nativeName': 'lietuvių kalba'},
+  'lb': {'name': 'Luxembourgish', 'nativeName': 'Lëtzebuergesch'},
+  'mk': {'name': 'Macedonian', 'nativeName': 'македонски јазик'},
+  'mg': {'name': 'Malagasy', 'nativeName': 'Malagasy fiteny'},
+  'ms': {'name': 'Malay', 'nativeName': 'bahasa Melayu'},
+  'ml': {'name': 'Malayalam', 'nativeName': 'മലയാളം'},
+  'mt': {'name': 'Maltese', 'nativeName': 'Malti'},
+  'mi': {'name': 'Māori', 'nativeName': 'te reo Māori'},
+  'mr': {'name': 'Marathi', 'nativeName': 'मराठी'},
+  'mn': {'name': 'Mongolian', 'nativeName': 'монгол'},
+  'my': {'name': 'Myanmar', 'nativeName': 'ဗမာစာ'},
+  'ne': {'name': 'Nepali', 'nativeName': 'नेपाली'},
+  'no': {'name': 'Norwegian', 'nativeName': 'Norsk'},
+  'ps': {'name': 'Pashto', 'nativeName': 'پښتو'},
+  'fa': {'name': 'Persian', 'nativeName': 'فارسی'},
+  'pl': {'name': 'Polish', 'nativeName': 'polski'},
+  'pt': {'name': 'Portuguese', 'nativeName': 'Português'},
+  'pa': {'name': 'Punjabi', 'nativeName': 'ਪੰਜਾਬ'},
+  'ro': {'name': 'Romanian', 'nativeName': 'română'},
+  'ru': {'name': 'Russian', 'nativeName': 'русский язык'},
+  'sm': {'name': 'Samoan', 'nativeName': 'gagana faa Samoa'},
+  'gd': {'name': 'Scots Gaelic', 'nativeName': 'Gàidhlig'},
+  'sr': {'name': 'Serbian', 'nativeName': 'српски језик'},
+  'st': {'name': 'Sesotho', 'nativeName': 'Sesotho'},
+  'sn': {'name': 'Shona', 'nativeName': 'chiShona'},
+  'sd': {'name': 'Sindhi', 'nativeName': 'सिन्धी'},
+  'si': {'name': 'Sinhala', 'nativeName': 'සිංහල'},
+  'sk': {'name': 'Slovak', 'nativeName': 'slovenčina'},
+  'sl': {'name': 'Slovenian', 'nativeName': 'slovenščina'},
+  'so': {'name': 'Somali', 'nativeName': 'Soomaaliga'},
+  'es': {'name': 'Spanish', 'nativeName': 'español'},
+  'su': {'name': 'Sundanese', 'nativeName': 'Basa Sunda'},
+  'sw': {'name': 'Swahili', 'nativeName': 'Kiswahili'},
+  'sv': {'name': 'Swedish', 'nativeName': 'svenska'},
+  'tg': {'name': 'Tajik', 'nativeName': 'тоҷикӣ'},
+  'ta': {'name': 'Tamil', 'nativeName': 'தமிழ்'},
+  'te': {'name': 'Telugu', 'nativeName': 'తెలుగు'},
+  'th': {'name': 'Thai', 'nativeName': 'ไทย'},
+  'tr': {'name': 'Turkish', 'nativeName': 'Türkçe'},
+  'uk': {'name': 'Ukrainian', 'nativeName': 'українська'},
+  'ur': {'name': 'Urdu', 'nativeName': 'اردو'},
+  'uz': {'name': 'Uzbek', 'nativeName': 'zbek'},
+  'vi': {'name': 'Vietnamese', 'nativeName': 'Tiếng Việt'},
+  'cy': {'name': 'Welsh', 'nativeName': 'Cymraeg'},
+  'xh': {'name': 'Xhosa', 'nativeName': 'isiXhosa'},
+  'yi': {'name': 'Yiddish', 'nativeName': 'ייִדיש'},
+  'yo': {'name': 'Yoruba', 'nativeName': 'Yorùbá'},
+  'za': {'name': 'Zhuang, Chuang', 'nativeName': 'Saɯ cueŋƅ'},
+  'zu': {'name': 'Zulu', 'nativeName': 'isiZulu'}
+};
diff --git a/src/js/options.js b/src/js/options.js
index 147b02e..eba0a1a 100644
--- a/src/js/options.js
+++ b/src/js/options.js
@@ -1,16 +1,3 @@
-var isoLangs={af:{name:"Afrikaans",nativeName:"Afrikaans"},sq:{name:"Albanian",nativeName:"Shqip"},am:{name:"Amharic",nativeName:"\u12a0\u121b\u122d\u129b"},ar:{name:"Arabic",nativeName:"\u0627\u0644\u0639\u0631\u0628\u064a\u0629"},hy:{name:"Armenian",nativeName:"\u0540\u0561\u0575\u0565\u0580\u0565\u0576"},az:{name:"Azerbaijani",nativeName:"az\u0259rbaycan dili"},eu:{name:"Basque",nativeName:"euskara"},be:{name:"Belarusian",nativeName:"\u0411\u0435\u043b\u0430\u0440\u0443\u0441\u043a\u0430\u044f"},
-bn:{name:"Bengali",nativeName:"\u09ac\u09be\u0982\u09b2\u09be"},bs:{name:"Bosnian",nativeName:"bosanski jezik"},bg:{name:"Bulgarian",nativeName:"\u0431\u044a\u043b\u0433\u0430\u0440\u0441\u043a\u0438 \u0435\u0437\u0438\u043a"},ca:{name:"Catalan",nativeName:"Catal\u00e0"},ceb:{name:"Cebuano",nativeName:"Bisaya"},ny:{name:"Chichewa",nativeName:"chiChe\u0175a"},zh:{name:"Chinese",nativeName:"\u4e2d\u6587 (Zh\u014dngw\u00e9n)"},co:{name:"Corsican",nativeName:"corsu"},hr:{name:"Croatian",nativeName:"hrvatski"},
-cs:{name:"Czech",nativeName:"\u010desky"},da:{name:"Danish",nativeName:"dansk"},nl:{name:"Dutch",nativeName:"Nederlands"},en:{name:"English",nativeName:"English"},eo:{name:"Esperanto",nativeName:"Esperanto"},et:{name:"Estonian",nativeName:"eesti"},tl:{name:"Filipino",nativeName:"Pilipino"},fi:{name:"Finnish",nativeName:"suomi"},fr:{name:"French",nativeName:"fran\u00e7ais"},fy:{name:"Frisian",nativeName:"Frysk"},gl:{name:"Galician",nativeName:"Galego"},ka:{name:"Georgian",nativeName:"\u10e5\u10d0\u10e0\u10d7\u10e3\u10da\u10d8"},
-de:{name:"German",nativeName:"Deutsch"},el:{name:"Greek",nativeName:"\u0395\u03bb\u03bb\u03b7\u03bd\u03b9\u03ba\u03ac"},gu:{name:"Gujarati",nativeName:"\u0a97\u0ac1\u0a9c\u0ab0\u0abe\u0aa4\u0ac0"},ht:{name:"Haitian Creole",nativeName:"Krey\u00f2l ayisyen"},ha:{name:"Hausa",nativeName:"Hausa"},haw:{name:"Hawaiian",nativeName:"Hausa"},iw:{name:"Hebrew",nativeName:"\u05e2\u05d1\u05e8\u05d9\u05ea"},hi:{name:"Hindi",nativeName:"\u0939\u093f\u0928\u094d\u0926\u0940, \u0939\u093f\u0902\u0926\u0940"},hmn:{name:"Hmong",
-nativeName:"lus Hmoob"},hu:{name:"Hungarian",nativeName:"Magyar"},is:{name:"Icelandic",nativeName:"\u00cdslenska"},ig:{name:"Igbo",nativeName:"As\u1ee5s\u1ee5 Igbo"},id:{name:"Indonesian",nativeName:"Bahasa Indonesia"},ga:{name:"Irish",nativeName:"Gaeilge"},it:{name:"Italian",nativeName:"Italiano"},ja:{name:"Japanese",nativeName:"\u65e5\u672c\u8a9e (\u306b\u307b\u3093\u3054\uff0f\u306b\u3063\u307d\u3093\u3054)"},jv:{name:"Javanese",nativeName:"basa Jawa"},kn:{name:"Kannada",nativeName:"\u0c95\u0ca8\u0ccd\u0ca8\u0ca1"},
-kk:{name:"Kazakh",nativeName:"\u049a\u0430\u0437\u0430\u049b \u0442\u0456\u043b\u0456"},km:{name:"Khmer",nativeName:"\u1797\u17b6\u179f\u17b6\u1781\u17d2\u1798\u17c2\u179a"},ko:{name:"Korean",nativeName:"\ud55c\uad6d\uc5b4 (\u97d3\u570b\u8a9e)"},ku:{name:"Kurdish (Kurmanji)",nativeName:"Kurd\u00ee"},ky:{name:"Kyrgyz",nativeName:"\u043a\u044b\u0440\u0433\u044b\u0437 \u0442\u0438\u043b\u0438"},lo:{name:"Lao",nativeName:"\u0e9e\u0eb2\u0eaa\u0eb2\u0ea5\u0eb2\u0ea7"},la:{name:"Latin",nativeName:"latine"},
-lv:{name:"Latvian",nativeName:"latvie\u0161u valoda"},lt:{name:"Lithuanian",nativeName:"lietuvi\u0173 kalba"},lb:{name:"Luxembourgish",nativeName:"L\u00ebtzebuergesch"},mk:{name:"Macedonian",nativeName:"\u043c\u0430\u043a\u0435\u0434\u043e\u043d\u0441\u043a\u0438 \u0458\u0430\u0437\u0438\u043a"},mg:{name:"Malagasy",nativeName:"Malagasy fiteny"},ms:{name:"Malay",nativeName:"bahasa Melayu"},ml:{name:"Malayalam",nativeName:"\u0d2e\u0d32\u0d2f\u0d3e\u0d33\u0d02"},mt:{name:"Maltese",nativeName:"Malti"},
-mi:{name:"M\u0101ori",nativeName:"te reo M\u0101ori"},mr:{name:"Marathi",nativeName:"\u092e\u0930\u093e\u0920\u0940"},mn:{name:"Mongolian",nativeName:"\u043c\u043e\u043d\u0433\u043e\u043b"},my:{name:"Myanmar",nativeName:"\u1017\u1019\u102c\u1005\u102c"},ne:{name:"Nepali",nativeName:"\u0928\u0947\u092a\u093e\u0932\u0940"},no:{name:"Norwegian",nativeName:"Norsk"},ps:{name:"Pashto",nativeName:"\u067e\u069a\u062a\u0648"},fa:{name:"Persian",nativeName:"\u0641\u0627\u0631\u0633\u06cc"},pl:{name:"Polish",
-nativeName:"polski"},pt:{name:"Portuguese",nativeName:"Portugu\u00eas"},pa:{name:"Punjabi",nativeName:"\u0a2a\u0a70\u0a1c\u0a3e\u0a2c"},ro:{name:"Romanian",nativeName:"rom\u00e2n\u0103"},ru:{name:"Russian",nativeName:"\u0440\u0443\u0441\u0441\u043a\u0438\u0439 \u044f\u0437\u044b\u043a"},sm:{name:"Samoan",nativeName:"gagana faa Samoa"},gd:{name:"Scots Gaelic",nativeName:"G\u00e0idhlig"},sr:{name:"Serbian",nativeName:"\u0441\u0440\u043f\u0441\u043a\u0438 \u0458\u0435\u0437\u0438\u043a"},st:{name:"Sesotho",
-nativeName:"Sesotho"},sn:{name:"Shona",nativeName:"chiShona"},sd:{name:"Sindhi",nativeName:"\u0938\u093f\u0928\u094d\u0927\u0940"},si:{name:"Sinhala",nativeName:"\u0dc3\u0dd2\u0d82\u0dc4\u0dbd"},sk:{name:"Slovak",nativeName:"sloven\u010dina"},sl:{name:"Slovenian",nativeName:"sloven\u0161\u010dina"},so:{name:"Somali",nativeName:"Soomaaliga"},es:{name:"Spanish",nativeName:"espa\u00f1ol"},su:{name:"Sundanese",nativeName:"Basa Sunda"},sw:{name:"Swahili",nativeName:"Kiswahili"},sv:{name:"Swedish",nativeName:"svenska"},
-tg:{name:"Tajik",nativeName:"\u0442\u043e\u04b7\u0438\u043a\u04e3"},ta:{name:"Tamil",nativeName:"\u0ba4\u0bae\u0bbf\u0bb4\u0bcd"},te:{name:"Telugu",nativeName:"\u0c24\u0c46\u0c32\u0c41\u0c17\u0c41"},th:{name:"Thai",nativeName:"\u0e44\u0e17\u0e22"},tr:{name:"Turkish",nativeName:"T\u00fcrk\u00e7e"},uk:{name:"Ukrainian",nativeName:"\u0443\u043a\u0440\u0430\u0457\u043d\u0441\u044c\u043a\u0430"},ur:{name:"Urdu",nativeName:"\u0627\u0631\u062f\u0648"},uz:{name:"Uzbek",nativeName:"zbek"},vi:{name:"Vietnamese",
-nativeName:"Ti\u1ebfng Vi\u1ec7t"},cy:{name:"Welsh",nativeName:"Cymraeg"},xh:{name:"Xhosa",nativeName:"isiXhosa"},yi:{name:"Yiddish",nativeName:"\u05d9\u05d9\u05b4\u05d3\u05d9\u05e9"},yo:{name:"Yoruba",nativeName:"Yor\u00f9b\u00e1"},za:{name:"Zhuang, Chuang",nativeName:"Sa\u026f cue\u014b\u0185"},zu:{name:"Zulu",nativeName:"isiZulu"}};
-
 function $(selector) {
     return document.querySelector(selector);
 }
@@ -24,154 +11,187 @@
 }
 
 function i18n() {
-    $("#welcome").innerHTML = chrome.i18n.getMessage("options_welcome");
-    $("#introduction").innerHTML = chrome.i18n.getMessage("options_introduction");
-    //$("#languageselectheader").innerHTML = chrome.i18n.getMessage("options_languageselectheader");
-    $("#otheroptionsheader").innerHTML = chrome.i18n.getMessage("options_otheroptionsheader");
-    $("#varioustabs_label").innerHTML = chrome.i18n.getMessage("options_tabsoption_1");
-    $("#uniquetab_label").innerHTML = chrome.i18n.getMessage("options_tabsoption_2");
-    $("#panel_label").innerHTML = chrome.i18n.getMessage("options_tabsoption_3");
-    $("#languages_add").innerHTML = chrome.i18n.getMessage("options_addlanguage_addbutton");
-    $("#save").innerHTML = chrome.i18n.getMessage("options_savebutton");
-    $("#credits").innerHTML = chrome.i18n.getMessage("options_credits");
-    $("#credits_dialog h3").innerHTML = chrome.i18n.getMessage("options_credits");
-    $("#languages_add_ok").innerHTML = chrome.i18n.getMessage("options_ok");
-    $("#languages_add_cancel").innerHTML = chrome.i18n.getMessage("options_cancel");
-    $("#credits_ok").innerHTML = chrome.i18n.getMessage("options_ok");
-    $("#languages_add_dialog h3").innerHTML = chrome.i18n.getMessage("options_addlanguage");
-    $("#language_label").innerHTML = chrome.i18n.getMessage("options_language_label");
+    $all('[data-i18n]').forEach(el => {
+        el.innerHTML =
+            chrome.i18n.getMessage('options_' + el.getAttribute('data-i18n'));
+    });
 }
 
-function print_list_modal() {
-    $("#select_language").innerHTML = "";
+function printListModal() {
+    $('#select_language').textContent = '';
     var heysortable = sortable.toArray();
     for (var language in isoLangs) {
         if (!inArray(language, heysortable)) {
             var el = document.createElement('option');
             el.setAttribute('value', language);
-            el.innerText = isoLangs[language]["name"]+" ("+isoLangs[language]["nativeName"]+")";
-            $("#select_language").appendChild(el);
+            el.innerText = isoLangs[language]['name'] + ' (' +
+                isoLangs[language]['nativeName'] + ')';
+            $('#select_language').appendChild(el);
         }
     }
 }
 
 function init() {
     i18n();
-    chrome.storage.sync.get(null, function(items) {
+    chrome.storage.sync.get(null, items => {
         // If no settings are set
         if (isEmpty(items)) {
-            items = {'translateinto': {}, 'uniquetab': ''};
-            chrome.storage.sync.set({'translateinto': {}, 'uniquetab': ''});
+            items = {
+                translateinto: {},
+                uniquetab: '',
+            };
+            chrome.storage.sync.set(items);
         }
 
         // Check the checkbox of the window opening
-        if (items.uniquetab === "yep")
-            $("#uniquetab").checked = true;
-        if (items.uniquetab === "")
-            $("#varioustabs").checked = true;
-        if (items.uniquetab === "panel")
-            $("#panel").checked = true;
+        if (items.uniquetab === 'yep') $('#uniquetab').checked = true;
+        if (items.uniquetab === '') $('#varioustabs').checked = true;
+        if (items.uniquetab === 'panel') $('#panel').checked = true;
 
         // Add event listeners for certain buttons and links
-        $("#panelsflag").addEventListener('click', function() { event.preventDefault(); chrome.tabs.create({url: 'chrome://flags/#enable-panels'}); });
-        $("#save").addEventListener('click', function() {
-            save_options();
+        $('#panelsflag').addEventListener('click', _ => {
+            event.preventDefault();
+            chrome.tabs.create({url: 'chrome://flags/#enable-panels'});
+        });
+
+        $('#save').addEventListener('click', _ => {
+            saveOptions();
         });
 
         // Print selected language list
         var languages = items.translateinto;
 
         if (languages) {
-            for (var language_id in languages) {
+            for (var language_id of Object.keys(languages)) {
                 var language = languages[language_id];
                 var el = document.createElement('li');
                 el.setAttribute('data-language', language);
                 el.setAttribute('data-id', language);
-                el.innerHTML = isoLangs[language]["name"]+" ("+isoLangs[language]["nativeName"]+")"+"<span data-language='"+language+"' class='delete'>x</span>";
-                $("#languages").appendChild(el);
-                $("#languages li[data-language="+language+"] .delete").addEventListener('click', function() {
-                    $("#languages").removeChild($("li[data-language="+this.getAttribute("data-language")+"]"));
-                    print_list_modal();
-                });
+                el.innerHTML = isoLangs[language]['name'] + ' (' +
+                    isoLangs[language]['nativeName'] + ')' +
+                    '<span data-language=\'' + language +
+                    '\' class=\'delete\'>x</span>';
+                $('#languages').appendChild(el);
+                $('#languages li[data-language=' + language + '] .delete')
+                    .addEventListener('click', function() {
+                        $('#languages')
+                            .removeChild(
+                                $('li[data-language=' +
+                                  this.getAttribute('data-language') + ']'));
+                        printListModal();
+                    });
             }
         }
 
         // Initiate Sortable
-        sortable = new Sortable($("#languages"), {
-            animation: 150
-        });
+        sortable = new Sortable($('#languages'), {animation: 150});
 
         // Handling The Dialog
-        $("#languages_add").addEventListener('click', function() { $("dialog#languages_add_dialog").showModal(); $("#select_language").focus(); });
-        $("#languages_add_cancel").addEventListener('click', function() { $("dialog#languages_add_dialog").close(); });
-        $("#languages_add_ok").addEventListener('click', function() {
+        $('#languages_add').addEventListener('click', _ => {
+            $('dialog#languages_add_dialog').showModal();
+            $('#select_language').focus();
+        });
+
+        $('#languages_add_cancel').addEventListener('click', _ => {
+            $('dialog#languages_add_dialog').close();
+        });
+
+        $('#languages_add_ok').addEventListener('click', _ => {
             var el = document.createElement('li');
-            var language = $("#select_language").value;
+            var language = $('#select_language').value;
             if (inArray(language, sortable.toArray())) {
                 return;
             }
             el.setAttribute('data-language', language);
             el.setAttribute('data-id', language);
-            el.innerHTML = isoLangs[language]["name"]+" ("+isoLangs[language]["nativeName"]+")"+"<span data-language='"+language+"' class='delete'>x</span>";
-            $("#languages").appendChild(el);
-            var selection = $("#select_language option[value="+language+"]");
+            el.innerHTML = isoLangs[language]['name'] + ' (' +
+                isoLangs[language]['nativeName'] + ')' +
+                '<span data-language=\'' + language +
+                '\' class=\'delete\'>x</span>';
+            $('#languages').appendChild(el);
+            var selection =
+                $('#select_language option[value=' + language + ']');
             selection.parentNode.removeChild(selection);
-            $("#languages li[data-id="+language+"] .delete").addEventListener('click', function() {
-                $("#languages").removeChild($("li[data-language="+this.getAttribute("data-language")+"]"));
-                print_list_modal();
-            });
-            $("dialog").close();
+            $('#languages li[data-id=' + language + '] .delete')
+                .addEventListener('click', function() {
+                    $('#languages')
+                        .removeChild(
+                            $('li[data-language=' +
+                              this.getAttribute('data-language') + ']'));
+                    printListModal();
+                });
+            $('dialog').close();
         });
 
         // About credits...
-        var xhr = new XMLHttpRequest();
-        xhr.onreadystatechange = function() {
-            if (xhr.readyState == 4 && xhr.status == 200) {
-                var json = JSON.parse(xhr.responseText), printhtml = "";
-                for (var item in json) {
-                    printhtml += "<div>";
-                    if (json[item].url) {
-                        printhtml += "<a href='"+json[item].url+"' class='homepage' target='_blank'>"+chrome.i18n.getMessage("options_credits_homepage")+"</a>";
+        fetch('json/credits.json')
+            .then(res => res.json())
+            .then(json => {
+                var content = $('dialog#credits_dialog .content_area');
+                json.forEach(item => {
+                    var div = document.createElement('div');
+                    if (item.url) {
+                        var a = document.createElement('a');
+                        a.classList.add('homepage');
+                        a.href = item.url;
+                        a.target = '_blank';
+                        a.textContent =
+                            chrome.i18n.getMessage('options_credits_homepage');
+                        div.append(a);
                     }
-                    printhtml += "<h4>"+json[item].name+"</h4>";
-                    if (json[item].author) {
-                        printhtml += "<p class='author'>"+chrome.i18n.getMessage("options_credits_by")+" "+json[item].author;
-                    }
-                    if (json[item].license) {
-                        printhtml += " – "+json[item].license+"</p>";
-                    } else {
-                        printhtml += "</p>";
-                    }
-                    printhtml += "</div>";
-                }
-                $("dialog#credits_dialog .content_area").innerHTML = printhtml;
-                window.onhashchange = function() {
-                    if (location.hash == "#credits") {
-                        $("dialog#credits_dialog").showModal();
-                        $("#credits_ok").focus();
-                    }
-                }
-                if (location.hash == "#credits") {
-                    $("dialog#credits_dialog").showModal();
-                    $("#credits_ok").focus();
-                }
-                $("#credits_ok").addEventListener('click', function() { $("dialog#credits_dialog").close(); });
-                $("dialog#credits_dialog").addEventListener('close', function() { history.pushState("", document.title, window.location.pathname + window.location.search); });
-            }
-        }
-        xhr.open("GET", "json/credits.json", true);
-        xhr.send();
 
-        // Print language list in the modal dialog
-        print_list_modal();
+                    var h4 = document.createElement('h4');
+                    h4.textContent = item.name;
+                    div.append(h4);
+
+                    if (item.author) {
+                        var p = document.createElement('p');
+                        p.classList.add('author');
+                        p.textContent =
+                            chrome.i18n.getMessage('options_credits_by') + ' ' +
+                            item.author +
+                            (item.license ? ' - ' + item.license : '');
+                        div.append(p);
+                    }
+                    content.append(div);
+                });
+
+                window.onhashchange = function() {
+                    if (location.hash == '#credits') {
+                        $('dialog#credits_dialog').showModal();
+                        $('#credits_ok').focus();
+                    }
+                };
+
+                if (location.hash == '#credits') {
+                    $('dialog#credits_dialog').showModal();
+                    $('#credits_ok').focus();
+                }
+
+                $('#credits_ok').addEventListener('click', _ => {
+                    $('dialog#credits_dialog').close();
+                });
+                $('dialog#credits_dialog').addEventListener('close', _ => {
+                    history.pushState(
+                        '', document.title,
+                        window.location.pathname + window.location.search);
+                });
+
+                // Print language list in the modal dialog
+                printListModal();
+            })
+            .catch(err => console.log(err));
     });
 }
 
-function save_options() {
-    var languages = document.getElementById("languages");
-    var options = {"uniquetab": "", "translateinto": {}};
+function saveOptions() {
+    var languages = document.getElementById('languages');
+    var options = {
+        uniquetab: '',
+        translateinto: {},
+    };
 
-    options.uniquetab = radio_selected("uniquetab");
+    options.uniquetab = radioSelected('uniquetab');
 
     var selected_languages = sortable.toArray();
 
@@ -189,29 +209,19 @@
         background.translator_window = false;
         window.close();
     });
-
-    // We don't need the following code because the background.js is already listening to changes in chrome.sync ;-) Yeeey!
-    //chrome.extension.getBackgroundPage().createmenus(JSON.stringify(options));
 }
 
-function toObject(arr) {
-    var rv = {};
-    for (var i = 0; i < arr.length; ++i)
-        if (arr[i] !== undefined) rv[i] = arr[i];
-    return rv;
-}
-
-function radio_selected(a) {
+function radioSelected(a) {
     var elements = document.getElementsByName(a);
 
-    for (var i=0; i<elements.length; i++)
+    for (var i = 0; i < elements.length; i++)
         if (elements[i].checked) return elements[i].value;
 }
 
 function inArray(needle, haystack) {
     var length = haystack.length;
-    for(var i = 0; i < length; i++) {
-        if(haystack[i] == needle) return true;
+    for (var i = 0; i < length; i++) {
+        if (haystack[i] == needle) return true;
     }
     return false;
 }
diff --git a/src/json/credits.json b/src/json/credits.json
index c0c34e4..e2e9882 100644
--- a/src/json/credits.json
+++ b/src/json/credits.json
@@ -1,30 +1,30 @@
-{
-	"icon": {
+[
+	{
 		"name": "Metro Uinvert Dock Icon Set",
 		"url": "http://dakirby309.deviantart.com/art/Metro-Uinvert-Dock-Icon-Set-725-Icons-294529071",
 		"author": "dAKirby309"
 	},
-	"translation": {
+	{
 		"name": "Russian Translation",
 		"url": "https://code.google.com/r/sashasimkin-translateselectedtext/source/detail?r=fc4e58ee0d69929d610a84a7600338e99b9d3d83",
 		"author": "Alexander Simkin"
 	},
-	"sortable": {
+	{
 		"name": "Sortable",
 		"url": "https://github.com/RubaXa/Sortable",
 		"author": "Lebedev Konstantin",
 		"license": "MIT License"
 	},
-	"widgets": {
+	{
 		"name": "Chromium",
 		"url": "https://code.google.com/p/chromium/",
 		"author": "The Chromium Authors",
 		"license": "BSD-like License"
 	},
-	"languages": {
+	{
 		"name": "What-2-Nite",
 		"url": "https://github.com/enricolucia/what-2-nite/blob/master/isoLangs.json",
 		"author": "Google, Inc.",
 		"license": "MIT License"
 	}
-}
+]
diff --git a/src/options.html b/src/options.html
index 8cb7196..104cacd 100644
--- a/src/options.html
+++ b/src/options.html
@@ -4,55 +4,56 @@
 		<meta charset="UTF-8">
 		<title>Options</title>
 		<link rel="stylesheet" type="text/css" href="css/options.css">
-		<script src="js/options.js"></script>
-		<script src="js/sortable.js"></script>
 		<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,700italic,400italic' rel='stylesheet' type='text/css'>
-
 	</head>
 	<body>
 		<div id="credits_container">
-			<a href="#credits" id="credits"></a>
+			<a href="#credits" id="credits" data-i18n="credits"></a>
 		</div>
 
-		<h1 id="welcome"></h1>
+		<h1 id="welcome" data-i18n="welcome"></h1>
 
-		<p id="introduction"></p>
+		<p id="introduction" data-i18n="introduction"></p>
 
 		<div id="languages_container">
 			<ul id="languages"></ul>
 		</div>
 		<div id="languages_footer">
-			<button id="languages_add"></button>
+			<button id="languages_add" data-i18n="addlanguage_addbutton"></button>
 		</div>
 
-		<h2 id="otheroptionsheader"></h2>
+		<h2 id="otheroptionsheader" data-i18n="otheroptionsheader"></h2>
 
 		<div id="otheroptions">
-			<p><input type="radio" name="uniquetab" id="varioustabs" value=""> <label id="varioustabs_label" for="varioustabs"></label></p>
-			<p><input type="radio" name="uniquetab" id="uniquetab" value="yep"> <label id="uniquetab_label" for="uniquetab"></label></p>
-			<p><input type="radio" name="uniquetab" id="panel" value="panel"> <label id="panel_label" for="panel"></label></p>
+			<p><input type="radio" name="uniquetab" id="varioustabs" value=""> <label id="varioustabs_label" for="varioustabs" data-i18n="tabsoption_1"></label></p>
+			<p><input type="radio" name="uniquetab" id="uniquetab" value="yep"> <label id="uniquetab_label" for="uniquetab" data-i18n="tabsoption_2"></label></p>
+			<p><input type="radio" name="uniquetab" id="panel" value="panel"> <label id="panel_label" for="panel" data-i18n="tabsoption_3"></label></p>
 		</div>
 
-		<button id="save"></button>
+		<button id="save" data-i18n="savebutton"></button>
 
 		<dialog id="languages_add_dialog">
-		  <h3></h3>
+		  <h3 data-i18n="addlanguage"></h3>
 		  <div class="content_area">
-		    <label id="language_label" for="select_language"></label>
+		    <label id="language_label" for="select_language" data-i18n="language_label"></label>
 		    <select id="select_language"></select>
 		  </div>
 		  <div class="action_buttons">
-		    <button id="languages_add_cancel"></button>
-		    <button id="languages_add_ok"></button>
+		    <button id="languages_add_cancel" data-i18n="cancel"></button>
+		    <button id="languages_add_ok" data-i18n="ok"></button>
 		  </div>
 		</dialog>
 		<dialog id="credits_dialog">
-		  <h3></h3>
+		  <h3 data-i18n="credits"></h3>
 		  <div class="content_area">
 		  </div>
 		  <div class="action_buttons">
-		    <button id="credits_ok"></button>
+		    <button id="credits_ok" data-i18n="ok"></button>
 		  </div>
 		</dialog>
+
+    <script src="js/common.js"></script>
+    <script src="js/options.js"></script>
+		<script src="js/sortable.js"></script>
 	</body>
 </html>