Make popout ask for permission

src/components/PermissionMissingScreen.tsx

@@ -0,0 +1,19 @@
+import { Icon } from '~components/Icon';
+
+import '~tabs/PermissionGrant.css';
+
+export interface PermissionMissingProps {
+  onGrant?: () => void;
+}
+
+export function PermissionMissingScreen(props: PermissionMissingProps) {
+  return (
+    <div className="disabled">
+      <Icon name="warningCircle" />
+      <p style={{ paddingBottom: 25, paddingTop: 10 }}>The extension is missing permissions it needs to function</p>
+      <button type="button" className="grant-permission-btn" onClick={props.onGrant}>
+        Grant Permission
+      </button>
+    </div>
+  );
+}

src/hooks/useDomainWhitelist.ts

@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
 
+import { usePermission } from '~hooks/usePermission';
 import { useDomainStorage } from '~utils/storage';
 
 export function useDomainWhitelist() {
@@ -25,11 +26,16 @@ export function useDomainWhitelist() {
 export function useToggleWhitelistDomain(domain: string) {
   const { domainWhitelist, addDomain, removeDomain } = useDomainWhitelist();
   const isWhitelisted = domainWhitelist.includes(domain);
+  const { grantPermission } = usePermission();
 
   const toggle = useCallback(() => {
-    if (isWhitelisted) removeDomain(domain);
-    else addDomain(domain);
-  }, [isWhitelisted, domain, addDomain, removeDomain]);
+    if (!isWhitelisted) {
+      addDomain(domain);
+      return;
+    }
+
+    removeDomain(domain);
+  }, [isWhitelisted, domain, addDomain, removeDomain, grantPermission]);
 
   return {
     toggle,

src/hooks/usePermission.ts

@@ -12,7 +12,7 @@ export function usePermission() {
   const { addDomain } = useDomainWhitelist();
   const [permission, setPermission] = useState(false);
 
-  const grantPermission = useCallback(async (domain: string) => {
+  const grantPermission = useCallback(async (domain?: string) => {
     const granted = await chrome.permissions.request({
       origins: ['<all_urls>'],
     });

src/popup.tsx

@@ -1,19 +1,28 @@
 import { BottomLabel } from '~components/BottomLabel';
 import { DisabledScreen } from '~components/DisabledScreen';
 import { Frame } from '~components/Frame';
+import { PermissionMissingScreen } from '~components/PermissionMissingScreen';
 import { ToggleButton } from '~components/ToggleButton';
 import { useDomain } from '~hooks/useDomain';
 import { useToggleWhitelistDomain } from '~hooks/useDomainWhitelist';
 import './Popup.css';
+import { usePermission } from '~hooks/usePermission';
 
 function IndexPopup() {
   const domain = useDomain();
   const { isWhitelisted, toggle } = useToggleWhitelistDomain(domain);
+  const { grantPermission, hasPermission } = usePermission();
+
+  let page = 'toggle';
+  if (!hasPermission) page = 'perm';
+  else if (!domain) page = 'disabled';
 
   return (
     <Frame>
       <div className="popup">
-        {!domain ? <DisabledScreen /> : <ToggleButton active={isWhitelisted} onClick={toggle} domain={domain} />}
+        {page === 'toggle' ? <ToggleButton active={isWhitelisted} onClick={toggle} domain={domain} /> : null}
+        {page === 'disabled' ? <DisabledScreen /> : null}
+        {page === 'perm' ? <PermissionMissingScreen onGrant={grantPermission} /> : null}
         <BottomLabel />
       </div>
     </Frame>