show notifications when a request is denied or accepted.

extension/background.js

@@ -101,9 +101,44 @@ async function handleContentScriptMessage({type, params, host}) {
     if (allowed === true) {
       // authorized, proceed
       releasePromptMutex()
+      browser.notifications
+        .create(undefined, {
+          type: 'basic',
+          title: `${type} allowed for ${host}`,
+          message: JSON.stringify(
+            params?.event
+              ? {
+                  kind: params.event.kind,
+                  content: params.event.content,
+                  tags: params.event.tags
+                }
+              : params,
+            null,
+            2
+          ),
+          iconUrl: 'icons/denied48.png'
+        })
+        .then(console.log)
+        .catch(console.log)
     } else if (allowed === false) {
       // denied, just refuse immediately
       releasePromptMutex()
+      browser.notifications.create(undefined, {
+        type: 'basic',
+        title: `${type} denied for ${host}`,
+        message: JSON.stringify(
+          params?.event
+            ? {
+                kind: params.event.kind,
+                content: params.event.content,
+                tags: params.event.tags
+              }
+            : params,
+          null,
+          2
+        ),
+        iconUrl: 'icons/denied48.png'
+      })
       return {
         error: 'denied'
       }

extension/manifest.json

@@ -26,6 +26,7 @@
     }
   ],
   "permissions": ["storage"],
+  "optional_permissions": ["notifications"],
   "web_accessible_resources": [
     {
       "resources": ["nostr-provider.js"],

extension/options.jsx

@@ -13,6 +13,7 @@ function Options() {
   let [policies, setPermissions] = useState()
   let [protocolHandler, setProtocolHandler] = useState(null)
   let [hidingPrivateKey, hidePrivateKey] = useState(true)
+  let [showNotifications, setNotifications] = useState(false)
   let [message, setMessage] = useState('')
 
   const showMessage = useCallback(msg => {
@@ -22,7 +23,7 @@ function Options() {
 
   useEffect(() => {
     browser.storage.local
-      .get(['private_key', 'relays', 'protocol_handler'])
+      .get(['private_key', 'relays', 'protocol_handler', 'notifications'])
       .then(results => {
         if (results.private_key) {
           setPrivKey(nip19.nsecEncode(results.private_key))
@@ -40,6 +41,9 @@ function Options() {
         if (results.protocol_handler) {
           setProtocolHandler(results.protocol_handler)
         }
+        if (results.notifications) {
+          setNotifications(true)
+        }
       })
   }, [])
 
@@ -156,7 +160,23 @@ function Options() {
         </label>
         {policies?.length > 0 && (
           <>
+            <div style={{display: 'flex', alignItems: 'center'}}>
               <h2>policies</h2>
+              <label
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  marginLeft: '14px'
+                }}
+              >
+                show a notification when a permission is used by a page
+                <input
+                  type="checkbox"
+                  checked={showNotifications}
+                  onClick={handleNotifications}
+                />
+              </label>
+            </div>
             <table>
               <thead>
                 <tr>
@@ -355,6 +375,20 @@ function Options() {
     }
   }
 
+  async function handleNotifications() {
+    if (showNotifications) {
+      setNotifications(false)
+    } else {
+      let granted = await browser.permissions.request({
+        permissions: ['notifications']
+      })
+      if (granted) {
+        await browser.storage.local.set({notifications: true})
+        setNotifications(true)
+      }
+    }
+  }
+
   async function saveRelays() {
     await browser.storage.local.set({
       relays: Object.fromEntries(