Fix content type for extension deployment

add inactive icon if the domain is not whitelisted

.github/workflows/deploying.yml

@@ -94,8 +94,8 @@ jobs:
       with:
         upload_url: ${{ steps.create_release.outputs.upload_url }}
         asset_path: ./chrome/chrome-mv3-prod.zip
-        asset_name: extension-mw.chrome.crx
-        asset_content_type: application/x-chrome-extension
+        asset_name: extension-mw.chrome.zip
+        asset_content_type: application/zip
 
     - name: Upload Firefox release
       uses: actions/upload-release-asset@v1

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@movie-web/extension",
   "displayName": "movie-web extension",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Enhance your movie-web experience with just one click",
   "author": "movie-web",
   "scripts": {
@@ -54,6 +54,17 @@
       "gecko": {
         "id": "{3fd86354-c73f-4395-9e26-2c5c984579bf}"
       }
-    }
+    },
+    "web_accessible_resources": [
+      {
+        "resources": [
+          "assets/active.png",
+          "assets/inactive.png"
+        ],
+        "matches": [
+          "<all_urls>"
+        ]
+      }
+    ]
   }
 }

src/components/ToggleButton.tsx

@@ -36,7 +36,7 @@ export function ToggleButton(props: ToggleButtonProps) {
         </button>
       </div>
       <p>
-        Extension {props.active ? 'enabled' : 'disabled'} <br /> on <strong>{props.domain}</strong>
+        Extension <strong>{props.active ? 'enabled' : 'disabled'}</strong> <br /> on <strong>{props.domain}</strong>
       </p>
     </div>
   );

src/hooks/useDomainWhitelist.ts

@@ -27,6 +27,11 @@ export function useToggleWhitelistDomain(domain: string) {
   const { domainWhitelist, addDomain, removeDomain } = useDomainWhitelist();
   const isWhitelisted = domainWhitelist.includes(domain);
   const { grantPermission } = usePermission();
+  const iconPath = (chrome || browser).runtime.getURL(isWhitelisted ? 'assets/active.png' : 'assets/inactive.png');
+
+  (chrome || browser).action.setIcon({
+    path: iconPath,
+  });
 
   const toggle = useCallback(() => {
     if (!isWhitelisted) {