From 370e26b68151cc890ef563078b51a5c4e3e47bfa Mon Sep 17 00:00:00 2001
From: BERTHAUT Florent <florent.berthaut@univ-lille1.fr>
Date: Sat, 15 Jan 2022 16:14:09 +0100
Subject: [PATCH] First working CSS changes
---
background.js | 3 +--
main.js | 25 +++++++++++++++++--------
popup.html | 2 +-
3 files changed, 19 insertions(+), 11 deletions(-)
diff --git a/background.js b/background.js
index 33e54c3..d8632fb 100644
--- a/background.js
+++ b/background.js
@@ -1,7 +1,6 @@
-// background.js
-
let css = "";
+//Initialize the CSS storage on startup
chrome.runtime.onInstalled.addListener(() => {
chrome.storage.sync.set({css});
});
diff --git a/main.js b/main.js
index fc4be40..ed3d130 100644
--- a/main.js
+++ b/main.js
@@ -5,6 +5,8 @@ editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/css");
+//When the CSS editor changes, store it in the shared storage
+//and call the background parseCSS script
editor.getSession().on('change', function() {
chrome.tabs.query({ active: true, currentWindow: true },
function(tabs) {
@@ -20,25 +22,32 @@ editor.getSession().on('change', function() {
function parseCSS() {
console.log("Parsing CSS");
- //get access to the main document
+ //Get access to the css written in the popup
chrome.storage.sync.get("css", function(cssObj) {
+
+ //Split the rules
let rules = cssObj.css.split("}");
for(let r of rules) {
- let sel = r.split("{")[0];
- if(sel.search(/ */i)<0) {
+ console.log(r);
+ //Test if not empty
+ if(r.search(/[\w]+/i)>=0) {
+
+ //Retrieve the selector
+ let sel = r.split("{")[0];
console.log("Selector ", sel);
+
+ //Retrieve the corresponding elements
let els = document.querySelectorAll(sel);
for(let e of els) {
- console.log(e.innerHTML);
+
+ //Apply the properties to each
+
+ //TEMP, just put the background color in blue
e.style["background-color"] = "blue";
}
}
}
});
-
-
-
-
}
diff --git a/popup.html b/popup.html
index ff7f586..07eea99 100644
--- a/popup.html
+++ b/popup.html
@@ -5,7 +5,7 @@
</head>
<body>
<h1>CssLsd</h1>
- <div id="editor">
+ <div id="editor">
body {
background-color:blue;
}
--
GitLab