Change UI of affordable element

- Fix extension run on every browser update

Author: Mihir

src/background.js

@@ -7,14 +7,14 @@ let defaultSettings = {
     budget: ""
 }
 
-chrome.runtime.onInstalled.addListener(setConfigs);
-
-function setConfigs() {
+chrome.runtime.onInstalled.addListener((details) => {
     chrome.storage.sync.get("settings", ({ settings }) => {
         if (!settings) {
             chrome.storage.sync.set({ settings: defaultSettings });
         }
     });
 
-    chrome.runtime.openOptionsPage();
-}
+    if (details && details.reason === 'install') {
+        chrome.runtime.openOptionsPage();
+    }
+});

src/main.css

@@ -38,3 +38,58 @@
 #link:hover {
     color: white;
 }
+
+/* Affordable inline badge */
+.affordable-badge {
+    display: inline-flex !important;
+    align-items: center !important;
+    gap: 6px !important;
+    padding: 2px 8px !important;
+    margin-left: 6px !important;
+    border-radius: 999px !important;
+    font-size: 0.9em !important;
+    line-height: 1 !important;
+    background-color: #ffffff !important;
+    border: 1px solid rgba(0, 0, 0, 0.2) !important;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06) !important;
+}
+
+.affordable-badge__swatch {
+    width: 6px !important;
+    height: 0.9em !important;
+    border-radius: 2px !important;
+    flex: 0 0 6px !important;
+    background-color: #4caf50 !important; /* default */
+}
+
+.affordable-badge__text {
+    color: #111111 !important;
+    font-weight: 600 !important;
+    font-variant-numeric: tabular-nums !important;
+    -webkit-font-smoothing: antialiased !important;
+    -moz-osx-font-smoothing: grayscale !important;
+    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif !important;
+    white-space: nowrap !important;
+}
+
+@media (prefers-color-scheme: dark) {
+    .affordable-badge {
+        background-color: #121212 !important;
+        border: 1px solid rgba(255, 255, 255, 0.24) !important;
+        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4) !important;
+    }
+    .affordable-badge__text { color: #ffffff !important; }
+}
+
+/* Discrete affordability tiers (0=most affordable green → 10=least affordable red) */
+.aff-tier-0 { background-color: #2e7d32 !important; }
+.aff-tier-1 { background-color: #388e3c !important; }
+.aff-tier-2 { background-color: #43a047 !important; }
+.aff-tier-3 { background-color: #4caf50 !important; }
+.aff-tier-4 { background-color: #7cb342 !important; }
+.aff-tier-5 { background-color: #fbc02d !important; }
+.aff-tier-6 { background-color: #f57c00 !important; }
+.aff-tier-7 { background-color: #ef6c00 !important; }
+.aff-tier-8 { background-color: #e53935 !important; }
+.aff-tier-9 { background-color: #d32f2f !important; }
+.aff-tier-10 { background-color: #b71c1c !important; }

src/main.js

@@ -9,10 +9,10 @@ function getFromStorageSync(itemName, callback) {
 function getAppendContent(productPrice, salary, percentageMode) {
     if (percentageMode) {
         let percentage = getPriceInSalaryPercentage(productPrice, salary);
-        return `${brackets.left}${percentage}%${brackets.right}`
+        return `${percentage}%`
     }
     let timeTakenToEarn = getTimeTakenToEarn(productPrice, salary);
-    return ` ${brackets.left}${timeTakenToEarn}${brackets.right}`
+    return `${timeTakenToEarn}`
 }
 
 function getPriceInSalaryPercentage(productPrice, salary) {
@@ -274,46 +274,56 @@ function append(elementInfo, element, productPrice, settings, isPriceRange) {
         return;
     }
 
-    let span = document.createElement("span");
-    span.setAttribute('id', 'affordable');
-    desiredElement.appendChild(span);
+    // Build badge
+    let badge = document.createElement("span");
+    badge.setAttribute('id', 'affordable');
+    badge.className = 'affordable-badge';
+
+    let swatch = document.createElement("span");
+    swatch.className = 'affordable-badge__swatch';
+
+    if (settings.colourCodePrices) {
+        const percent = computeAffordabilityPercent(productPrice, settings.salary);
+        const tier = percentToTier(percent);
+        swatch.classList.add(`aff-tier-${tier}`);
+    }
+
+    let text = document.createElement("span");
+    text.className = 'affordable-badge__text';
+    text.innerText = getAppendContent(productPrice, settings.salary, settings.percentageMode);
+
+    badge.appendChild(swatch);
+    badge.appendChild(text);
+    desiredElement.appendChild(badge);
+
     if (settings.hoverMode) {
         // Hover Mode Attributes
-        span.style.display = 'none'
-        if (settings.colourCodePrices) {
-            addColourBasedOnPercentIntensity(span, getPriceInSalaryPercentage(productPrice, settings.salary) / 100)
-        }
-        span.innerText = " " + getAppendContent(productPrice, settings.salary, settings.percentageMode)
+        badge.style.display = 'none';
         element.addEventListener('mouseover', function handleMouseOver() {
-            span.style.display = 'block';
+            badge.style.display = 'inline-flex';
         });
         desiredElement.setAttribute("title", `It will take you ${getTimeTakenToEarn(productPrice, settings.salary)} to earn ${productPrice}`);
         element.addEventListener('mouseout', function handleMouseOut() {
-            span.style.display = 'none';
+            badge.style.display = 'none';
         });
-
-    } else {
-        // Normal Mode Attributes
-        let innerSpan = document.createElement("span")
-        if (settings.colourCodePrices) {
-            addColourBasedOnPercentIntensity(innerSpan, getPriceInSalaryPercentage(productPrice, settings.salary) / 100)
-        }
-        innerSpan.innerText = getAppendContent(productPrice, settings.salary, settings.percentageMode);
-        span.appendChild(innerSpan)
-        if (!isPriceRange) {
-            span.setAttribute("style", "display:block");
-            desiredElement.setAttribute("title", `It will take you ${getTimeTakenToEarn(productPrice, settings.salary)} to earn ${productPrice}`);
-        }
+    } else if (!isPriceRange) {
+        badge.setAttribute("style", "display:inline-flex");
+        desiredElement.setAttribute("title", `It will take you ${getTimeTakenToEarn(productPrice, settings.salary)} to earn ${productPrice}`);
     }
 }
 
-function addColourBasedOnPercentIntensity(element, percent) {
-    //value from 0 to 1
-    if (percent > 1)
-        percent = 1;
-    var hue = ((1 - percent) * 120).toString(10);
-    let backgroundColor = ["hsl(", hue, ",100%,50%)"].join("");
-    element.style.color = backgroundColor;
+function computeAffordabilityPercent(productPrice, salary) {
+    let percent = productPrice / salary;
+    if (percent < 0) percent = 0;
+    if (percent > 1) percent = 1;
+    return percent;
+}
+
+function percentToTier(percent) {
+    let p = percent;
+    if (p < 0) p = 0;
+    if (p > 1) p = 1;
+    return Math.round(p * 10);
 }
 
 function parseElementValue(elementValue) {