feat: basic functionality

background.js

@@ -1,6 +1,28 @@
+let accent1 = "#ff0000";
+
+const filter = {
+    url: [{
+        urlMatches: 'https://*.google.com/*',
+    }, ],
+};
+
+chrome.runtime.onInstalled.addListener(() => {
+    chrome.storage.sync.set({
+        a1: accent1
+    });
+})
+
 chrome.action.onClicked.addListener((tab) => {
     chrome.scripting.executeScript({
         target: { tabId: tab.id },
-        files: ['styles/accentify.css']
+        files: ['popup.js']
+    });
+});
+
+
+chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+    chrome.scripting.executeScript({
+        target: { tabId: tabId },
+        files: ['onload.js']
     });
 });

index.js

@@ -1,6 +0,0 @@
-var r = document.querySelector(':root');
-
-document.querySelector(".getColor").addEventListener("click", function() {
-    var color = this.value;
-    r.style.setProperty("--color-calendar-graph-day-L3-bg", color);
-})

manifest.json

@@ -23,16 +23,19 @@
     },
 
     "host_permissions": [
-        "https://www.github.com/"
+        "https://*.github.com/"
     ],
 
     "content_scripts": [{
+        "run_at": "document_end",
         "matches": ["https://*.github.com/*"],
-        "css": ["styles/accentify.css"]
+        "js": ["onload.js"]
     }],
 
     "permissions": [
-        "activeTab"
+        "storage",
+        "scripting",
+        "tabs"
     ],
     "background": {
         "service_worker": "background.js"

onload.js

@@ -0,0 +1,15 @@
+chrome.storage.sync.get('a1', ({ a1 }) => {
+
+    document.querySelector(':root').style.setProperty('--color-calendar-graph-day-L4-bg', a1 + "ff", "important");
+    document.querySelector(':root').style.setProperty('--color-calendar-graph-day-L3-bg', a1 + "c5", "important");
+    document.querySelector(':root').style.setProperty('--color-calendar-graph-day-L2-bg', a1 + "8a", "important");
+    document.querySelector(':root').style.setProperty('--color-calendar-graph-day-L1-bg', a1 + "54", "important");
+    document.querySelector(':root').style.setProperty('--color-accent-emphasis', a1 + "ff", "important");
+    document.querySelector(':root').style.setProperty('--color-btn-primary-bg', a1 + "ff", "important");
+    document.querySelector(':root').style.setProperty('--color-btn-primary-hover-bg', a1 + "c5", "important");
+    document.querySelector('.js-highlight-blob').style.setProperty('fill', a1 + "c5", "important");
+    document.querySelector('.js-highlight-blob').style.setProperty('stroke', a1 + "ff", "important");
+    for (let i = 0; i < document.querySelectorAll('.Progress-item.rounded-2').length; i++) {
+        document.querySelectorAll('.Progress-item.rounded-2')[i].style.setProperty('background-color', a1 + "ff", "important");
+    }
+});

popup.html

@@ -13,7 +13,6 @@
 
     <!-- My Styles -->
     <link rel="stylesheet" href="styles/styles.css">
-    <link rel="stylesheet" href="styles/accentify.css">
 
     <title>GitHub Accentify</title>
 </head>
@@ -27,12 +26,14 @@
         </div>
     </div>
     <div>
-        <label class="inb">Select Your Accent Color:</label>
+        <form>
-        <input class="getColor" type="color" name="accent-color" id="accent">
+            <label class="inb">Select Your Accent Color:</label>
+            <input class="getColor" type="color" name="accent-color" id="accent">
+        </form>
     </div>
 
-    <!-- Bootstrap Scripts -->
+    <!-- Scripts -->
-    <script src="index.js"></script>
+    <script src="popup.js"></script>
 </body>
 
 </html>

popup.js

@@ -0,0 +1,38 @@
+let changeColor = document.getElementById("accent");
+
+chrome.storage.sync.get("a1", ({ a1 }) => {
+    changeColor.value = a1;
+});
+
+changeColor.addEventListener("change", async() => {
+    let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+
+    var accent1 = changeColor.value;
+    chrome.storage.sync.set({ a1: accent1 }, () => {
+        alert("Color set to " + accent1);
+    });
+
+    chrome.scripting.executeScript({
+        target: { tabId: tab.id },
+        function: setAccent,
+    });
+})
+
+function setAccent() {
+    chrome.storage.sync.get('a1', ({ a1 }) => {
+        document.querySelector('.Progress-item.rounded-2').style.setProperty('background-color', a1 + "ff", "important");
+        document.querySelector(':root').style.setProperty('--color-calendar-graph-day-L4-bg', a1 + "ff", "important");
+        document.querySelector(':root').style.setProperty('--color-calendar-graph-day-L3-bg', a1 + "c5", "important");
+        document.querySelector(':root').style.setProperty('--color-calendar-graph-day-L2-bg', a1 + "8a", "important");
+        document.querySelector(':root').style.setProperty('--color-calendar-graph-day-L1-bg', a1 + "54", "important");
+        document.querySelector(':root').style.setProperty('--color-accent-emphasis', a1 + "ff", "important");
+        document.querySelector(':root').style.setProperty('--color-btn-primary-bg', a1 + "ff", "important");
+        document.querySelector(':root').style.setProperty('--color-btn-primary-hover-bg', a1 + "c5", "important");
+        document.querySelector('.js-highlight-blob').style.setProperty('fill', a1 + "c5", "important");
+        document.querySelector('.js-highlight-blob').style.setProperty('stroke', a1 + "ff", "important");
+        for (let i = 0; i < document.querySelectorAll('.Progress-item.rounded-2').length; i++) {
+            document.querySelectorAll('.Progress-item.rounded-2')[i].style.setProperty('background-color', a1 + "ff", "important");
+        }
+    });
+
+}

styles/accentify.css

@@ -1,18 +0,0 @@
-:root {
-    --color-calendar-graph-day-L1-bg: rgba(236, 150, 222, 0.438) !important;
-    --color-calendar-graph-day-L2-bg: rgba(236, 150, 222, 0.63) !important;
-    --color-calendar-graph-day-L3-bg: rgba(236, 150, 222, 0.884) !important;
-    --color-calendar-graph-day-L4-bg: #ec96deff !important;
-    --color-accent-emphasis: #ec96deff !important;
-    --color-btn-primary-bg: #ec96deff !important;
-    --color-btn-primary-hover-bg: #ec96deff !important;
-}
-
-.Progress-item.rounded-2 {
-    background-color: var(--color-calendar-graph-day-L4-bg) !important;
-}
-
-.js-highlight-blob {
-    fill: var(--color-calendar-graph-day-L2-bg) !important;
-    stroke: var(--color-calendar-graph-day-L3-bg) !important;
-}

styles/styles.css

@@ -27,3 +27,12 @@ h1 {
 .inb {
     display: inline-block;
 }
+
+.getColor {
+    height: 30px;
+    width: 30px;
+    outline: none;
+    margin: 10px;
+    border: none;
+    border-radius: 2px;
+}