tomas.mirchev/css-injector-extension
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Tomas Mirchev 2025-10-20 22:18:35 +02:00
parent 752a85ab50
commit 33ac36ddd3
5 changed files with 103 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
background.js Normal file
View File

@ -0,0 +1,6 @@
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
if (changeInfo.status === "complete" && tab.url) {
chrome.tabs.sendMessage(tabId, { type: "applyCSS" });
}
});

29
injector.js Normal file
View File

@ -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();
});

31
manifest.json Normal file
View File

@ -0,0 +1,31 @@
{
"manifest_version": 3,
"name": "Dynamic CSS Injector",
"version": "1.1",
"permissions": [
"storage",
"scripting",
"tabs"
],
"host_permissions": [
"<all_urls>"
],
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"injector.js"
],
"run_at": "document_idle"
}
],
"action": {
"default_popup": "popup.html",
"default_title": "Custom CSS"
}
}

18
popup.html Normal file
View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<title>Custom CSS</title>
<style>
body { font-family: sans-serif; width: 300px; margin: 10px; }
textarea { width: 100%; height: 200px; }
button { margin-top: 8px; width: 100%; }
</style>
</head>
<body>
<h3 id="domain"></h3>
<textarea id="css"></textarea>
<button id="save">Save & Apply</button>
<script src="popup.js"></script>
</body>
</html>

19
popup.js Normal file
View File

@ -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" });
});
});
});