diff --git a/src/browser_action/vitals.js b/src/browser_action/vitals.js index b328e27..4fdc615 100644 --- a/src/browser_action/vitals.js +++ b/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(); diff --git a/src/options/options.html b/src/options/options.html index 1f35c7d..eb5689f 100644 --- a/src/options/options.html +++ b/src/options/options.html @@ -17,6 +17,11 @@ Display HUD overlay +
+
diff --git a/src/options/options.js b/src/options/options.js index 3e072b3..5342a49 100644 --- a/src/options/options.js +++ b/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);