summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--background.js40
-rw-r--r--inject-css.js29
-rw-r--r--manifest.json17
-rw-r--r--mapper.json31
-rw-r--r--popup/popup.css4
-rw-r--r--popup/popup.html20
-rw-r--r--popup/popup.js76
7 files changed, 135 insertions, 82 deletions
diff --git a/background.js b/background.js
index 3c25ff3..b67461e 100644
--- a/background.js
+++ b/background.js
@@ -1,29 +1,41 @@
-const CSS_URL =
- "https://sameerasw.github.io/my-internet/github.com.css";
+const CSS_URL_BASE = "https://sameerasw.github.io/my-internet/";
-async function updateCSS() {
+async function updateCSS(url, cssFileName) {
try {
- let response = await fetch(CSS_URL, {
+ let response = await fetch(url, {
headers: {
- 'Cache-Control': 'no-cache'
- }
+ "Cache-Control": "no-cache",
+ },
});
if (!response.ok) throw new Error("Failed to fetch CSS");
let cssText = await response.text();
- await browser.storage.local.set({ githubCSS: cssText });
- await browser.storage.sync.set({ githubCSS: cssText });
- console.log("Updated GitHub CSS from remote source." + cssText);
+ await browser.storage.local.set({ [cssFileName]: cssText });
+ await browser.storage.sync.set({ [cssFileName]: cssText });
+ console.log(`Updated CSS for ${cssFileName} from remote source.`);
} catch (error) {
- console.error("Error fetching CSS:", error);
+ console.error(`Error fetching CSS for ${cssFileName}:`, error);
}
}
+async function updateAllCSS(mapping) {
+ for (const [site, cssFileName] of Object.entries(mapping)) {
+ const url = `${CSS_URL_BASE}${cssFileName}`;
+ await updateCSS(url, cssFileName);
+ }
+ console.log("All CSS files updated.");
+}
+
// Fetch CSS on startup and then every hour
-updateCSS();
+fetch("/mapper.json")
+ .then((response) => response.json())
+ .then((mapping) => updateAllCSS(mapping));
-// Listen for messages to restart the background script
browser.runtime.onMessage.addListener((message) => {
- if (message.action === "restartBackground") {
+ if (message.action === "updateCSS") {
+ fetch("/mapper.json")
+ .then((response) => response.json())
+ .then((mapping) => updateAllCSS(mapping));
+ } else if (message.action === "restartBackground") {
browser.runtime.reload();
}
-}); \ No newline at end of file
+});
diff --git a/inject-css.js b/inject-css.js
index c54c80e..c889e18 100644
--- a/inject-css.js
+++ b/inject-css.js
@@ -1,8 +1,23 @@
-browser.storage.sync.get("githubCSS").then((data) => {
- if (data.githubCSS) {
- let style = document.createElement("style");
- style.textContent = data.githubCSS;
- document.head.appendChild(style);
- console.log("Injected custom GitHub CSS.");
- }
+browser.storage.sync.get("transparentZenSettings").then((settings) => {
+ if (settings.transparentZenSettings?.enableStyling) {
+ fetch(browser.runtime.getURL("mapper.json"))
+ .then((response) => response.json())
+ .then((mapping) => {
+ const currentUrl = window.location.hostname;
+ const matchedKey = Object.keys(mapping).find((key) =>
+ currentUrl.includes(key)
+ );
+ const cssFileName = mapping[matchedKey];
+ if (cssFileName) {
+ browser.storage.sync.get(cssFileName).then((data) => {
+ if (data[cssFileName]) {
+ let style = document.createElement("style");
+ style.textContent = data[cssFileName];
+ document.head.appendChild(style);
+ console.log(`Injected custom CSS for ${currentUrl}`);
+ }
+ });
+ }
+ });
+ }
});
diff --git a/manifest.json b/manifest.json
index 41693a4..e4de56c 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,8 +1,8 @@
{
"manifest_version": 2,
- "name": "Transparent Zen",
- "version": "0.1.10",
- "description": "Inject custom styles to make your favorite websites transparent.",
+ "name": "Zen Internet",
+ "version": "0.2.0",
+ "description": "Inject custom css from my repository in real time",
"browser_specific_settings": {
"gecko": {
"id": "{74186d10-f6f2-4f73-b33a-83bb72e50654}"
@@ -12,15 +12,10 @@
"48": "assets/images/logo_48.png",
"96": "assets/images/logo_96.png"
},
- "permissions": [
- "activeTab",
- "storage",
- "tabs",
- "<all_urls>"
- ],
+ "permissions": ["activeTab", "storage", "tabs", "<all_urls>"],
"browser_action": {
"default_popup": "popup/popup.html",
- "default_title": "Transparent Zen"
+ "default_title": "Zen Internet"
},
"background": {
"scripts": ["background.js"],
@@ -28,7 +23,7 @@
},
"content_scripts": [
{
- "matches": ["*://*.github.com/*"],
+ "matches": ["<all_urls>"],
"js": ["inject-css.js"],
"run_at": "document_start"
}
diff --git a/mapper.json b/mapper.json
new file mode 100644
index 0000000..74e9267
--- /dev/null
+++ b/mapper.json
@@ -0,0 +1,31 @@
+{
+ "github.com": "github.com.css",
+ "keep.google.com": "keep.google.com.css",
+ "aistudio.google.com": "aistudio.google.com.css",
+ "chat.openai.com": "chat.openai.com.css",
+ "discord.com.css": "discord.com.css",
+ "facebook.com": "facebook.com.css",
+ "gemini.google.com": "gemini.google.com.css",
+ "google.com": "google.com.css",
+ "instagram.com": "instagram.com.css",
+ "learning.westminster.ac.uk": "learning.westminster.ac.uk.css",
+ "messenger.com": "messenger.com.css",
+ "monkeytype.com": "monkeytype.com.css",
+ "music.youtube.com": "music.youtube.com.css",
+ "notion.so": "notion.so.css",
+ "pexels.com": "pexels.com.css",
+ "pinterest.com": "pinterest.com.css",
+ "priv.au": "priv.au.css",
+ "quora.com": "quora.com.css",
+ "reddit.com": "reddit.com.css",
+ "sameerasw.com": "sameerasw.com.css",
+ "sourceforge.net": "sourceforge.net.css",
+ "speedtest.net": "speedtest.net.css",
+ "tasks.google.com": "tasks.google.com.css",
+ "twitch.tv": "twitch.tv.css",
+ "unsplash.com": "unsplash.com.css",
+ "web.telegram.org": "web.telegram.org.css",
+ "web.whatsapp.com": "web.whatsapp.com.css",
+ "x.com": "x.com.css",
+ "youtube.com": "youtube.com.css"
+} \ No newline at end of file
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
+})();
generated by cgit v1.2.3 (git 2.25.1) at 2025-05-12 20:12:48 +0000