diff options
| author | sameerasw <[email protected]> | 2025-02-25 15:20:19 +0530 |
|---|---|---|
| committer | sameerasw <[email protected]> | 2025-02-25 15:20:19 +0530 |
| commit | 36cb8d72865b1ab5cbcb008f939d916dfd1d206d (patch) | |
| tree | cbf9efffce76a34b2230826c50e4612aea482d7f /popup | |
| parent | e36e4ce96399db97f80c8833fa6ef2982a249e51 (diff) | |
Added the website mapper and automatic loading and fetching of css styles with the ability to disable as well
Diffstat (limited to 'popup')
| -rw-r--r-- | popup/popup.css | 4 | ||||
| -rw-r--r-- | popup/popup.html | 20 | ||||
| -rw-r--r-- | popup/popup.js | 76 |
3 files changed, 50 insertions, 50 deletions
diff --git a/popup/popup.css b/popup/popup.css index fa6cde3..174470e 100644 --- a/popup/popup.css +++ b/popup/popup.css @@ -25,6 +25,10 @@ body { #extension-body {
padding: 16px;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
#extension-settings {
.setting {
display: flex;
diff --git a/popup/popup.html b/popup/popup.html index f27e98d..3b267e7 100644 --- a/popup/popup.html +++ b/popup/popup.html @@ -9,22 +9,16 @@ <body> <div class="container"> <div id="extension-header"> - <h1 class="headline">Transparent Zen</h1> + <h1 class="headline">ZenInternet by @sameerasw</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> - <button id="refetch-css">Refetch CSS</button> + <label class="setting"> + <input type="checkbox" id="enable-styling"> + Enable Styling + </label> + <button id="refetch-css">Refetch latest styles</button> <button id="restart-background">Restart Background Script (optional)</button> - <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> + <a href="https://sameerasw.github.io/my-internet/">Styles repo</a> </div> </div> <script src="popup.js"></script> diff --git a/popup/popup.js b/popup/popup.js index 77c5391..494f170 100644 --- a/popup/popup.js +++ b/popup/popup.js @@ -1,7 +1,7 @@ new (class ExtensionPopup { BROWSER_STORAGE_KEY = "transparentZenSettings"; browserStorageSettings = {}; - extensionSettingsForm = document.getElementById("extension-settings"); + enableStylingSwitch = document.getElementById("enable-styling"); constructor() { this.loadSettings().then((settings) => { @@ -13,29 +13,22 @@ new (class ExtensionPopup { }); document .getElementById("refetch-css") - .addEventListener("click", this.refetchCSS); + .addEventListener("click", this.refetchCSS.bind(this)); document .getElementById("restart-background") .addEventListener("click", this.restartBackground); } bindEvents() { - this.extensionSettingsForm.querySelectorAll("input").forEach((input) => { - input.addEventListener("change", () => { - this.saveSettings(); - }); + this.enableStylingSwitch.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] - ); - } - } + if (this.browserStorageSettings.enableStyling !== undefined) { + this.enableStylingSwitch.checked = + this.browserStorageSettings.enableStyling; } } @@ -46,35 +39,44 @@ new (class ExtensionPopup { } saveSettings() { - if (this.extensionSettingsForm?.elements) { - for (const element of this.extensionSettingsForm.elements) { - this.browserStorageSettings[element.name] = element.checked; - } + this.browserStorageSettings.enableStyling = + this.enableStylingSwitch.checked; - browser.storage.local.set({ - [this.BROWSER_STORAGE_KEY]: this.browserStorageSettings, - }); - browser.runtime.sendMessage({ action: "updateSettings" }); - console.info("Settings saved", this.browserStorageSettings); - } + browser.storage.local.set({ + [this.BROWSER_STORAGE_KEY]: this.browserStorageSettings, + }); + browser.storage.sync.set({ + [this.BROWSER_STORAGE_KEY]: this.browserStorageSettings, + }); + browser.runtime.sendMessage({ action: "updateSettings" }); + console.info("Settings saved", this.browserStorageSettings); } async refetchCSS() { try { - const response = await fetch( - "https://sameerasw.github.io/my-internet/github.com.css", - { - headers: { - 'Cache-Control': 'no-cache' + const response = await fetch("/mapper.json", { + headers: { + "Cache-Control": "no-cache", + }, + }); + if (!response.ok) throw new Error("Failed to fetch mapper.json"); + const mapping = await response.json(); + for (const [site, cssFileName] of Object.entries(mapping)) { + const cssResponse = await fetch( + `https://sameerasw.github.io/my-internet/${cssFileName}`, + { + headers: { + "Cache-Control": "no-cache", + }, } - } - ); - if (!response.ok) throw new Error("Failed to fetch CSS"); - const cssText = await response.text(); - await browser.storage.local.set({ githubCSS: cssText }); - await browser.storage.sync.set({ githubCSS: cssText }); + ); + if (!cssResponse.ok) throw new Error(`Failed to fetch CSS for ${site}`); + const cssText = await cssResponse.text(); + await browser.storage.local.set({ [cssFileName]: cssText }); + await browser.storage.sync.set({ [cssFileName]: cssText }); + } browser.runtime.sendMessage({ action: "updateCSS" }); - console.info("CSS refetched and updated from GitHub." + cssText); + console.info("All CSS files refetched and updated from GitHub."); } catch (error) { console.error("Error refetching CSS:", error); } @@ -84,4 +86,4 @@ new (class ExtensionPopup { browser.runtime.sendMessage({ action: "restartBackground" }); console.info("Background script restart requested."); } -})();
\ No newline at end of file +})(); |