Solved a bug where the options window was breaking the popup window. The issue was that some branches of the message handler in the background script weren't returning anything at all.

Nostore.xcodeproj/project.pbxproj

@@ -81,6 +81,8 @@
 		948C69E3297F891F00FB3574 /* options.build.js in Resources */ = {isa = PBXBuildFile; fileRef = 948C69E1297F891F00FB3574 /* options.build.js */; };
 		948C69E5297F8BA600FB3574 /* options.build.css in Resources */ = {isa = PBXBuildFile; fileRef = 948C69E4297F8BA600FB3574 /* options.build.css */; };
 		948C69E6297F8BA600FB3574 /* options.build.css in Resources */ = {isa = PBXBuildFile; fileRef = 948C69E4297F8BA600FB3574 /* options.build.css */; };
+		948C69E82982DFE900FB3574 /* background.html in Resources */ = {isa = PBXBuildFile; fileRef = 948C69E72982DFE900FB3574 /* background.html */; };
+		948C69E92982DFE900FB3574 /* background.html in Resources */ = {isa = PBXBuildFile; fileRef = 948C69E72982DFE900FB3574 /* background.html */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -174,6 +176,7 @@
 		948C69DC297F88A200FB3574 /* options.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = options.js; sourceTree = "<group>"; };
 		948C69E1297F891F00FB3574 /* options.build.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = options.build.js; sourceTree = "<group>"; };
 		948C69E4297F8BA600FB3574 /* options.build.css */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.css; path = options.build.css; sourceTree = "<group>"; };
+		948C69E72982DFE900FB3574 /* background.html */ = {isa = PBXFileReference; lastKnownFileType = text.html; path = background.html; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -273,6 +276,7 @@
 				941B03A8296FA90400CA291E /* popup.html */,
 				941B03A9296FA90400CA291E /* popup.css */,
 				941B03AA296FA90400CA291E /* popup.js */,
+				948C69E72982DFE900FB3574 /* background.html */,
 			);
 			path = Resources;
 			sourceTree = "<group>";
@@ -495,6 +499,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				941B0413297110F100CA291E /* background.build.js in Resources */,
+				948C69E82982DFE900FB3574 /* background.html in Resources */,
 				948C69DF297F88A200FB3574 /* options.js in Resources */,
 				948C69DD297F88A200FB3574 /* options.css in Resources */,
 				941B03F2296FA90400CA291E /* background.js in Resources */,
@@ -528,6 +533,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				941B0414297110F100CA291E /* background.build.js in Resources */,
+				948C69E92982DFE900FB3574 /* background.html in Resources */,
 				948C69E0297F88A200FB3574 /* options.js in Resources */,
 				948C69DE297F88A200FB3574 /* options.css in Resources */,
 				941B03F3296FA90400CA291E /* background.js in Resources */,

Shared (Extension)/Resources/background.html

@@ -0,0 +1 @@
+<script src="background.build.js"></script>

Shared (Extension)/Resources/background.js

@@ -27,6 +27,9 @@ browser.runtime.onMessage.addListener(
         console.log(message);
 
         switch (message.kind) {
+            case 'log':
+                console.log('Background Log: ', message.payload);
+                break;
             case 'init':
                 await initialize();
                 break;
@@ -101,6 +104,7 @@ browser.runtime.onMessage.addListener(
             default:
                 break;
         }
+        return false;
     }
 );
 
