Add "enable required permissions" button when perms are unavailable

manifest.shared.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Custom Bang Search",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "description": "Use custom DuckDuckGo-like bangs directly from the address bar",
   "icons": {
     "96": "images/icons/icon_96.png",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "custombangsearch",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "description": "A browser extension to use custom DuckDuckGo-like bangs directly from the address bar",
   "main": "",
   "scripts": {

src/lib/components/PermissionsRequester.tsx

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from 'react';
+
+import { Button } from '@chakra-ui/react';
+
+import browser from 'webextension-polyfill';
+
+import { hostPermissions } from '../esbuilddefinitions';
+
+const requestedPermissions = { origins: hostPermissions };
+
+type PropTypes = {
+  closeWindow: boolean,
+};
+
+export default function PermissionsRequester(props: PropTypes): React.ReactElement | null {
+  const [hasPermissions, setHasPermissions] = useState<boolean>(false);
+
+  const { closeWindow } = props;
+
+  useEffect(() => {
+    (async () => {
+      const has = await browser.permissions.contains(requestedPermissions);
+      if (has) {
+        setHasPermissions(true);
+      }
+    })();
+  }, []);
+
+  const clicked = () => {
+    browser.permissions.request(requestedPermissions).then(() => {
+      window.location.reload();
+    });
+    if (closeWindow === true) {
+      window.close();
+    }
+  };
+
+  if (hasPermissions) {
+    return null;
+  }
+
+  return (
+    <Button
+      variant="solid"
+      colorScheme="red"
+      onClick={clicked}
+    >
+      Enable Required Permissions
+    </Button>
+  );
+}

src/optionsui/components/RenderCounter.tsx

@@ -4,7 +4,7 @@ import { dev } from '../../lib/esbuilddefinitions';
 
 // A simple render counter for debugging purposes.
 // Can't use normal react debugging tools on extension pages :(
-export default function RenderCounter() {
+export default function RenderCounter(): React.ReactElement | null {
   const renderCounter = useRef(0);
   if (!dev) {
     return null;

src/optionsui/options.tsx

@@ -21,6 +21,7 @@ import * as storage from '../lib/storage';
 import MiscButtons from '../lib/components/MiscButtons';
 import { currentBrowser } from '../lib/esbuilddefinitions';
 import RenderCounter from './components/RenderCounter';
+import PermissionsRequester from '../lib/components/PermissionsRequester';
 
 const BROWSER_QUOTA_BYTES_PER_ITEM = currentBrowser === 'chrome' ? browser.storage.sync.QUOTA_BYTES_PER_ITEM : 8192;
 
@@ -197,6 +198,7 @@ function App(): React.ReactElement {
     <Box width={widthPercent} margin="auto">
       <HStack justifyContent="space-between">
         <Heading padding="0.5em 2rem">Custom Bang Search</Heading>
+        <PermissionsRequester closeWindow={false} />
         <RenderCounter />
         <MiscButtons />
       </HStack>

src/popup/popup.tsx

@@ -9,6 +9,7 @@ import browser from 'webextension-polyfill';
 
 import theme from '../lib/theme';
 import MiscButtons from '../lib/components/MiscButtons';
+import PermissionsRequester from '../lib/components/PermissionsRequester';
 import { dev, version } from '../lib/esbuilddefinitions';
 
 import DevTools from './devtools';
@@ -20,6 +21,7 @@ function App(): React.ReactElement {
       <Text>{`v${version}`}</Text>
       <MiscButtons />
       <Button variant="outline" onClick={() => { browser.runtime.openOptionsPage(); }}>Options</Button>
+      <PermissionsRequester closeWindow />
       {dev && <DevTools />}
     </VStack>
   );