making it work.

build.js

@@ -5,22 +5,16 @@ const alias = require('esbuild-plugin-alias')
 
 esbuild.build({
   bundle: true,
-  entryPoints: ['./extension/options.js'],
-  outfile: './extension/options.build.js',
+  entryPoints: {
+    'options.build': './extension/options.js',
+    'content-script.build': './extension/content-script.js',
+    'background.build': './extension/background.js'
+  },
+  outdir: './extension',
   plugins: [
     alias({
       stream: require.resolve('readable-stream')
     })
-  ]
-})
-
-esbuild.build({
-  bundle: true,
-  entryPoints: ['./extension/background.js'],
-  outfile: './extension/background.build.js',
-  plugins: [
-    alias({
-      stream: require.resolve('readable-stream')
-    })
-  ]
+  ],
+  sourcemap: 'inline'
 })

extension/content-script.js

@@ -1,6 +1,10 @@
+import browser from 'webextension-polyfill'
+
 // inject the script that will provide window.nostr
 let script = document.createElement('script')
-script.src = 'nostr-provider.js'
+script.setAttribute('async', 'false')
+script.setAttribute('type', 'text/javascript')
+script.setAttribute('src', browser.runtime.getURL('nostr-provider.js'))
 document.head.appendChild(script)
 
 // listen for messages from that script

extension/manifest.json

@@ -13,12 +13,13 @@
   "content_scripts": [{
     "matches": ["<all_urls>"],
     "js": [
-      "content-script.js"
+      "content-script.build.js"
     ]
   }],
   "permissions": [
     "activeTab",
     "storage"
   ],
+  "web_accessible_resources": ["nostr-provider.js"],
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self';"
 }

extension/nostr-provider.js

@@ -32,6 +32,7 @@ window.nostr = {
 window.addEventListener('message', message => {
   if (
     !message.data ||
+    !message.data.response ||
     message.data.ext !== 'nos2x' ||
     !window.nostr._requests[message.data.id]
   )

extension/options.html

@@ -3,9 +3,14 @@
 <meta charset="utf-8" />
 <title>nos2x</title>
 
+<h1>nos2x</h1>
+<p>nostr signer extension</p>
+
 <label>
-  Private Key:
+  private key:
   <input id="privateKeyInput" />
 </label>
 
+<div id="message"></div>
+
 <script src="options.build.js"></script>

extension/options.js

@@ -2,14 +2,26 @@
 
 import browser from 'webextension-polyfill'
 
-document.getElementById('privateKeyInput').addEventListener('input', ev => {
-  browser.storage.local
-    .set({private_key: document.getElementById('privateKeyInput').value})
-    .then(() => {
-      console.log('success')
+document
+  .getElementById('privateKeyInput')
+  .addEventListener('input', async ev => {
+    try {
+      await browser.storage.local.set({
+        private_key: document.getElementById('privateKeyInput').value
       })
+      showMessage('saved!')
+    } catch (err) {
+      showMessage(`error! ${err}`)
+    }
   })
 
 browser.storage.local.get('private_key').then(results => {
   document.getElementById('privateKeyInput').value = results.private_key
 })
+
+function showMessage(str) {
+  document.getElementById('message').innerHTML = str
+  setTimeout(() => {
+    document.getElementById('message').innerHTML = ''
+  }, 5000)
+}