From d0e4dcc6ef057f4c680838d4f8ac8e099a166225 Mon Sep 17 00:00:00 2001 From: FrostyBiscuit Date: Sun, 16 Feb 2025 13:04:17 +0100 Subject: Initial push with version 0.1.1 --- popup/popup.css | 49 +++++++++++++++++++++++++++++++++++++++++++++++++ popup/popup.html | 28 ++++++++++++++++++++++++++++ popup/popup.js | 51 +++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 128 insertions(+) create mode 100644 popup/popup.css create mode 100644 popup/popup.html create mode 100644 popup/popup.js (limited to 'popup') 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 @@ + + + + + + + +
+
+

Transparent Zen

+
+
+
+ +
+
+

Transparent Zen is a Zen Browser extension that makes supported websites transparent.

+

Transparent Zen is open source and everyone can contribute their custom styles to support more websites.

+ GitHub Repository +
+
+
+ + + \ 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 -- cgit v1.2.3