From 76cedad70d43d01d4a677a66f7b2993ea29fd3fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Wed, 22 Feb 2023 23:53:56 +0100 Subject: [PATCH] =?UTF-8?q?chore(MV3)[WIP]:=20storing=20settings=20work,?= =?UTF-8?q?=20trying=20to=20store=20options=E2=80=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- manifest-firefox.json | 19 +++++++++++++------ scripts/background/main.js | 26 +++++++++++++++++++------- scripts/locales.js | 12 ++++++------ scripts/option.js | 23 ++++++----------------- scripts/setting.js | 37 ++++++++++++++++++------------------- 5 files changed, 62 insertions(+), 55 deletions(-) diff --git a/manifest-firefox.json b/manifest-firefox.json index 7a19ea6..c30fd18 100644 --- 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": [ + "" + ] + } ] } diff --git a/scripts/background/main.js b/scripts/background/main.js index 5861982..0e18ebe 100644 --- 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 index fc85f82..17106a2 100644 --- 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 index c159e77..dfbd033 100644 --- a/scripts/option.js +++ b/scripts/option.js @@ -8,28 +8,17 @@ class Option extends Setting { const selected = selectedOption ? selectedOption.value : 'all'; this.updateOptionState(name, options); button.addEventListener('click', () => { - this.clickHandler(name, button, `${name}-${locale}_${selected}`); - this.storeOption(name, selected); + // @todo sue super.clickHandler() ? How to use parent class method? + this.clickHandler(name, button, `${name}-${locale}_${selected}`, true); }); } - storeOption(name, selected) { + updateOptionState(name, options) { chrome.tabs.query({ active: true, lastFocusedWindow: true }) .then(tabs => { - this.storeStatus(`${name}-option`, selected, tabs[0].id); - }); - } - - updateOptionState(setting, 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 index 8f19261..a436988 100644 --- 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); }