diff options
| author | FrostyBiscuit <[email protected]> | 2025-02-16 13:04:17 +0100 |
|---|---|---|
| committer | FrostyBiscuit <[email protected]> | 2025-02-16 13:04:17 +0100 |
| commit | d0e4dcc6ef057f4c680838d4f8ac8e099a166225 (patch) | |
| tree | 103aae098272bee55b337e53e7436864a9cb8770 /popup | |
Initial push with version 0.1.1
Diffstat (limited to 'popup')
| -rw-r--r-- | popup/popup.css | 49 | ||||
| -rw-r--r-- | popup/popup.html | 28 | ||||
| -rw-r--r-- | popup/popup.js | 51 |
3 files changed, 128 insertions, 0 deletions
diff --git a/popup/popup.css b/popup/popup.css new file mode 100644 index 0000000..fa6cde3 --- /dev/null +++ b/popup/popup.css @@ -0,0 +1,49 @@ +@import url("../shared/variables.css");
+
+body {
+ width: 350px;
+ padding: 0;
+ margin: 0;
+ background-color: var(--transparent-background-darker);
+ font-family: Arial, Helvetica, sans-serif;
+ color: var(--color-text);
+
+ .container {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+
+ #extension-header {
+ background-color: var(--color-bg);
+ padding: 16px;
+
+ .headline {
+ margin: 0;
+ }
+ }
+
+ #extension-body {
+ padding: 16px;
+
+ #extension-settings {
+ .setting {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ }
+ }
+
+ #extension-description {
+ a {
+ color: var(--color-primary);
+ font-weight: bold;
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/popup/popup.html b/popup/popup.html new file mode 100644 index 0000000..7fdf257 --- /dev/null +++ b/popup/popup.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8"> + <link rel="stylesheet" href="popup.css"> +</head> +<body> + <div class="container"> + <div id="extension-header"> + <h1 class="headline">Transparent Zen</h1> + </div> + <div id="extension-body"> + <form id="extension-settings"> + <label class="setting"> + <input type="checkbox" name="enable-transparency"> + Enable Transparency (no effect yet) + </label> + </form> + <div id="extension-description"> + <p>Transparent Zen is a Zen Browser extension that makes supported websites transparent.</p> + <p>Transparent Zen is open source and everyone can contribute their custom styles to support more websites.</p> + <a href="https://github.com/frostybiscuit/transparent-zen">GitHub Repository</a> + </div> + </div> + </div> + <script src="popup.js"></script> +</body> +</html>
\ No newline at end of file diff --git a/popup/popup.js b/popup/popup.js new file mode 100644 index 0000000..7824efb --- /dev/null +++ b/popup/popup.js @@ -0,0 +1,51 @@ +new class ExtensionPopup { + BROWSER_STORAGE_KEY = "transparentZenSettings"; + browserStorageSettings = {}; + extensionSettingsForm = document.getElementById("extension-settings"); + + constructor() { + this.loadSettings().then((settings) => { + if (settings) { + this.browserStorageSettings = settings; + this.restoreSettings(); + this.bindEvents(); + } + }); + } + + bindEvents() { + this.extensionSettingsForm.querySelectorAll("input").forEach((input) => { + input.addEventListener("change", () => { + this.saveSettings(); + }) + }); + } + + restoreSettings() { + if (this.extensionSettingsForm?.elements) { + for (const element of this.extensionSettingsForm.elements) { + if (this.browserStorageSettings[element.name]) { + element.checked = JSON.parse(this.browserStorageSettings[element.name]); + } + } + } + } + + async loadSettings() { + const settings = await browser.storage.local.get(this.BROWSER_STORAGE_KEY); + console.info("Settings loaded", settings?.[this.BROWSER_STORAGE_KEY]); + return settings?.[this.BROWSER_STORAGE_KEY] || {}; + } + + saveSettings() { + if (this.extensionSettingsForm?.elements) { + for (const element of this.extensionSettingsForm.elements) { + this.browserStorageSettings[element.name] = element.checked; + } + + browser.storage.local.set({[this.BROWSER_STORAGE_KEY]: this.browserStorageSettings}); + browser.runtime.sendMessage({ action: "updateSettings" }); + console.info("Settings saved", this.browserStorageSettings); + } + } +}
\ No newline at end of file |