Add explicit support for Firefox Android

fix ts error, fix styling on PermissionRequest

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@movie-web/extension",
   "displayName": "movie-web extension",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Enhance your movie-web experience with just one click",
   "author": "movie-web",
   "scripts": {
@@ -53,6 +53,9 @@
     "browser_specific_settings": {
       "gecko": {
         "id": "{3fd86354-c73f-4395-9e26-2c5c984579bf}"
+      },
+      "gecko_android": {
+        "id": "{3fd86354-c73f-4395-9e26-2c5c984579bf}"
       }
     },
     "web_accessible_resources": [

src/components/SetupScreen.tsx

@@ -9,6 +9,7 @@ export function SetupScreen() {
   const open = useCallback(() => {
     const url = (chrome || browser).runtime.getURL(`/tabs/PermissionRequest.html`);
     (chrome || browser).tabs.create({ url });
+    window.close();
   }, []);
 
   return (

src/hooks/useDomainWhitelist.ts

@@ -23,9 +23,9 @@ export function useDomainWhitelist() {
   };
 }
 
-export function useToggleWhitelistDomain(domain: string) {
+export function useToggleWhitelistDomain(domain: string | null) {
   const { domainWhitelist, addDomain, removeDomain } = useDomainWhitelist();
-  const isWhitelisted = domainWhitelist.includes(domain);
+  const isWhitelisted = domainWhitelist.includes(domain ?? '');
   const { grantPermission } = usePermission();
   const iconPath = (chrome || browser).runtime.getURL(isWhitelisted ? 'assets/active.png' : 'assets/inactive.png');
 

src/popup.tsx

@@ -28,7 +28,7 @@ function IndexPopup() {
   ) : (
     <Frame>
       <div className="popup">
-        {page === 'toggle' ? <ToggleButton active={isWhitelisted} onClick={toggle} domain={domain} /> : null}
+        {page === 'toggle' && domain ? <ToggleButton active={isWhitelisted} onClick={toggle} domain={domain} /> : null}
         {page === 'disabled' ? <DisabledScreen /> : null}
         <BottomLabel />
       </div>

src/tabs/PermissionRequest.css

@@ -10,6 +10,10 @@ body {
   padding-bottom: 50px;
 }
 
+#__plasmo {
+  height: unset;
+}
+
 .permission-request.container {
   width: 90%;
   margin: 100px auto;