@@ -121,7 +125,12 @@ async function getOrSetDefault(key, def) {
 async function initialize() {
     await getOrSetDefault('profileIndex', 0);
     await getOrSetDefault('profiles', [
-        { name: 'Default', privKey: generatePrivateKey(), hosts: [] },
+        {
+            name: 'Default',
+            privKey: generatePrivateKey(),
+            hosts: [],
+            relays: [],
+        },
     ]);
 }
 

Shared (Extension)/Resources/manifest.json

@@ -12,8 +12,7 @@
         "512": "images/icon-512.png"
     },
     "background": {
-        "service_worker": "background.build.js",
+        "page": "background.html"
-        "type": "module"
     },
     "content_scripts": [
         {
@@ -48,7 +47,8 @@
                 "nostr.build.js",
                 "popup.build.js",
                 "options.build.js",
-                "options.build.css"
+                "options.build.css",
+                "options.html"
             ],
             "matches": [
                 "<all_urls>"

Shared (Extension)/Resources/options.css

@@ -3,15 +3,15 @@
 @tailwind utilities;
 
 @layer components {
-  .btn {
+  .button {
-    @apply rounded-lg p-1.5 bg-fuchsia-900 text-fuchsia-400 hover:bg-fuchsia-800 hover:text-fuchsia-300 active:bg-fuchsia-700 active:text-fuchsia-200;
+    @apply rounded-lg p-1 lg:p-1.5 bg-fuchsia-900 hover:bg-fuchsia-800  active:bg-fuchsia-700 text-fuchsia-200 w-24 text-center;
   }
 
   .input {
-    @apply bg-fuchsia-200 text-fuchsia-800 rounded-lg p-1.5;
+    @apply bg-fuchsia-200 text-fuchsia-800 rounded-lg p-1 lg:p-1.5 focus:border-fuchsia-800;
   }
 
-  [type="checkbox"] {
+  .checkbox {
-    @apply text-fuchsia-800 bg-fuchsia-200 rounded-full accent-fuchsia-200 w-5 h-5;
+    @apply text-fuchsia-800 bg-fuchsia-200 rounded-full accent-fuchsia-200 w-4 h-4 lg:w-5 lg:h-5;
   }
 }

Shared (Extension)/Resources/options.html

@@ -9,16 +9,16 @@
 
 </head>
 
-<body x-data="options" class="text-fuchsia-900 bg-fuchsia-400 p-32">
+<body x-data="options" class="text-fuchsia-900  p-3.5 lg:p-32">
-  <h1 class="text-6xl font-bold">Advanced</h1>
+  <h1 class=" text-3xl lg:text-6xl font-bold">Advanced Settings</h1>
 
-  <select class="mt-3 input w-64" x-model.number="profileIndex" name="profiles" id="profiles" class="mt-3">
+  <select class="input mt-3 w-64" x-model.number="profileIndex" name="profiles" id="profiles">
     <template x-for="(profileName, index) in profileNames" :key="profileName">
       <option x-text="profileName" :value="index"></option>
     </template>
   </select>
 
-  <h2 class="text-5xl font-bold mt-6">Relays</h2>
+  <h2 class="text-2xl lg:text-5xl font-bold mt-6">Relays</h2>
 
   <table class="mt-3">
     <thead class="font-bold text-lg">
@@ -31,24 +31,25 @@
       <tr>
         <td class="p-2 w-1/3" x-text="relay.url"></td>
         <td class="p-2 text-center">
-          <input type="checkbox" x-model="relay.read" @change="await saveRelaysForProfile(index)">
+          <input class="checkbox" type="checkbox" x-model="relay.read" @change="await saveRelaysForProfile(index)">
         </td>
         <td class="p-2 text-center">
-          <input type="checkbox" x-model="relay.write" @change="await saveRelaysForProfile(index)">
+          <input class="checkbox" type="checkbox" x-model="relay.write" @change="await saveRelaysForProfile(index)">
         </td>
         <td class="p-2 text-center">
-          <button class="btn" @click="await deleteRelay(index)">Delete</button>
+          <button class="button" @click="await deleteRelay(index)">Delete</button>
         </td>
       </tr>
     </template>
   </table>
 
-  <input class="mt-3 input" x-model="newRelay" type="text" @keyup.enter="await addRelay()" placeholder="wss://...">
+  <input class="mt-3 input" x-model="newRelay" type="text" @keyup.enter="await addRelay()" placeholder="wss://..."
-  <button class="btn" @click="await addRelay()">Add</button>
+    autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="off">
+  <button class="button" @click="await addRelay()">Add</button>
   <div class="text-red-500 font-bold" x-show="urlError.length > 0" x-text="urlError"></div>
 
   <div class="mt-6">
-    <button class="btn" @click="window.close()">Close</button>
+    <button class="button" @click="window.close()">Close</button>
   </div>
 </body>
 

Shared (Extension)/Resources/options.js

@@ -9,6 +9,7 @@ Alpine.data('options', () => ({
     urlError: '',
 
     async init() {
+        await browser.runtime.getBackgroundPage();
         await this.getProfileNames();
         await this.getRelaysForProfile();
 

Shared (Extension)/Resources/popup.html

@@ -61,7 +61,7 @@
 
     <div class="help">
         <button @click='window.open("https://ursus.camp/nostore", "_blank")'>Get Help</button>
-        <button @click="browser.runtime.openOptionsPage()">Advanced</button>
+        <button @click="await openOptions()">Advanced</button>
     </div>
 
     <div class="disclaimer">

Shared (Extension)/Resources/popup.js

@@ -1,3 +1,5 @@
+console.log('test!');
+
 import Alpine from 'alpinejs';
 window.Alpine = Alpine;
 
@@ -61,11 +63,15 @@ Alpine.data('popup', () => ({
     },
 
     async getNpubKey() {
-        this.pubKey = await browser.runtime.sendMessage({ kind: 'getNpubKey' });
+        this.pubKey = await browser.runtime.sendMessage({
+            kind: 'getNpubKey',
+        });
     },
 
     async getHosts() {
-        this.hosts = await browser.runtime.sendMessage({ kind: 'getHosts' });
+        this.hosts = await browser.runtime.sendMessage({
+            kind: 'getHosts',
+        });
     },
 
     async getProfileNames() {
@@ -115,6 +121,11 @@ Alpine.data('popup', () => ({
         this.confirmDelete = false;
     },
 
+    async openOptions() {
+        await browser.runtime.openOptionsPage();
+        window.close();
+    },
+
     // Properties
 
     get hasValidPubKey() {

Shared (Extension)/Resources/utils.js

@@ -0,0 +1,3 @@
+export async function bglog(msg) {
+    await browser.runtime.sendMessage({ kind: 'log', payload: msg });
+}

build.js

@@ -22,7 +22,7 @@ require('esbuild')
         outdir: './Shared (Extension)/Resources',
         sourcemap: 'inline',
         bundle: true,
-        minify: true,
+        // minify: true,
         watch,
     })
     .catch(() => process.exit(1));