moved state to background

background.js

@@ -1,9 +1,13 @@
-chrome.runtime.onMessage.addListener((message) => {
-    console.log(message);
-    if (message.action === "activate") {
-        chrome.tabs.executeScript({ file: "addBorder.js" });
-    } else if (message.action === "deactivate") {
-        chrome.tabs.executeScript({ file: "removeBorder.js" });
+var isOn = false;
+
+chrome.runtime.onMessage.addListener(({action}) => {
+    if (action === "toggle") {
+        if (isOn) {
+            chrome.tabs.executeScript({ file: "removeBorder.js" });
+        } else {
+            chrome.tabs.executeScript({ file: "addBorder.js" });
+        }
+        isOn = !isOn;
     }
     return true;
 });

manifest.json

@@ -8,10 +8,19 @@
         "activeTab"
     ],
     "background": {
-        "scripts": ["background.js"]
+        "scripts": [
+            "background.js"
+        ]
     },
     "browser_action": {
         "default_popup": "popup.html"
     },
-    "web_accessible_resources": ["styles.css"]
+    "web_accessible_resources": [
+        "styles.css"
+    ],
+    "icons": {
+        "16": "assets/icon.png",
+        "48": "assets/icon.png",
+        "128": "assets/icon.png"
+    }
 }

popup.js

@@ -1,11 +1,5 @@
 const button = document.getElementById("toggle");
-var isON = false
 
 button.addEventListener("click", () => {
-    if (!isON) {
-        chrome.runtime.sendMessage({ action: "activate" });   
-    } else {
-        chrome.runtime.sendMessage({ action: "deactivate" }); 
-    }
-    isON = !isON;
+    chrome.runtime.sendMessage({ action: "toggle" });
 });

styles.css

@@ -31,7 +31,7 @@ thead,
 tbody, 
 tfoot, 
 footer {
-    border: 1px solid #faed27 !important;
+    background-color: rgba(255, 255, 108, 0.217) !important;
 }
 
 div:hover, 
@@ -67,5 +67,5 @@ thead:hover,
 tbody:hover, 
 tfoot:hover, 
 footer:hover {
-    border: 1px solid red !important;
+    border: 2px solid red !important;
 }