nostr: link replacing.

this commit also includes (unrelated) naïvely hiding the private key and displaying on blur/focus.

extension/options.jsx

@@ -14,6 +14,8 @@ function Options() {
   let [relays, setRelays] = useState([])
   let [newRelayURL, setNewRelayURL] = useState('')
   let [permissions, setPermissions] = useState()
+  let [protocolHandler, setProtocolHandler] = useState(null)
+  let [hidingPrivateKey, hidePrivateKey] = useState(true)
   let [message, setMessage] = useState('')
 
   const showMessage = useCallback(msg => {
@@ -22,25 +24,45 @@ function Options() {
   })
 
   useEffect(() => {
-    browser.storage.local.get(['private_key', 'relays']).then(results => {
-      if (results.private_key) setKey(nip19.nsecEncode(results.private_key))
-      if (results.relays) {
-        let relaysList = []
-        for (let url in results.relays) {
-          relaysList.push({
-            url,
-            policy: results.relays[url]
-          })
+    browser.storage.local
+      .get(['private_key', 'relays', 'protocol_handler'])
+      .then(results => {
+        if (results.private_key) setKey(nip19.nsecEncode(results.private_key))
+        if (results.relays) {
+          let relaysList = []
+          for (let url in results.relays) {
+            relaysList.push({
+              url,
+              policy: results.relays[url]
+            })
+          }
+          setRelays(relaysList)
         }
-        setRelays(relaysList)
-      }
-    })
+        if (results.protocol_handler) {
+          setProtocolHandler(results.protocol_handler)
+        }
+      })
   }, [])
 
   useEffect(() => {
     loadPermissions()
   }, [])
 
+  function loadPermissions() {
+    readPermissions().then(permissions => {
+      setPermissions(
+        Object.entries(permissions).map(
+          ([host, {level, condition, created_at}]) => ({
+            host,
+            level,
+            condition,
+            created_at
+          })
+        )
+      )
+    })
+  }
+
   return (
     <>
       <h1>nos2x</h1>
@@ -89,15 +111,18 @@ function Options() {
           </div>
         </div>
       </div>
-      <div>
+      <div style={{marginBottom: '10px'}}>
         <label>
           <div>private key:&nbsp;</div>
           <div style={{marginLeft: '10px'}}>
             <div style={{display: 'flex'}}>
               <input
-                style={{width: '500px'}}
+                type={hidingPrivateKey ? 'password' : 'text'}
+                style={{width: '600px'}}
                 value={key}
                 onChange={handleKeyChange}
+                onFocus={() => hidePrivateKey(false)}
+                onBlur={() => hidePrivateKey(true)}
               />
               {key === '' && <button onClick={generate}>generate</button>}
             </div>
@@ -144,6 +169,70 @@ function Options() {
           </>
         )}
       </div>
+      <div>
+        <h2>
+          handle{' '}
+          <span style={{padding: '2px', background: 'silver'}}>nostr:</span>{' '}
+          links:
+        </h2>
+        <div style={{marginLeft: '10px'}}>
+          <div>
+            <label>
+              <input
+                type="radio"
+                name="ph"
+                value="no"
+                checked={protocolHandler === null}
+                onChange={handleChangeProtocolHandler}
+              />{' '}
+              no
+            </label>
+          </div>
+          <div>
+            <label>
+              <input
+                type="radio"
+                name="ph"
+                value="yes"
+                checked={protocolHandler !== null}
+                onChange={handleChangeProtocolHandler}
+              />
+              yes
+            </label>
+          </div>
+          {protocolHandler !== null && (
+            <div>
+              <input
+                placeholder="url template"
+                value={protocolHandler}
+                onChange={handleChangeProtocolHandler}
+                style={{width: '680px', maxWidth: '90%'}}
+              />
+              <pre>{`
+  {hex} = hex pubkey for npub or nprofile, hex event id for note or nevent
+  {p_or_e} = "p" for npub or nprofile, "e" for note or nevent
+  {u_or_n} = "u" for npub or nprofile, "n" for note or nevent
+  {relay0} = first relay in a nprofile or nevent
+  {relay1} = second relay in a nprofile or nevent
+  {relay2} = third relay in a nprofile or nevent
+  {raw} = anything after the colon, i.e. the full nip19 bech32 string
+  {hrp} = human-readable prefix of the nip19 string
+
+  examples:
+    - https://nostr.guru/{p_or_e}/{hex}
+    - https://brb.io/{u_or_n}/{hex}
+    - https://notes.blockcore.net/{p_or_e}/{hex}
+              `}</pre>
+            </div>
+          )}
+          <button
+            style={{marginTop: '10px'}}
+            onClick={saveNostrProtocolHandlerSettings}
+          >
+            save
+          </button>
+        </div>
+      </div>
       <div style={{marginTop: '12px', fontSize: '120%'}}>{message}</div>
     </>
   )
@@ -216,7 +305,6 @@ function Options() {
   }
 
   async function handleRevoke(e) {
-    e.preventDefault()
     let host = e.target.dataset.domain
     if (window.confirm(`revoke all permissions from ${host}?`)) {
       await removePermissions(host)
@@ -225,21 +313,6 @@ function Options() {
     }
   }
 
-  function loadPermissions() {
-    readPermissions().then(permissions => {
-      setPermissions(
-        Object.entries(permissions).map(
-          ([host, {level, condition, created_at}]) => ({
-            host,
-            level,
-            condition,
-            created_at
-          })
-        )
-      )
-    })
-  }
-
   async function saveRelays() {
     await browser.storage.local.set({
       relays: Object.fromEntries(
@@ -250,6 +323,24 @@ function Options() {
     })
     showMessage('saved relays!')
   }
+
+  function handleChangeProtocolHandler(e) {
+    if (e.target.type === 'text') setProtocolHandler(e.target.value)
+    else
+      switch (e.target.value) {
+        case 'no':
+          setProtocolHandler(null)
+          break
+        case 'yes':
+          setProtocolHandler('')
+          break
+      }
+  }
+
+  async function saveNostrProtocolHandlerSettings() {
+    await browser.storage.local.set({protocol_handler: protocolHandler})
+    showMessage('saved protocol handler!')
+  }
 }
 
 render(<Options />, document.getElementById('main'))