diff --git a/Shared (Extension)/Resources/popup.js b/Shared (Extension)/Resources/popup.js
index 18829a4..b14e0e5 100644
--- a/Shared (Extension)/Resources/popup.js	
+++ b/Shared (Extension)/Resources/popup.js	
@@ -1,4 +1,9 @@
-import { bglog } from './utils';
+import {
+    bglog,
+    getProfileNames,
+    setProfileIndex,
+    getProfileIndex,
+} from './utils';
 import Alpine from 'alpinejs';
 window.Alpine = Alpine;
 
@@ -13,40 +18,33 @@ Alpine.data('popup', () => ({
         await browser.runtime.sendMessage({ kind: 'init' });
 
         this.$watch('profileIndex', async () => {
-            await this.getProfileNames();
+            await this.loadNames();
             await this.setProfileIndex();
         });
 
-        // Even though getProfileIndex will immediately trigger a profile refresh, we still
+        // Even though loadProfileIndex will immediately trigger a profile refresh, we still
         // need to do an initial profile refresh first. This will pull the latest data from
         // the background scripts. Specifically, this pulls the list of profile names,
         // otherwise it generates a rendering error where it may not show the correct selected
         // profile when first loading the popup.
-        await this.getProfileNames();
-        await this.getProfileIndex();
+        await this.loadNames();
+        await this.loadProfileIndex();
     },
 
     async setProfileIndex() {
         // Becauset the popup state resets every time it open, we use null as a guard. That way
         // whenever the user opens the popup, it doesn't automatically reset the current profile
         if (this.profileIndex !== null) {
-            await browser.runtime.sendMessage({
-                kind: 'setProfileIndex',
-                payload: this.profileIndex,
-            });
+            await setProfileIndex(this.profileIndex);
         }
     },
 
-    async getProfileNames() {
-        this.profileNames = await browser.runtime.sendMessage({
-            kind: 'getProfileNames',
-        });
+    async loadNames() {
+        this.profileNames = await getProfileNames();
     },
 
-    async getProfileIndex() {
-        this.profileIndex = await browser.runtime.sendMessage({
-            kind: 'getProfileIndex',
-        });
+    async loadProfileIndex() {
+        this.profileIndex = await getProfileIndex();
     },
 
     async openOptions() {
diff --git a/Shared (Extension)/Resources/utils.js b/Shared (Extension)/Resources/utils.js
index 7e7aa29..36a4db6 100644
--- a/Shared (Extension)/Resources/utils.js	
+++ b/Shared (Extension)/Resources/utils.js	
@@ -1,6 +1,22 @@
+const storage = browser.storage.local;
+
 export async function bglog(msg, module = null) {
     await browser.runtime.sendMessage({
         kind: 'log',
         payload: { msg, module },
     });
 }
+
+export async function getProfileNames() {
+    let profiles = await storage.get({ profiles: [] });
+    return profiles.profiles.map(p => p.name);
+}
+
+export async function getProfileIndex() {
+    const index = await storage.get({ profileIndex: 0 });
+    return index.profileIndex;
+}
+
+export async function setProfileIndex(profileIndex) {
+    await storage.set({ profileIndex });
+}