diff --git a/background.js b/background.js
index 33e54c3b1fe23d0d8d98264c522e6c48696d38fb..d8632fb7caab24fd4887805723bf4aeedfa25f92 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 fc4be40e706e4fa7dca70fb10cd484199d0a0cbf..ed3d130e61594c058bb37b79feb8ff03cac77bcd 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 ff7f5868aa7acbb815f8dc785fd0f260fcd65813..07eea99e030f0c0dba428b6192dd44898c38ae31 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;
}