From f41cb32e81a8f522b7121f6e97d73daf676d0da1 Mon Sep 17 00:00:00 2001 From: He4eT Date: Thu, 15 Aug 2024 19:43:33 +0200 Subject: [PATCH] options: add options page --- manifest.json | 3 + pages/options/optionSliders.js | 17 +++++ pages/options/options.html | 114 +++++++++++++++++++++++++++++++++ pages/options/options.js | 1 + pages/popup/popup.js | 3 +- 5 files changed, 136 insertions(+), 2 deletions(-) create mode 100644 pages/options/optionSliders.js create mode 100644 pages/options/options.html create mode 100644 pages/options/options.js diff --git a/manifest.json b/manifest.json index d20c256..c91c1ac 100644 --- a/manifest.json +++ b/manifest.json @@ -10,6 +10,9 @@ "js": ["content_scripts/milje.js"], "matches": ["", "file:///"] }], + "options_ui": { + "page": "pages/options/options.html" + }, "permissions": [ "storage" ] diff --git a/pages/options/optionSliders.js b/pages/options/optionSliders.js new file mode 100644 index 0000000..8879268 --- /dev/null +++ b/pages/options/optionSliders.js @@ -0,0 +1,17 @@ +function syncSliders(sliderId, numberInputId) { + const slider = document.getElementById(sliderId) + const numberInput = document.getElementById(numberInputId) + + slider.addEventListener('input', () => { + numberInput.value = slider.value + }) + + numberInput.addEventListener('input', () => { + slider.value = numberInput.value + }) +} + +syncSliders('density', 'densityValue') +syncSliders('red', 'redValue') +syncSliders('green', 'greenValue') +syncSliders('blue', 'blueValue') diff --git a/pages/options/options.html b/pages/options/options.html new file mode 100644 index 0000000..7bb0b0c --- /dev/null +++ b/pages/options/options.html @@ -0,0 +1,114 @@ + + + + + + Form Example + + + +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + + +
+ +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ +
+ + + + + diff --git a/pages/options/options.js b/pages/options/options.js new file mode 100644 index 0000000..0b14a61 --- /dev/null +++ b/pages/options/options.js @@ -0,0 +1 @@ +// browser.storage.local.set({'params': {scaleFactor: 16}}) diff --git a/pages/popup/popup.js b/pages/popup/popup.js index aeed33f..663b104 100644 --- a/pages/popup/popup.js +++ b/pages/popup/popup.js @@ -8,6 +8,5 @@ document.getElementById('toggleMiljeButton').onclick = () => { } document.getElementById('openSettingsButton').onclick = () => { - browser.storage.local.set({'params': {scaleFactor: 16}}) - console.log('openSettingsButton') + browser.runtime.openOptionsPage() }