enabled web-vitals-extension loggin option

src/browser_action/vitals.js

@@ -16,6 +16,7 @@
   const webVitals = await import(src);
   let overlayClosedForSession = false;
   let latestCLS = {};
+  let enableLogging = localStorage.getItem('web-vitals-extension-debug')=='TRUE';
 
   // Core Web Vitals thresholds
   const LCP_THRESHOLD = 2500;
@@ -87,8 +88,9 @@
     // Check for preferences set in options
     chrome.storage.sync.get({
       enableOverlay: false,
+      debug: false,
     }, ({
-      enableOverlay,
+      enableOverlay, debug,
     }) => {
       if (enableOverlay === true && overlayClosedForSession == false) {
         // Overlay
@@ -124,6 +126,13 @@
           });
         }
       }
+      if (debug) {
+        localStorage.setItem('web-vitals-extension-debug', 'TRUE');
+        enableLogging = true;
+      } else {
+        localStorage.removeItem('web-vitals-extension-debug');
+        enableLogging = false;
+      }
     });
   }
 
@@ -159,6 +168,9 @@
     if (metricName === undefined || badgeMetrics === undefined) {
       return;
     }
+    if (enableLogging) {
+      console.log('[Web Vitals]', body.name, body.value.toFixed(2), body);
+    }
     badgeMetrics[metricName].value = body.value;
     badgeMetrics[metricName].final = body.isFinal;
     badgeMetrics.location = getURL();

src/options/options.html

@@ -17,6 +17,11 @@
                     <input type="checkbox" id="overlay">
                     Display HUD overlay
                 </label>
+                <br/>
+                <label>
+                    <input type="checkbox" id="consoleLogging">
+                    Console Logging
+                </label>
                 <div id="status"></div>
                 <button id="save">Save</button>
                 </div>

src/options/options.js

@@ -1,4 +1,5 @@
 const optionsOverlayNode = document.getElementById('overlay');
+const optionsConsoleLoggingNode = document.getElementById('consoleLogging');
 const optionsSaveBtn = document.getElementById('save');
 const optionsStatus = document.getElementById('status');
 
@@ -8,6 +9,7 @@ const optionsStatus = document.getElementById('status');
 function saveOptions() {
   chrome.storage.sync.set({
     enableOverlay: optionsOverlayNode.checked,
+    debug: optionsConsoleLoggingNode.checked,
   }, () => {
     // Update status to let user know options were saved.
     optionsStatus.textContent = 'Options saved.';
@@ -24,8 +26,10 @@ function saveOptions() {
 function restoreOptions() {
   chrome.storage.sync.get({
     enableOverlay: false,
-  }, ({enableOverlay}) => {
+    debug: false,
+  }, ({enableOverlay, debug}) => {
     optionsOverlayNode.checked = enableOverlay;
+    optionsConsoleLoggingNode.checked = debug;
   });
 }
 document.addEventListener('DOMContentLoaded', restoreOptions);