diff --git a/background.js b/background.js new file mode 100644 index 0000000..209e66e --- /dev/null +++ b/background.js @@ -0,0 +1,6 @@ +chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => { + if (changeInfo.status === "complete" && tab.url) { + chrome.tabs.sendMessage(tabId, { type: "applyCSS" }); + } +}); + diff --git a/injector.js b/injector.js new file mode 100644 index 0000000..0e6b1b9 --- /dev/null +++ b/injector.js @@ -0,0 +1,29 @@ +function injectCSS(css) { + const styleId = "dynamic-css-injector-style"; + let style = document.getElementById(styleId); + + if (!style) { + style = document.createElement("style"); + style.id = styleId; + document.documentElement.appendChild(style); + } + + style.textContent = css; +} + +function applySiteCSS() { + const domain = location.hostname; + chrome.storage.sync.get([domain], (result) => { + const css = result[domain]; + if (css) injectCSS(css); + }); +} + +// Run when content script loads +applySiteCSS(); + +// Listen for background requests to reapply +chrome.runtime.onMessage.addListener((msg) => { + if (msg.type === "applyCSS") applySiteCSS(); +}); + diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..14d83b9 --- /dev/null +++ b/manifest.json @@ -0,0 +1,31 @@ +{ + "manifest_version": 3, + "name": "Dynamic CSS Injector", + "version": "1.1", + "permissions": [ + "storage", + "scripting", + "tabs" + ], + "host_permissions": [ + "" + ], + "background": { + "service_worker": "background.js" + }, + "content_scripts": [ + { + "matches": [ + "" + ], + "js": [ + "injector.js" + ], + "run_at": "document_idle" + } + ], + "action": { + "default_popup": "popup.html", + "default_title": "Custom CSS" + } +} diff --git a/popup.html b/popup.html new file mode 100644 index 0000000..b1195f6 --- /dev/null +++ b/popup.html @@ -0,0 +1,18 @@ + + + + Custom CSS + + + +

+ + + + + + diff --git a/popup.js b/popup.js new file mode 100644 index 0000000..8692087 --- /dev/null +++ b/popup.js @@ -0,0 +1,19 @@ +document.addEventListener("DOMContentLoaded", async () => { + const [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); + const url = new URL(tab.url); + const domain = url.hostname; + + document.getElementById("domain").textContent = domain; + + chrome.storage.sync.get([domain], (result) => { + document.getElementById("css").value = result[domain] || ""; + }); + + document.getElementById("save").addEventListener("click", () => { + const css = document.getElementById("css").value; + chrome.storage.sync.set({ [domain]: css }, () => { + chrome.tabs.sendMessage(tab.id, { type: "applyCSS" }); + }); + }); +}); +