tweaking the UI, not working quite yet. may totally revise

Shared (Extension)/Resources/background.js

@@ -2,37 +2,89 @@ import { generatePrivateKey, getPublicKey } from "nostr-tools";
 
 const storage = browser.storage.local;
 
-let profiles = [
-    {name: 'Default', privKey: generatePrivateKey(), hosts: [
-        {host: 'yosup.app', allowed: true},
-        {host: 'iris.to', allowed: false},
-    ]},
-    {name: 'Extra', privKey: generatePrivateKey(), hosts: []},
-];
-
-let profileIndex = 0;
-
 browser.runtime.onMessage.addListener(async (message, _sender, sendResponse) => {
     console.log(message);
-    if (message.kind === 'getPubKey') {
-        const privKey = getPublicKey(message.payload);
-        sendResponse(privKey);
-    } else if (message.kind === 'newKey') {
-        const privKey = generatePrivateKey();
-        sendResponse(privKey);
-    } else if (message.kind === 'getProfiles') {
-        sendResponse(profiles);
-    } else if (message.kind === 'getProfileIndex') {
+
+    switch (message.kind) {
+        case 'init':
+            await initialize();
+            break;
+        case 'getProfiles':
+            let names = await getProfileNames();
+            sendResponse(names);
+            break;
+        case 'getProfileIndex':
             sendResponse(await getProfileIndex());
-    } else if (message.kind === 'setProfileIndex') {
+            break;
+        case 'setProfileIndex':
             await setProfileIndex(message.payload);
+            break;
+        case 'getActiveProfile':
+            let ap = await currentProfile();
+            sendResponse(ap);
+            break;
+        case 'newKey':
+            sendResponse(generatePrivateKey());
+            break;
+        case 'newProfile':
+            sendResponse(await newProfile());
+            break;
+        default:
+            break;
     }
 });
 
+async function get(item) {
+    return (await storage.get(item))[item];
+}
+
+async function getOrSetDefault(key, def) {
+    let val = storage.get(key)[key];
+    if (!val) {
+        await storage.set({[key]: def});
+        return def;
+    }
+
+    return val;
+}
+
+async function initialize() {
+    await getOrSetDefault('profileIndex', 0);
+    await getOrSetDefault('profiles', [{name: 'Default', privKey: generatePrivateKey(), hosts: []}]);
+}
+
 async function getProfileIndex() {
-    return await storage.get('profileIndex').profileIndex;
+    return (await storage.get('profileIndex')).profileIndex;
 }
 
 async function setProfileIndex(profileIndex) {
     await storage.set({profileIndex});
 }
+
+async function currentProfile() {
+    let index = (await storage.get('profileIndex')).profileIndex;
+    let profiles = (await storage.get('profiles')).profiles;
+
+    if (!profiles || !profiles[index]) {
+        let newProfile = {name: 'Default', privKey: generatePrivateKey(), hosts: []};
+        await storage.set({profileIndex: 0});
+        await storage.set({profiles: [newProfile]});
+        return newProfile;
+    }
+
+    return profiles[index];
+}
+
+async function getProfileNames() {
+    let profiles = (await storage.get({profiles: []})).profiles;
+    console.log('Profiles: ', profiles);
+    return profiles.map(p => p.name);
+}
+
+async function newProfile() {
+    let profiles = await get('profiles');
+    const newProfile = {name: 'New Profile', privKey: generatePrivateKey(), hosts: []};
+    profiles.push(newProfile);
+    await storage.set({profiles});
+    return profiles.index - 1;
+}

Shared (Extension)/Resources/popup.html

@@ -10,7 +10,7 @@
         <label for="profile">Profile</label>
         <select x-model="profileIndex" name="profile" id="profile" @change="setProfileIndex()">
             <template x-for="(prof, index) in profiles">
-                <option x-text="prof.name" :value="index"></option>
+                <option x-text="prof" :value="index"></option>
             </template>
         </select>
         <button @click="newProfile">New</button>
@@ -18,12 +18,12 @@
 
     <div class="profile-name">
         <label for="profile-name">Profile Name</label>
-        <input type="text" id="profile-name" x-model="profile.name">
+        <input type="text" id="profile-name" x-model="activeProfile.name">
     </div>
     
     <div class="key">
         <label for="priv-key">Private Key</label>
-        <input id="priv-key" x-model="profile.privKey" :type="visibleKey ? 'text' : 'password'">
+        <input id="priv-key" x-model="activeProfile.privKey" :type="visibleKey ? 'text' : 'password'">
     </div>
 
     <div class="buttons">

Shared (Extension)/Resources/popup.js

@@ -3,17 +3,39 @@ window.Alpine = Alpine;
 
 Alpine.data('popup', () => ({
     pubKey: '',
-    profiles: [{name: 'Default', privKey: '', hosts: []}],
+    profiles: [],
     profileIndex: 0,
+    activeProfile: {hosts: []},
     visibleKey: false,
 
     async init() {
+        console.log("Initializing backend.");
+        await browser.runtime.sendMessage({kind: 'init'});
+        console.log('Getting profile list.')
         await this.getProfiles();
+        console.log('Getting active profile.');
+        await this.getActiveProfile();
+        console.log('Getting pub key.');
         await this.getPubKey();
+        console.log('profiles: ', this.profiles);
     },
 
-    async saveKey() {
+    async saveKey() {},
+
+    async setProfileByIndex(index) {
+        this.profileIndex = index;
+        await this.resetProfile();
+    },
+
+    async resetProfile() {
+        await this.setProfileIndex();
+        await this.getActiveProfile();
         await this.getPubKey();
+        await this.getProfiles();
+    },
+    
+    async getActiveProfile() {
+        this.activeProfile = await browser.runtime.sendMessage({kind: 'getActiveProfile'});
     },
 
     async getProfiles() {
@@ -23,7 +45,6 @@ Alpine.data('popup', () => ({
 
     async setProfileIndex() {
         await browser.runtime.sendMessage({kind: 'setProfileIndex', payload: this.profileIndex});
-        await this.getPubKey();
     },
 
     async deleteSite(index) {
@@ -33,31 +54,24 @@ Alpine.data('popup', () => ({
     },
 
     async getPubKey() {
-        this.pubKey = await browser.runtime.sendMessage({kind: 'getPubKey', payload: this.profile.privKey});
+        this.pubKey = await browser.runtime.sendMessage({kind: 'getPubKey', payload: this.activeProfile.privKey});
     },
 
     async newProfile() {
-        let newKey = await browser.runtime.sendMessage({kind: 'newKey'});
-        const newProfile = {name: 'New Profile', privKey: newKey};
-        this.profiles.push(newProfile);
-        this.profileIndex = this.profiles.length - 1;
-        await this.setProfileIndex();
+        const newIndex = await browser.runtime.sendMessage({kind: 'newProfile'});
+        await this.setProfileByIndex(newIndex);
     },
 
     get hasValidPubKey() {
         return typeof(this.pubKey) === 'string' && this.pubKey.length > 0;
     },
 
-    get profile() {
-        return this.profiles[this.profileIndex];
-    },
-
     get hosts() {
-        return this.profile.hosts;
+        return this.activeProfile.hosts;
     },
 
     set hosts(value) {
-        this.profiles[this.profileIndex].hosts = value;
+        this.activeProfile.hosts = value;
     }
 }));