Add icons and persist across pages and refreshes

Author: aluhrs13

background.js

@@ -0,0 +1,57 @@
+// Background service worker for managing extension icon state
+
+// Listen for messages from content scripts
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  if (message.type === 'jankStatus') {
+    updateIcon(message.isActive);
+  }
+  sendResponse({ received: true });
+  return true;
+});
+
+// Update the extension icon based on active state
+function updateIcon(isActive) {
+  if (isActive) {
+    // Set icon to green when active
+    chrome.action.setIcon({
+      path: {
+        16: 'icons/icon-green-16.png',
+        32: 'icons/icon-green-32.png',
+        48: 'icons/icon-green-48.png',
+        128: 'icons/icon-green-128.png',
+      },
+    });
+  } else {
+    // Reset to default icon when inactive
+    chrome.action.setIcon({
+      path: {
+        16: 'icons/icon-16.png',
+        32: 'icons/icon-32.png',
+        48: 'icons/icon-48.png',
+        128: 'icons/icon-128.png',
+      },
+    });
+  }
+}
+
+// Check storage on startup to restore icon state
+chrome.runtime.onStartup.addListener(() => {
+  chrome.storage.local.get(['jankSettings'], (result) => {
+    if (result.jankSettings && result.jankSettings.isActive) {
+      updateIcon(true);
+    } else {
+      updateIcon(false);
+    }
+  });
+});
+
+// Also check when the service worker is installed
+chrome.runtime.onInstalled.addListener(() => {
+  chrome.storage.local.get(['jankSettings'], (result) => {
+    if (result.jankSettings && result.jankSettings.isActive) {
+      updateIcon(true);
+    } else {
+      updateIcon(false);
+    }
+  });
+});

content.js

@@ -14,6 +14,7 @@ function doJank(time = 200) {
 
 let interval;
 let isActive = false;
+let currentSettings = null; // Store current interval settings
 
 // Long task tracking data
 let longTasksData = {
@@ -45,6 +46,58 @@ function initPerformanceObserver() {
 // Call this when page loads
 initPerformanceObserver();
 
+// Restore interval state on page load
+function restoreIntervalState() {
+  chrome.storage.local.get(['jankSettings'], (result) => {
+    if (result.jankSettings && result.jankSettings.isActive) {
+      const settings = result.jankSettings;
+      startJankInterval(settings.time, settings.interval);
+    }
+  });
+}
+
+// Start the jank interval
+function startJankInterval(time, intervalTime) {
+  doJank(time);
+  clearInterval(interval);
+  isActive = true;
+  currentSettings = { time, interval: intervalTime };
+
+  interval = setInterval(function () {
+    doJank(time);
+  }, intervalTime);
+
+  // Save settings to storage
+  chrome.storage.local.set({
+    jankSettings: {
+      isActive: true,
+      time: time,
+      interval: intervalTime,
+    },
+  });
+
+  sendStatusToPopup();
+}
+
+// Stop the jank interval
+function stopJankInterval() {
+  clearInterval(interval);
+  isActive = false;
+  currentSettings = null;
+
+  // Clear settings from storage
+  chrome.storage.local.set({
+    jankSettings: {
+      isActive: false,
+    },
+  });
+
+  sendStatusToPopup();
+}
+
+// Restore state when content script loads
+restoreIntervalState();
+
 // Group long tasks by duration range
 function analyzeLongTaskDistribution() {
   const distribution = {
@@ -119,18 +172,9 @@ addEventListener('message', (event) => {
   const data = event.data;
 
   if (data && data.action === 'doJank') {
-    clearInterval(interval);
-    isActive = true;
-
-    interval = setInterval(function () {
-      doJank(data.time);
-    }, data.interval);
-
-    sendStatusToPopup();
+    startJankInterval(data.time, data.interval);
   } else if (data && data.action === 'stopJank') {
-    clearInterval(interval);
-    isActive = false;
-    sendStatusToPopup();
+    stopJankInterval();
   } else if (data && data.action === 'getStatus') {
     sendStatusToPopup();
   } else if (data && data.action === 'getLongTaskData') {