Less permissions + optional host permissions + no external assets

src/Popup.css

@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;800&display=swap');
-
 html {
   min-height: 300px;
   min-width: 300px;
@@ -9,7 +7,6 @@ body {
   min-height: 300px;
   min-width: 300px;
   margin: 0;
-  font-family: 'Inter', sans-serif;
 }
 
 .popup {

src/components/PermissionMissingScreen.tsx

@@ -1,17 +1,20 @@
+import { useCallback } from 'react';
+
 import { Icon } from '~components/Icon';
 
 import '~tabs/PermissionGrant.css';
 
-export interface PermissionMissingProps {
-  onGrant?: () => void;
-}
+export function PermissionMissingScreen() {
+  const open = useCallback(() => {
+    const url = (chrome || browser).runtime.getURL(`/tabs/PermissionRequest.html`);
+    (chrome || browser).tabs.create({ url });
+  }, []);
 
-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}>
+      <button type="button" className="grant-permission-btn" onClick={open}>
         Grant Permission
       </button>
     </div>

src/contents/movie-web.ts

@@ -2,8 +2,7 @@ import { relayMessage } from '@plasmohq/messaging';
 import type { PlasmoCSConfig } from 'plasmo';
 
 export const config: PlasmoCSConfig = {
-  // <all_urls> works for chrome, but not for firefox, so we add explicit domains for firefox
-  matches: ['<all_urls>', 'https://dev.movie-web.app/*', 'https://movie-web.app/*'],
+  matches: ['<all_urls>'],
 };
 
 relayMessage({

src/popup.tsx

@@ -5,13 +5,15 @@ 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';
 
+import './Popup.css';
+import './tabs/font.css';
+
 function IndexPopup() {
   const domain = useDomain();
   const { isWhitelisted, toggle } = useToggleWhitelistDomain(domain);
-  const { grantPermission, hasPermission } = usePermission();
+  const { hasPermission } = usePermission();
 
   let page = 'toggle';
   if (!hasPermission) page = 'perm';
@@ -22,7 +24,7 @@ function IndexPopup() {
       <div className="popup">
         {page === 'toggle' ? <ToggleButton active={isWhitelisted} onClick={toggle} domain={domain} /> : null}
         {page === 'disabled' ? <DisabledScreen /> : null}
-        {page === 'perm' ? <PermissionMissingScreen onGrant={grantPermission} /> : null}
+        {page === 'perm' ? <PermissionMissingScreen /> : null}
         <BottomLabel />
       </div>
     </Frame>

src/tabs/PermissionGrant.css

@@ -1,10 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;800&display=swap');
-
-* {
-  margin: 0;
-  padding: 0;
-}
-
 html {
   height: 100%;
 }

src/tabs/PermissionGrant.tsx

@@ -2,6 +2,7 @@ import { useDomainWhitelist } from '~hooks/useDomainWhitelist';
 import { usePermission } from '~hooks/usePermission';
 import { makeUrlIntoDomain } from '~utils/domains';
 
+import './font.css';
 import './PermissionGrant.css';
 
 export default function PermissionGrant() {

src/tabs/PermissionRequest.tsx

@@ -0,0 +1,36 @@
+import { useCallback } from 'react';
+
+import { usePermission } from '~hooks/usePermission';
+
+import './font.css';
+import './PermissionRequest.css';
+
+export default function PermissionRequest() {
+  const { grantPermission } = usePermission();
+
+  const grant = useCallback(() => {
+    grantPermission().then(() => window.close());
+  }, [grantPermission]);
+
+  return (
+    <div className="container">
+      <div className="inner-container">
+        <h1 className="color-white">Permission</h1>
+        <p className="text-color" style={{ fontSize: 13 }}>
+          Websites need to ask for permission <br /> before they can use this extension
+        </p>
+        <div className="permission-card">
+          <p className="text-color" style={{ textAlign: 'center' }}>
+            The website <span className="color-white">hello world</span> wants to <br /> use the extension on their
+            page.
+          </p>
+        </div>
+        <div className="footer">
+          <button type="button" className="grant-permission-btn" onClick={grant}>
+            Grant Permission
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/tabs/font.css

@@ -0,0 +1,24 @@
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(data-base64:~assets/inter/regular.ttf) format("ttf");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: bold;
+  font-weight: 700;
+  font-display: swap;
+  src: url(data-base64:~assets/inter/bold.ttf) format("ttf");
+}
+
+body {
+  font-family: "Inter", Arial, Helvetica, sans-serif;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}