working v1.

extension/prompt.jsx

@@ -0,0 +1,71 @@
+import browser from 'webextension-polyfill'
+import {render} from 'react-dom'
+import React from 'react'
+
+import {getAllowedCapabilities} from './common'
+
+function Prompt() {
+  let qs = new URLSearchParams(location.search)
+  let id = qs.get('id')
+  let host = qs.get('host')
+  let level = parseInt(qs.get('level'))
+
+  return (
+    <>
+      <div>
+        <b style={{display: 'block', textAlign: 'center', fontSize: '200%'}}>
+          {host}
+        </b>{' '}
+        <p>is requesting your permission to </p>
+        <ul>
+          {getAllowedCapabilities(level).map(cap => (
+            <li key={cap}>
+              <i style={{fontSize: '140%'}}>{cap}</i>
+            </li>
+          ))}
+        </ul>
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          justifyContent: 'space-around'
+        }}
+      >
+        <button
+          style={{marginTop: '5px'}}
+          onClick={authorizeHandler('forever')}
+        >
+          authorize forever
+        </button>
+        <button
+          style={{marginTop: '5px'}}
+          onClick={authorizeHandler('expirable')}
+        >
+          authorize for 5 minutes
+        </button>
+        <button style={{marginTop: '5px'}} onClick={authorizeHandler('single')}>
+          authorize just this
+        </button>
+        <button style={{marginTop: '5px'}} onClick={authorizeHandler('no')}>
+          cancel
+        </button>
+      </div>
+    </>
+  )
+
+  function authorizeHandler(condition) {
+    return function (ev) {
+      ev.preventDefault()
+      browser.runtime.sendMessage({
+        prompt: true,
+        id,
+        host,
+        level,
+        condition
+      })
+    }
+  }
+}
+
+render(<Prompt />, document.getElementById('main'))