chore(MV3)[WIP]: storing settings work, trying to store options…

ffoodd · Feb 23, 2023 · e03c933 · e03c933
1 parent 80a0961
commit e03c933
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 47 deletions.
diff --git a/manifest-firefox.json b/manifest-firefox.json
@@ -14,7 +14,7 @@
 		"scripting",
 		"tabs"
 	],
-	"browser_action": {
+	"action": {
 		"default_title": "a11y.css",
 		"default_popup": "popup/index.html",
 		"default_icon": {
@@ -44,10 +44,17 @@
 		"128": "icons/a11y-css_128.png"
 	},
 	"web_accessible_resources": [
-		"icons/info.svg",
-		"icons/ko.svg",
-		"icons/ok.svg",
-		"scripts/injected/checkalts.js",
-		"css/*"
+		{
+			"resources": [
+				"icons/info.svg",
+				"icons/ko.svg",
+				"icons/ok.svg",
+				"scripts/injected/checkalts.js",
+				"css/*"
+			],
+			"matches": [
+				"<all_urls>"
+			]
+		}
 	]
 }
diff --git a/scripts/background/main.js b/scripts/background/main.js
@@ -12,16 +12,28 @@ function onCleared() {
 
 chrome.tabs.onUpdated.addListener((tabId, changeInfo) => {
 	if (changeInfo.status === "complete") {
-		chrome.storage.local.get(String(tabId))
-			.then(settings => {
-				// @todo Need to check for level setting
-				Object.keys(settings).forEach(setting => { settings[setting] = false });
-				chrome.storage.local.set({[String(tabId)]: { settings }})
-					.then(onGot, onError);
-			}).then(onGot, onError);
+		// @todo Loop over each setting / option / reporter and update
+		for (setting in ['lang', 'outline', 'spacing']) {
+			chrome.storage.local.get([`${tabId}-${setting}`])
+				.then(setting => {
+					chrome.storage.local.set({[`${tabId}-${setting}`]: false})
+				}).then(onGot, onError);
+		}
+
 	}
 });
 
 chrome.runtime.onStartup.addListener(() => {
 	chrome.storage.local.clear().then(onCleared, onError)
 });
+
+// @note Debugging storage
+// @see https://developer.chrome.com/docs/extensions/reference/storage/#synchronous-response-to-storage-updates
+chrome.storage.onChanged.addListener((changes, namespace) => {
+	for (let [key, { oldValue, newValue }] of Object.entries(changes)) {
+		console.log(
+			`Storage key "${key}" in namespace "${namespace}" changed.`,
+			`Old value was "${oldValue}", new value is "${newValue}".`
+		);
+	}
+});
diff --git a/scripts/locales.js b/scripts/locales.js
@@ -18,7 +18,7 @@ const locales = [
 const localeStrings = {
 	"en":{
 		"_LOCALE":"English",
-		"btn-a11y-css":"Show",
+		"a11ycssBtnApply":"Show",
 		"a11ycssBtnClear":"Clear",
 		"a11ycssLanguageLabel":"Language",
 		"a11ycssLevel_all": "Everything",
@@ -49,7 +49,7 @@ const localeStrings = {
 	},
 	"fr":{
 		"_LOCALE":"Français",
-		"btn-a11y-css": "Afficher",
+		"a11ycssBtnApply": "Afficher",
 		"a11ycssBtnClear": "Masquer",
 		"a11ycssLanguageLabel": "Langue",
 		"a11ycssLevel_all": "Tout",
@@ -80,7 +80,7 @@ const localeStrings = {
 	},
 	"pl":{
 		"_LOCALE":"Polski",
-		"btn-a11y-css":"Pokaż",
+		"a11ycssBtnApply":"Pokaż",
 		"a11ycssBtnClear":"Wyczyść",
 		"a11ycssLanguageLabel":"Język",
 		"a11ycssLevel_all": "Wszystko",
@@ -111,7 +111,7 @@ const localeStrings = {
 	},
 	"gr":{
 		"_LOCALE":"Ελληνικά",
-		"btn-a11y-css":"Εμφάνιση",
+		"a11ycssBtnApply":"Εμφάνιση",
 		"a11ycssBtnClear":"Εκκαθάριση",
 		"a11ycssLanguageLabel":"Γλώσσα",
 		"a11ycssLevel_all": "Όλα",
@@ -142,7 +142,7 @@ const localeStrings = {
 	},
 	"es":{
 		"_LOCALE":"Español",
-		"btn-a11y-css":"Mostrar",
+		"a11ycssBtnApply":"Mostrar",
 		"a11ycssBtnClear":"Limpiar",
 		"a11ycssLanguageLabel":"Idioma",
 		"a11ycssLevel_all": "Todo",
@@ -173,7 +173,7 @@ const localeStrings = {
 	},
 	"ru": {
 		"_LOCALE":"Русский",
-		"btn-a11y-css":"Показать",
+		"a11ycssBtnApply":"Показать",
 		"a11ycssBtnClear":"Скрыть",
 		"a11ycssLanguageLabel":"Язык",
 		"a11ycssLevel_all": "Все",

diff --git a/scripts/option.js b/scripts/option.js
@@ -8,7 +8,8 @@ class Option extends Setting {
 		const selected = selectedOption ? selectedOption.value : 'all';
 		this.updateOptionState(name, options);
 		button.addEventListener('click', () => {
-			this.clickHandler(name, button, `${name}-${locale}_${selected}`);
+			// @todo sue super.clickHandler() ? How to use parent class method?
+			this.clickHandler(name, button, `${name}-${locale}_${selected}`, true);
 			this.storeOption(name, selected);
 		});
 	}
@@ -20,16 +21,12 @@ class Option extends Setting {
 			});
 	}
 
-	updateOptionState(setting, options) {
+	updateOptionState(name, options) {
 		chrome.tabs.query({ active: true, lastFocusedWindow: true })
 			.then(tabs => {
-				chrome.storage.local.get([String(tabs[0].id)])
-					.then(settings => {
-						if (settings && settings[setting]) {
-							options.forEach(key => {
-								key.checked = key.value === settings[setting];
-							});
-						}
+				chrome.storage.local.get([`${tabs[0].id}-${name}-option`])
+					.then(setting => {
+						options.querySelector(`[value="${setting}"]`).checked = true;
 					}).then(this.onGot, this.onError);
 			}).then(this.onGot, this.onError);
 	}

diff --git a/scripts/setting.js b/scripts/setting.js
@@ -12,10 +12,14 @@ class Setting {
 	}
 
 	onGot(item) {
-		console.info(`a11y.css got`, item);
+		if (item) {
+			console.info(`a11y.css got`, item);
+		} else {
+			console.info('Item was set');
+		}
 	}
 
-	clickHandler(name, button, filename = name) {
+	clickHandler(name, button, filename = name, option = false) {
 		let checked = button.getAttribute('aria-checked') === 'true' || false;
 		chrome.tabs.query({ active: true, lastFocusedWindow: true })
 			.then(tabs => {
@@ -31,32 +35,27 @@ class Setting {
 					});
 				}
 
-				button.setAttribute('aria-checked', String(!checked));
-				this.storeStatus(name, !checked, tabs[0].id);
+				button.setAttribute('aria-checked', !checked);
+				if (option && filename !== name) {
+					this.storeStatus(`${name}-option`, filename.split('_')[0], tabs[0].id);
+				} else {
+					this.storeStatus(name, !checked, tabs[0].id);
+				}
 			});
 	}
 
 	storeStatus(name, status, tabId) {
-		chrome.storage.local.get([String(tabId)]).then(
-			settings => {
-				chrome.storage.local.set({
-					[String(tabId)]: {
-						...settings,
-						[name]: status
-					}
-				}).then(this.onGot, this.onError);
-			}
-		);
+		chrome.storage.local.set({
+			[`${tabId}-${name}`]: status
+		}).then(this.onGot, this.onError);
 	}
 
 	updateButtonState(setting, button) {
 		chrome.tabs.query({ active: true, lastFocusedWindow: true })
 			.then(tabs => {
-				chrome.storage.local.get([String(tabs[0].id)])
-					.then(settings => {
-						if (settings && settings[setting]) {
-							button.setAttribute('aria-checked', String(settings[setting]));
-						}
+				chrome.storage.local.get([`${tabs[0].id}-${name}`])
+					.then(setting => {
+						button.setAttribute('aria-checked', String(setting));
 					}).then(this.onGot, this.onError);
 			}).then(this.onGot, this.onError);
 	}