fix import

Update plasmo + rework permissions + explain permissions in readme + lots of suffering
2025-09-13 15:03:25 +00:00 · 2024-02-01 22:02:41 +01:00 · 2024-02-01 21:24:57 +01:00
44 changed files with 338 additions and 912 deletions
--- a/.github/SECURITY.md
+++ b/.github/SECURITY.md
@@ -2,9 +2,13 @@

 ## Supported Versions

-The latest version of movie-web is the only version that is supported, as it is the only version that is being actively developed.
+The movie-web maintainers only support the latest version of movie-web published at https://movie-web.app.
+This published version is equivalent to the master branch.
+
+Support is not provided for any forks or mirrors of movie-web.

 ## Reporting a Vulnerability

-You can contact the movie-web maintainers to report a vulnerability:
- - Report the vulnerability in the [movie-web Discord server](https://movie-web.github.io/links/discord)
+There are two ways you can contact the movie-web maintainers to report a vulnerability:
+ - Email [security@movie-web.app](mailto:security@movie-web.app)
+ - Report the vulnerability in the [movie-web Discord server](https://discord.movie-web.app)
--- a/.github/workflows/deploying.yml
+++ b/.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.zip
-        asset_content_type: application/zip
+        asset_name: extension-mw.chrome.crx
+        asset_content_type: application/x-chrome-extension

    - name: Upload Firefox release
      uses: actions/upload-release-asset@v1
--- a/README.md
+++ b/README.md
@@ -10,3 +10,19 @@ We use pnpm with the latest version of NodeJS.
 pnpm i
 pnpm dev
 ```
+
+## About permissions
+
+The extension uses the following base permission:
+ - `activeTab` - This only gives access to knowing what tab is currently active, in this case we use it for making the on/off button per site on the popout. **This does not allow us to know the content of the site active tab** and because of that, this is not something that is prompted or shown to users.
+ - `declarativeNetRequestWithHostAccess` - This allows us to do network request manipulation, but only for sites we have host access for. **This only gives us access after the user has had to accept permission prompt** and because of that, this is not something that is prompted or shown to users.
+ - `scripting` - This allows us to inject helper scripts, but only for sites we have host access for. **This only gives us access after the user has had to accept permission prompt** and because of that, this is not something that is prompted or shown to users.
+ - `storage` - We need to store which sites are enabled or disabled by the user. This poses no risks to users so this is not something that is prompted or shown to users.
+
+On top of this list, we get the ability to **request** access for the following origins:
+ - `https://*/*`
+ - `http://*/*`
+
+This means we can request permissions for all possible sites. This is only a prompt where the browser asks if the extension can access a site, this does not give us access without the user knowing.
+
+Once a user has requested to enable the extension for a site. It will inject a helper script so the site knows how to communicate with the extension. Then the extension will do the work that a normal site wouldn't be able to do (like making cross-origin requests or sending headers that are normally restricted). The helper script will be injected everytime they open that site.
--- a/assets/active.png
+++ b/assets/active.png
--- a/assets/inactive.png
+++ b/assets/inactive.png
--- a/assets/inter/OFL.txt
+++ b/assets/inter/OFL.txt
@@ -1,93 +0,0 @@
-Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter)
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-https://openfontlicense.org
-
-
-----------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded, 
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.
--- a/assets/inter/bold.ttf
+++ b/assets/inter/bold.ttf
--- a/assets/inter/regular.ttf
+++ b/assets/inter/regular.ttf
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@movie-web/extension",
  "displayName": "movie-web extension",
-  "version": "1.1.4",
+  "version": "1.0.3",
  "description": "Enhance your movie-web experience with just one click",
  "author": "movie-web",
  "scripts": {
@@ -18,11 +18,12 @@
  "dependencies": {
    "@plasmohq/messaging": "^0.6.1",
    "@plasmohq/storage": "^1.9.0",
-    "plasmo": "0.84.0",
+    "plasmo": "0.84.2",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
+    "@parcel/packager-ts": "2.9.3",
    "@types/chrome": "0.0.251",
    "@types/firefox-webext-browser": "^120.0.0",
    "@types/node": "20.9.0",
@@ -43,31 +44,18 @@
  },
  "manifest": {
    "permissions": [
-      "declarativeNetRequest",
+      "declarativeNetRequestWithHostAccess",
      "activeTab",
-      "cookies"
+      "scripting"
    ],
    "optional_host_permissions": [
-      "<all_urls>"
+      "https://*/*",
+      "http://*/*"
    ],
    "browser_specific_settings": {
      "gecko": {
        "id": "{3fd86354-c73f-4395-9e26-2c5c984579bf}"
-      },
-      "gecko_android": {
-        "id": "{3fd86354-c73f-4395-9e26-2c5c984579bf}"
      }
-    },
-    "web_accessible_resources": [
-      {
-        "resources": [
-          "assets/active.png",
-          "assets/inactive.png"
-        ],
-        "matches": [
-          "<all_urls>"
-        ]
-      }
-    ]
+    }
  }
-}
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,8 +12,8 @@ dependencies:
    specifier: ^1.9.0
    version: 1.9.0(react@18.2.0)
  plasmo:
-    specifier: 0.84.0
-    version: 0.84.0(react-dom@18.2.0)(react@18.2.0)
+    specifier: 0.84.2
+    version: 0.84.2(react-dom@18.2.0)(react@18.2.0)
  react:
    specifier: 18.2.0
    version: 18.2.0
@@ -22,6 +22,9 @@ dependencies:
    version: 18.2.0(react@18.2.0)

 devDependencies:
+  '@parcel/packager-ts':
+    specifier: 2.9.3
+    version: 2.9.3(@parcel/core@2.9.3)
  '@types/chrome':
    specifier: 0.0.251
    version: 0.0.251
@@ -596,7 +599,6 @@ packages:

  /@lezer/common@1.2.0:
    resolution: {integrity: sha512-Wmvlm4q6tRpwiy20TnB3yyLTZim38Tkc50dPY8biQRwqE+ati/wD84rm3N15hikvdT4uSg9phs9ubjvcLmkpKg==}
-    dev: false

  /@lezer/lr@0.15.8:
    resolution: {integrity: sha512-bM6oE6VQZ6hIFxDNKk8bKPa14hqFrV07J/vHGOeiAbJReIaQXmkVb6xQu4MR+JBTLa5arGRyAAjJe1qaQt3Uvg==}
@@ -608,7 +610,6 @@ packages:
    resolution: {integrity: sha512-z5mY4LStlA3yL7aHT/rqgG614cfcvklS+8oFRFBYrs4YaWLJyKKM4+nN6KopToX0o9Hj6zmH6M5kinOYuy06ug==}
    dependencies:
      '@lezer/common': 1.2.0
-    dev: false

  /@ljharb/through@2.3.11:
    resolution: {integrity: sha512-ccfcIDlogiXNq5KcbAwbaO7lMh3Tm1i3khMPYpxlK8hH/W53zN81KM9coerRLOnTGu3nfXIniAmQbRI9OxbC0w==}
@@ -630,7 +631,6 @@ packages:
    cpu: [arm64]
    os: [darwin]
    requiresBuild: true
-    dev: false
    optional: true

  /@lmdb/lmdb-darwin-x64@2.5.2:
@@ -646,7 +646,6 @@ packages:
    cpu: [x64]
    os: [darwin]
    requiresBuild: true
-    dev: false
    optional: true

  /@lmdb/lmdb-linux-arm64@2.5.2:
@@ -662,7 +661,6 @@ packages:
    cpu: [arm64]
    os: [linux]
    requiresBuild: true
-    dev: false
    optional: true

  /@lmdb/lmdb-linux-arm@2.5.2:
@@ -678,7 +676,6 @@ packages:
    cpu: [arm]
    os: [linux]
    requiresBuild: true
-    dev: false
    optional: true

  /@lmdb/lmdb-linux-x64@2.5.2:
@@ -694,7 +691,6 @@ packages:
    cpu: [x64]
    os: [linux]
    requiresBuild: true
-    dev: false
    optional: true

  /@lmdb/lmdb-win32-x64@2.5.2:
@@ -710,7 +706,6 @@ packages:
    cpu: [x64]
    os: [win32]
    requiresBuild: true
-    dev: false
    optional: true

  /@mischnic/json-sourcemap@0.1.0:
@@ -729,14 +724,12 @@ packages:
      '@lezer/common': 1.2.0
      '@lezer/lr': 1.3.14
      json5: 2.2.3
-    dev: false

  /@msgpackr-extract/msgpackr-extract-darwin-arm64@3.0.2:
    resolution: {integrity: sha512-9bfjwDxIDWmmOKusUcqdS4Rw+SETlp9Dy39Xui9BEGEk19dDwH0jhipwFzEff/pFg95NKymc6TOTbRKcWeRqyQ==}
    cpu: [arm64]
    os: [darwin]
    requiresBuild: true
-    dev: false
    optional: true

  /@msgpackr-extract/msgpackr-extract-darwin-x64@3.0.2:
@@ -744,7 +737,6 @@ packages:
    cpu: [x64]
    os: [darwin]
    requiresBuild: true
-    dev: false
    optional: true

  /@msgpackr-extract/msgpackr-extract-linux-arm64@3.0.2:
@@ -752,7 +744,6 @@ packages:
    cpu: [arm64]
    os: [linux]
    requiresBuild: true
-    dev: false
    optional: true

  /@msgpackr-extract/msgpackr-extract-linux-arm@3.0.2:
@@ -760,7 +751,6 @@ packages:
    cpu: [arm]
    os: [linux]
    requiresBuild: true
-    dev: false
    optional: true

  /@msgpackr-extract/msgpackr-extract-linux-x64@3.0.2:
@@ -768,7 +758,6 @@ packages:
    cpu: [x64]
    os: [linux]
    requiresBuild: true
-    dev: false
    optional: true

  /@msgpackr-extract/msgpackr-extract-win32-x64@3.0.2:
@@ -776,7 +765,6 @@ packages:
    cpu: [x64]
    os: [win32]
    requiresBuild: true
-    dev: false
    optional: true

  /@nodelib/fs.scandir@2.1.5:
@@ -835,7 +823,6 @@ packages:
      '@parcel/logger': 2.9.3
      '@parcel/utils': 2.9.3
      lmdb: 2.7.11
-    dev: false

  /@parcel/codeframe@2.8.3:
    resolution: {integrity: sha512-FE7sY53D6n/+2Pgg6M9iuEC6F5fvmyBkRE4d9VdnOoxhTXtkEqpqYgX7RJ12FAQwNlxKq4suBJQMgQHMF2Kjeg==}
@@ -849,7 +836,6 @@ packages:
    engines: {node: '>= 12.0.0'}
    dependencies:
      chalk: 4.1.2
-    dev: false

  /@parcel/compressor-raw@2.9.3(@parcel/core@2.9.3):
    resolution: {integrity: sha512-jz3t4/ICMsHEqgiTmv5i1DJva2k5QRpZlBELVxfY+QElJTVe8edKJ0TiKcBxh2hx7sm4aUigGmp7JiqqHRRYmA==}
@@ -937,7 +923,6 @@ packages:
      msgpackr: 1.10.1
      nullthrows: 1.1.1
      semver: 7.5.4
-    dev: false

  /@parcel/diagnostic@2.8.3:
    resolution: {integrity: sha512-u7wSzuMhLGWZjVNYJZq/SOViS3uFG0xwIcqXw12w54Uozd6BH8JlhVtVyAsq9kqnn7YFkw6pXHqAo5Tzh4FqsQ==}
@@ -953,7 +938,6 @@ packages:
    dependencies:
      '@mischnic/json-sourcemap': 0.1.1
      nullthrows: 1.1.1
-    dev: false

  /@parcel/events@2.8.3:
    resolution: {integrity: sha512-hoIS4tAxWp8FJk3628bsgKxEvR7bq2scCVYHSqZ4fTi/s0+VymEATrRCUqf+12e5H47uw1/ZjoqrGtBI02pz4w==}
@@ -963,7 +947,6 @@ packages:
  /@parcel/events@2.9.3:
    resolution: {integrity: sha512-K0Scx+Bx9f9p1vuShMzNwIgiaZUkxEnexaKYHYemJrM7pMAqxIuIqhnvwurRCsZOVLUJPDDNJ626cWTc5vIq+A==}
    engines: {node: '>= 12.0.0'}
-    dev: false

  /@parcel/fs-search@2.8.3:
    resolution: {integrity: sha512-DJBT2N8knfN7Na6PP2mett3spQLTqxFrvl0gv+TJRp61T8Ljc4VuUTb0hqBj+belaASIp3Q+e8+SgaFQu7wLiQ==}
@@ -975,7 +958,6 @@ packages:
  /@parcel/fs-search@2.9.3:
    resolution: {integrity: sha512-nsNz3bsOpwS+jphcd+XjZL3F3PDq9lik0O8HPm5f6LYkqKWT+u/kgQzA8OkAHCR3q96LGiHxUywHPEBc27vI4Q==}
    engines: {node: '>= 12.0.0'}
-    dev: false

  /@parcel/fs@2.8.3(@parcel/core@2.9.3):
    resolution: {integrity: sha512-y+i+oXbT7lP0e0pJZi/YSm1vg0LDsbycFuHZIL80pNwdEppUAtibfJZCp606B7HOjMAlNZOBo48e3hPG3d8jgQ==}
@@ -1003,14 +985,12 @@ packages:
      '@parcel/utils': 2.9.3
      '@parcel/watcher': 2.2.0
      '@parcel/workers': 2.9.3(@parcel/core@2.9.3)
-    dev: false

  /@parcel/graph@2.9.3:
    resolution: {integrity: sha512-3LmRJmF8+OprAr6zJT3X2s8WAhLKkrhi6RsFlMWHifGU5ED1PFcJWFbOwJvSjcAhMQJP0fErcFIK1Ludv3Vm3g==}
    engines: {node: '>= 12.0.0'}
    dependencies:
      nullthrows: 1.1.1
-    dev: false

  /@parcel/hash@2.8.3:
    resolution: {integrity: sha512-FVItqzjWmnyP4ZsVgX+G00+6U2IzOvqDtdwQIWisCcVoXJFCqZJDy6oa2qDDFz96xCCCynjRjPdQx2jYBCpfYw==}
@@ -1025,7 +1005,6 @@ packages:
    engines: {node: '>= 12.0.0'}
    dependencies:
      xxhash-wasm: 0.4.2
-    dev: false

  /@parcel/logger@2.8.3:
    resolution: {integrity: sha512-Kpxd3O/Vs7nYJIzkdmB6Bvp3l/85ydIxaZaPfGSGTYOfaffSOTkhcW9l6WemsxUrlts4za6CaEWcc4DOvaMOPA==}
@@ -1041,7 +1020,6 @@ packages:
    dependencies:
      '@parcel/diagnostic': 2.9.3
      '@parcel/events': 2.9.3
-    dev: false

  /@parcel/markdown-ansi@2.8.3:
    resolution: {integrity: sha512-4v+pjyoh9f5zuU/gJlNvNFGEAb6J90sOBwpKJYJhdWXLZMNFCVzSigxrYO+vCsi8G4rl6/B2c0LcwIMjGPHmFQ==}
@@ -1055,7 +1033,6 @@ packages:
    engines: {node: '>= 12.0.0'}
    dependencies:
      chalk: 4.1.2
-    dev: false

  /@parcel/namer-default@2.9.3(@parcel/core@2.9.3):
    resolution: {integrity: sha512-1ynFEcap48/Ngzwwn318eLYpLUwijuuZoXQPCsEQ21OOIOtfhFQJaPwXTsw6kRitshKq76P2aafE0BioGSqxcA==}
@@ -1080,7 +1057,6 @@ packages:
      semver: 7.5.4
    transitivePeerDependencies:
      - '@parcel/core'
-    dev: false

  /@parcel/optimizer-css@2.9.3(@parcel/core@2.9.3):
    resolution: {integrity: sha512-RK1QwcSdWDNUsFvuLy0hgnYKtPQebzCb0vPPzqs6LhL+vqUu9utOyRycGaQffHCkHVQP6zGlN+KFssd7YtFGhA==}
@@ -1201,7 +1177,6 @@ packages:
      '@parcel/utils': 2.9.3
      '@parcel/workers': 2.9.3(@parcel/core@2.9.3)
      semver: 7.5.4
-    dev: false

  /@parcel/packager-css@2.9.3(@parcel/core@2.9.3):
    resolution: {integrity: sha512-mePiWiYZOULY6e1RdAIJyRoYqXqGci0srOaVZYaP7mnrzvJgA63kaZFFsDiEWghunQpMUuUjM2x/vQVHzxmhKQ==}
@@ -1265,6 +1240,15 @@ packages:
      - '@parcel/core'
    dev: false

+  /@parcel/packager-ts@2.9.3(@parcel/core@2.9.3):
+    resolution: {integrity: sha512-Vd9dm1FqaFDw/kWCh95zgGS08HvIpSLg5Aa+AIhFiM0G+kpRSItcBSNJVwC7JKmLk1rmQhmQKoCKX26+nvyAzA==}
+    engines: {node: '>= 12.0.0', parcel: ^2.9.3}
+    dependencies:
+      '@parcel/plugin': 2.9.3(@parcel/core@2.9.3)
+    transitivePeerDependencies:
+      - '@parcel/core'
+    dev: true
+
  /@parcel/plugin@2.8.3(@parcel/core@2.9.3):
    resolution: {integrity: sha512-jZ6mnsS4D9X9GaNnvrixDQwlUQJCohDX2hGyM0U0bY2NWU8Km97SjtoCpWjq+XBCx/gpC4g58+fk9VQeZq2vlw==}
    engines: {node: '>= 12.0.0'}
@@ -1281,7 +1265,6 @@ packages:
      '@parcel/types': 2.9.3(@parcel/core@2.9.3)
    transitivePeerDependencies:
      - '@parcel/core'
-    dev: false

  /@parcel/profiler@2.9.3:
    resolution: {integrity: sha512-pyHc9lw8VZDfgZoeZWZU9J0CVEv1Zw9O5+e0DJPDPHuXJYr72ZAOhbljtU3owWKAeW+++Q2AZWkbUGEOjI/e6g==}
@@ -1290,7 +1273,6 @@ packages:
      '@parcel/diagnostic': 2.9.3
      '@parcel/events': 2.9.3
      chrome-trace-event: 1.0.3
-    dev: false

  /@parcel/reporter-bundle-buddy@2.9.3(@parcel/core@2.9.3):
    resolution: {integrity: sha512-9ftzLZ161USdvnxueT55EWufLI48va0xJfB5MAJLG92VAS1N1FSFgYKdkGFzBKw0eK9UScQNYnntCGC17rBayQ==}
@@ -1382,7 +1364,6 @@ packages:
    engines: {node: ^12.18.3 || >=14}
    dependencies:
      detect-libc: 1.0.3
-    dev: false

  /@parcel/transformer-babel@2.9.3(@parcel/core@2.9.3):
    resolution: {integrity: sha512-pURtEsnsp3h6tOBDuzh9wRvVtw4PgIlqwAArIWdrG7iwqOUYv9D8ME4+ePWEu7MQWAp58hv9pTJtqWv4T+Sq8A==}
@@ -1631,7 +1612,6 @@ packages:
      utility-types: 3.10.0
    transitivePeerDependencies:
      - '@parcel/core'
-    dev: false

  /@parcel/utils@2.8.3:
    resolution: {integrity: sha512-IhVrmNiJ+LOKHcCivG5dnuLGjhPYxQ/IzbnF2DKNQXWBTsYlHkJZpmz7THoeLtLliGmSOZ3ZCsbR8/tJJKmxjA==}
@@ -1658,7 +1638,6 @@ packages:
      '@parcel/source-map': 2.1.1
      chalk: 4.1.2
      nullthrows: 1.1.1
-    dev: false

  /@parcel/watcher-android-arm64@2.2.0:
    resolution: {integrity: sha512-nU2wh00CTQT9rr1TIKTjdQ9lAGYpmz6XuKw0nAwAN+S2A5YiD55BK1u+E5WMCT8YOIDe/n6gaj4o/Bi9294SSQ==}
@@ -1666,7 +1645,6 @@ packages:
    cpu: [arm64]
    os: [android]
    requiresBuild: true
-    dev: false
    optional: true

  /@parcel/watcher-darwin-arm64@2.2.0:
@@ -1675,7 +1653,6 @@ packages:
    cpu: [arm64]
    os: [darwin]
    requiresBuild: true
-    dev: false
    optional: true

  /@parcel/watcher-darwin-x64@2.2.0:
@@ -1684,7 +1661,6 @@ packages:
    cpu: [x64]
    os: [darwin]
    requiresBuild: true
-    dev: false
    optional: true

  /@parcel/watcher-linux-arm-glibc@2.2.0:
@@ -1693,7 +1669,6 @@ packages:
    cpu: [arm]
    os: [linux]
    requiresBuild: true
-    dev: false
    optional: true

  /@parcel/watcher-linux-arm64-glibc@2.2.0:
@@ -1702,7 +1677,6 @@ packages:
    cpu: [arm64]
    os: [linux]
    requiresBuild: true
-    dev: false
    optional: true

  /@parcel/watcher-linux-arm64-musl@2.2.0:
@@ -1711,7 +1685,6 @@ packages:
    cpu: [arm64]
    os: [linux]
    requiresBuild: true
-    dev: false
    optional: true

  /@parcel/watcher-linux-x64-glibc@2.2.0:
@@ -1720,7 +1693,6 @@ packages:
    cpu: [x64]
    os: [linux]
    requiresBuild: true
-    dev: false
    optional: true

  /@parcel/watcher-linux-x64-musl@2.2.0:
@@ -1729,7 +1701,6 @@ packages:
    cpu: [x64]
    os: [linux]
    requiresBuild: true
-    dev: false
    optional: true

  /@parcel/watcher-win32-arm64@2.2.0:
@@ -1738,7 +1709,6 @@ packages:
    cpu: [arm64]
    os: [win32]
    requiresBuild: true
-    dev: false
    optional: true

  /@parcel/watcher-win32-x64@2.2.0:
@@ -1747,7 +1717,6 @@ packages:
    cpu: [x64]
    os: [win32]
    requiresBuild: true
-    dev: false
    optional: true

  /@parcel/watcher@2.2.0:
@@ -1769,7 +1738,6 @@ packages:
      '@parcel/watcher-linux-x64-musl': 2.2.0
      '@parcel/watcher-win32-arm64': 2.2.0
      '@parcel/watcher-win32-x64': 2.2.0
-    dev: false

  /@parcel/workers@2.8.3(@parcel/core@2.9.3):
    resolution: {integrity: sha512-+AxBnKgjqVpUHBcHLWIHcjYgKIvHIpZjN33mG5LG9XXvrZiqdWvouEzqEXlVLq5VzzVbKIQQcmsvRy138YErkg==}
@@ -1799,7 +1767,6 @@ packages:
      '@parcel/types': 2.9.3(@parcel/core@2.9.3)
      '@parcel/utils': 2.9.3
      nullthrows: 1.1.1
-    dev: false

  /@pkgjs/parseargs@0.11.0:
    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
@@ -2000,8 +1967,8 @@ packages:
      - '@parcel/core'
    dev: false

-  /@plasmohq/parcel-config@0.40.0(react-dom@18.2.0)(react@18.2.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-aDyZIL3ScTmA1CsB/Sym7SxOMVSFUgNQrFovD+sl1M2nrYytqkLDFs7mspCpBlsxCGt97s8rD/kufke21UUHRA==}
+  /@plasmohq/parcel-config@0.40.2(react-dom@18.2.0)(react@18.2.0)(typescript@5.2.2):
+    resolution: {integrity: sha512-YuE2wxtmMcygz+YC0YZbFRsRp6Vqe+qs+TJs15sn5jKVcOu01RZeKuThKOmcTCc1M6Bcst5OkGsV8RmkpGKKCQ==}
    dependencies:
      '@parcel/compressor-raw': 2.9.3(@parcel/core@2.9.3)
      '@parcel/config-default': 2.9.3(@parcel/core@2.9.3)(typescript@5.2.2)
@@ -2030,12 +1997,12 @@ packages:
      '@plasmohq/parcel-optimizer-encapsulate': 0.0.7
      '@plasmohq/parcel-optimizer-es': 0.4.0
      '@plasmohq/parcel-packager': 0.6.14
-      '@plasmohq/parcel-resolver': 0.13.1
-      '@plasmohq/parcel-resolver-post': 0.4.2
-      '@plasmohq/parcel-runtime': 0.23.0
+      '@plasmohq/parcel-resolver': 0.13.2
+      '@plasmohq/parcel-resolver-post': 0.4.3
+      '@plasmohq/parcel-runtime': 0.23.1
      '@plasmohq/parcel-transformer-inject-env': 0.2.11
-      '@plasmohq/parcel-transformer-inline-css': 0.3.9
-      '@plasmohq/parcel-transformer-manifest': 0.17.8
+      '@plasmohq/parcel-transformer-inline-css': 0.3.11
+      '@plasmohq/parcel-transformer-manifest': 0.17.9
      '@plasmohq/parcel-transformer-svelte': 0.5.2
      '@plasmohq/parcel-transformer-vue': 0.5.0(react-dom@18.2.0)(react@18.2.0)
    transitivePeerDependencies:
@@ -2167,8 +2134,8 @@ packages:
      nullthrows: 1.1.1
    dev: false

-  /@plasmohq/parcel-resolver-post@0.4.2:
-    resolution: {integrity: sha512-dbrwjUQEhKqKBEgVJjL5ls1p6bpQ3VlDXI5REoaSpwoPcB7TRAcUfTwV4oNGE4eTnw4ElF08JkyslYvKgxosAw==}
+  /@plasmohq/parcel-resolver-post@0.4.3:
+    resolution: {integrity: sha512-+KxdAOyBJNK7wxLUbLhx0d4AWQg2trcCK8rwOSNL8JP0OgtSDaOFa2NqCTFwuccGco4PzmK+27U17LWSGTFAOQ==}
    engines: {parcel: '>= 2.7.0'}
    dependencies:
      '@parcel/core': 2.9.3
@@ -2185,21 +2152,21 @@ packages:
      - ts-node
    dev: false

-  /@plasmohq/parcel-resolver@0.13.1:
-    resolution: {integrity: sha512-IuKr3Ue1+2fsyJPQuHh4Yh36L3FI/2I27X6hC+NHlX/1j9fVYiFk89dTSPNhvAdGN/hwsMjQ/jCiKZGW1157xg==}
+  /@plasmohq/parcel-resolver@0.13.2:
+    resolution: {integrity: sha512-JVXk65c5g5rOci9xmuvEqpemOFc6yTlGO1A1LCllFeByl2hBszRCBBSNp9wsaes2gQIbClgzFjbOSijKV3acNw==}
    engines: {parcel: '>= 2.7.0'}
    dependencies:
      '@parcel/core': 2.9.3
      '@parcel/hash': 2.9.3
      '@parcel/plugin': 2.9.3(@parcel/core@2.9.3)
      '@parcel/types': 2.9.3(@parcel/core@2.9.3)
-      fast-glob: 3.2.12
+      fast-glob: 3.3.2
      fs-extra: 11.1.1
      got: 13.0.0
    dev: false

-  /@plasmohq/parcel-runtime@0.23.0:
-    resolution: {integrity: sha512-+ZqH9XksSbWPC6pnvjmvmykxh1SfyYkSKyOeNQSeHsPFo40fADUKOda8Hw/vm/g5p8GIlv5YSb2iYZzCWmKs1g==}
+  /@plasmohq/parcel-runtime@0.23.1:
+    resolution: {integrity: sha512-EiBjAJcJjVFarUmiIqywKd+MHGIThWTkcZe5IYfR7ecaJRNhhZF1B/gPgoAwv1nLcxfvRIC2CF9z9frwQvrOYQ==}
    engines: {parcel: '>= 2.7.0'}
    dependencies:
      '@parcel/core': 2.9.3
@@ -2216,19 +2183,19 @@ packages:
      '@parcel/types': 2.9.3(@parcel/core@2.9.3)
    dev: false

-  /@plasmohq/parcel-transformer-inline-css@0.3.9:
-    resolution: {integrity: sha512-da1gVe3TX7J5lC6M04iHzp2NPwhh40n/Gx/Di9o2KLLEYe0q+pKlI5OjN9zf5kpXwXfVO7QzE5B1/tRGoEu2Bw==}
+  /@plasmohq/parcel-transformer-inline-css@0.3.11:
+    resolution: {integrity: sha512-EUSwEowFNSgC/F1q/V4H4NXJ23wwLzlmRI6lvIr6S0mIuG/FCga+lAV3IZ+yAuXqUM2VexX6JyYYpNVidrMSxw==}
    engines: {parcel: '>= 2.7.0'}
    dependencies:
      '@parcel/core': 2.9.3
      '@parcel/plugin': 2.9.3(@parcel/core@2.9.3)
      '@parcel/utils': 2.9.3
-      browserslist: 4.21.10
-      lightningcss: 1.21.7
+      browserslist: 4.22.1
+      lightningcss: 1.21.8
    dev: false

-  /@plasmohq/parcel-transformer-manifest@0.17.8:
-    resolution: {integrity: sha512-G6XISWddf900Q/4ABlFLBJcqvN1VTYF06NytTOMSDO4dOraxGhgZ0CyC990b+LJEa7nc5xf4xhHQxf3mkjALPQ==}
+  /@plasmohq/parcel-transformer-manifest@0.17.9:
+    resolution: {integrity: sha512-syL5AbC7sKCNd6jpNU6qKdeUVWUDhiWLoHC5IYTVGcdVjKBql6lgs+e2JehjNB1BYW2lTrY5v3lI26Z6P6+/9Q==}
    engines: {parcel: '>= 2.7.0'}
    dependencies:
      '@mischnic/json-sourcemap': 0.1.0
@@ -3046,7 +3013,6 @@ packages:

  /abortcontroller-polyfill@1.7.5:
    resolution: {integrity: sha512-JMJ5soJWP18htbbxJjG7bG6yuI6pRhgJ0scHHTfkUjf6wjP912xZWvM+A4sJK3gqd9E8fcPbDnOefbA9Th/FIQ==}
-    dev: false

  /acorn-jsx@5.3.2(acorn@8.11.3):
    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
@@ -3236,7 +3202,6 @@ packages:
    resolution: {integrity: sha512-H7JU6iBHTal1gp56aKoaa//YUxEaAOUiydvrV/pILqIHXTtqxSkATOnDA2u+jZ/61sD+L/412+7kzXRtWukhpQ==}
    dependencies:
      safe-buffer: 5.2.1
-    dev: false

  /base64-js@1.5.1:
    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
@@ -3281,15 +3246,15 @@ packages:
    dependencies:
      fill-range: 7.0.1

-  /browserslist@4.21.10:
-    resolution: {integrity: sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==}
+  /browserslist@4.22.1:
+    resolution: {integrity: sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==}
    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
    hasBin: true
    dependencies:
      caniuse-lite: 1.0.30001574
      electron-to-chromium: 1.4.623
      node-releases: 2.0.14
-      update-browserslist-db: 1.0.13(browserslist@4.21.10)
+      update-browserslist-db: 1.0.13(browserslist@4.22.1)
    dev: false

  /browserslist@4.22.2:
@@ -3301,7 +3266,6 @@ packages:
      electron-to-chromium: 1.4.623
      node-releases: 2.0.14
      update-browserslist-db: 1.0.13(browserslist@4.22.2)
-    dev: false

  /buffer@5.7.1:
    resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
@@ -3368,7 +3332,6 @@ packages:

  /caniuse-lite@1.0.30001574:
    resolution: {integrity: sha512-BtYEK4r/iHt/txm81KBudCUcTy7t+s9emrIaHqjYurQ10x71zJ5VQ9x1dYPcz/b+pKSp4y/v1xSI67A+LzpNyg==}
-    dev: false

  /chalk@2.4.2:
    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
@@ -3421,7 +3384,6 @@ packages:
  /chrome-trace-event@1.0.3:
    resolution: {integrity: sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==}
    engines: {node: '>=6.0'}
-    dev: false

  /cli-cursor@3.1.0:
    resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
@@ -3448,7 +3410,6 @@ packages:
  /clone@2.1.2:
    resolution: {integrity: sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==}
    engines: {node: '>=0.8'}
-    dev: false

  /code-red@1.0.4:
    resolution: {integrity: sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==}
@@ -3700,7 +3661,6 @@ packages:
    resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
    engines: {node: '>=0.10'}
    hasBin: true
-    dev: false

  /detect-libc@2.0.2:
    resolution: {integrity: sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw==}
@@ -3761,7 +3721,6 @@ packages:

  /dotenv-expand@5.1.0:
    resolution: {integrity: sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==}
-    dev: false

  /dotenv@16.3.1:
    resolution: {integrity: sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==}
@@ -3771,7 +3730,6 @@ packages:
  /dotenv@7.0.0:
    resolution: {integrity: sha512-M3NhsLbV1i6HuGzBUH8vXrtxOk+tWmzWKDMbAVSUp3Zsjm7ywFeuwrUXhmhQyRK1q5B5GGy7hcXPbj3bnfZg2g==}
    engines: {node: '>=6'}
-    dev: false

  /eastasianwidth@0.2.0:
    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
@@ -3779,7 +3737,6 @@ packages:

  /electron-to-chromium@1.4.623:
    resolution: {integrity: sha512-lKoz10iCYlP1WtRYdh5MvocQPWVRoI7ysp6qf18bmeBgR8abE6+I2CsfyNKztRDZvhdWc+krKT6wS7Neg8sw3A==}
-    dev: false

  /emoji-regex@8.0.0:
    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
@@ -3952,7 +3909,6 @@ packages:
  /escalade@3.1.1:
    resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
    engines: {node: '>=6'}
-    dev: false

  /escape-string-regexp@1.0.5:
    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
@@ -4340,17 +4296,6 @@ packages:
    resolution: {integrity: sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==}
    dev: false

-  /fast-glob@3.2.12:
-    resolution: {integrity: sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==}
-    engines: {node: '>=8.6.0'}
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      '@nodelib/fs.walk': 1.2.8
-      glob-parent: 5.1.2
-      merge2: 1.4.1
-      micromatch: 4.0.5
-    dev: false
-
  /fast-glob@3.3.2:
    resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
    engines: {node: '>=8.6.0'}
@@ -5143,7 +5088,6 @@ packages:
    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
    engines: {node: '>=6'}
    hasBin: true
-    dev: false

  /jsonfile@6.1.0:
    resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
@@ -5205,8 +5149,8 @@ packages:
      type-check: 0.4.0
    dev: true

-  /lightningcss-darwin-arm64@1.21.7:
-    resolution: {integrity: sha512-tt7hIsFio9jZofTVHtCACz6rB6c9RyABMXfA9A/VcKOjS3sq+koX/QkRJWY06utwOImbJIXBC5hbg9t3RkPUAQ==}
+  /lightningcss-darwin-arm64@1.21.8:
+    resolution: {integrity: sha512-BOMoGfcgkk2f4ltzsJqmkjiqRtlZUK+UdwhR+P6VgIsnpQBV3G01mlL6GzYxYqxq+6/3/n/D+4oy2NeknmADZw==}
    engines: {node: '>= 12.0.0'}
    cpu: [arm64]
    os: [darwin]
@@ -5223,8 +5167,8 @@ packages:
    dev: false
    optional: true

-  /lightningcss-darwin-x64@1.21.7:
-    resolution: {integrity: sha512-F4gS4bf7eWekfPT+TxJNm/pF+QRgZiTrTkQH6cw4/UWfdeZISfuhD5El2dm16giFnY0K5ylIwO+ZusgYNkGSXA==}
+  /lightningcss-darwin-x64@1.21.8:
+    resolution: {integrity: sha512-YhF64mcVDPKKufL4aNFBnVH7uvzE0bW3YUsPXdP4yUcT/8IXChypOZ/PE1pmt2RlbmsyVuuIIeZU4zTyZe5Amw==}
    engines: {node: '>= 12.0.0'}
    cpu: [x64]
    os: [darwin]
@@ -5241,8 +5185,8 @@ packages:
    dev: false
    optional: true

-  /lightningcss-freebsd-x64@1.21.7:
-    resolution: {integrity: sha512-RMfNzJWXCSfPnL55fcLWEAadcY6QUFT0S8NceNKYzp1KiCZtkJIy6RQ5SaVxPzRqd3iMsahUf5sfnG8N1UQSNQ==}
+  /lightningcss-freebsd-x64@1.21.8:
+    resolution: {integrity: sha512-CV6A/vTG2Ryd3YpChEgfWWv4TXCAETo9TcHSNx0IP0dnKcnDEiAko4PIKhCqZL11IGdN1ZLBCVPw+vw5ZYwzfA==}
    engines: {node: '>= 12.0.0'}
    cpu: [x64]
    os: [freebsd]
@@ -5259,8 +5203,8 @@ packages:
    dev: false
    optional: true

-  /lightningcss-linux-arm-gnueabihf@1.21.7:
-    resolution: {integrity: sha512-biSRUDZNx7vubWP1jArw/qqfZKPGpkV/qzunasZzxmqijbZ43sW9faDQYxWNcxPWljJJdF/qs6qcurYFovWtrQ==}
+  /lightningcss-linux-arm-gnueabihf@1.21.8:
+    resolution: {integrity: sha512-9PMbqh8n/Xq0F4/j2NR/hHM2HRDiFXFSF0iOvV67pNWKJkHIO6mR8jBw/88Aro5Ye/ILsX5OuWsxIVJDFv0NXA==}
    engines: {node: '>= 12.0.0'}
    cpu: [arm]
    os: [linux]
@@ -5277,8 +5221,8 @@ packages:
    dev: false
    optional: true

-  /lightningcss-linux-arm64-gnu@1.21.7:
-    resolution: {integrity: sha512-PENY8QekqL9TG3AY/A7rkUBb5ymefGxea7Oe7+x7Hbw4Bz4Hpj5cec5OoMypMqFbURPmpi0fTWx4vSWUPzpDcA==}
+  /lightningcss-linux-arm64-gnu@1.21.8:
+    resolution: {integrity: sha512-JTM/TuMMllkzaXV7/eDjG4IJKLlCl+RfYZwtsVmC82gc0QX0O37csGAcY2OGleiuA4DnEo/Qea5WoFfZUNC6zg==}
    engines: {node: '>= 12.0.0'}
    cpu: [arm64]
    os: [linux]
@@ -5295,8 +5239,8 @@ packages:
    dev: false
    optional: true

-  /lightningcss-linux-arm64-musl@1.21.7:
-    resolution: {integrity: sha512-pfOipKvA/0X1OjRaZt3870vnV9UGBSjayIqHh0fGx/+aRz3O0MVFHE/60P2UWXpM3YGJEw/hMWtNkrFwqOge8A==}
+  /lightningcss-linux-arm64-musl@1.21.8:
+    resolution: {integrity: sha512-01gWShXrgoIb8urzShpn1RWtZuaSyKSzF2hfO+flzlTPoACqcO3rgcu/3af4Cw54e8vKzL5hPRo4kROmgaOMLg==}
    engines: {node: '>= 12.0.0'}
    cpu: [arm64]
    os: [linux]
@@ -5313,8 +5257,8 @@ packages:
    dev: false
    optional: true

-  /lightningcss-linux-x64-gnu@1.21.7:
-    resolution: {integrity: sha512-dgcsis4TAA7s0ia4f31QHX+G4PWPwxk+wJaEQLaV0NdJs09O5hHoA8DpLEr8nrvc/tsRTyVNBP1rDtgzySjpXg==}
+  /lightningcss-linux-x64-gnu@1.21.8:
+    resolution: {integrity: sha512-yVB5vYJjJb/Aku0V9QaGYIntvK/1TJOlNB9GmkNpXX5bSSP2pYW4lWW97jxFMHO908M0zjEt1qyOLMyqojHL+Q==}
    engines: {node: '>= 12.0.0'}
    cpu: [x64]
    os: [linux]
@@ -5331,8 +5275,8 @@ packages:
    dev: false
    optional: true

-  /lightningcss-linux-x64-musl@1.21.7:
-    resolution: {integrity: sha512-A+9dXpxld3p4Cd6fxev2eqEvaauYtrgNpXV3t7ioCJy30Oj9nYiNGwiGusM+4MJVcEpUPGUGiuAqY4sWilRDwA==}
+  /lightningcss-linux-x64-musl@1.21.8:
+    resolution: {integrity: sha512-TYi+KNtBVK0+FZvxTX/d5XJb+tw3Jq+2Rr9hW359wp1afsi1Vkg+uVGgbn+m2dipa5XwpCseQq81ylMlXuyfPw==}
    engines: {node: '>= 12.0.0'}
    cpu: [x64]
    os: [linux]
@@ -5349,8 +5293,8 @@ packages:
    dev: false
    optional: true

-  /lightningcss-win32-x64-msvc@1.21.7:
-    resolution: {integrity: sha512-07/8vogEq+C/mF99pdMhh/f19/xreq8N9Ca6AWeVHZIdODyF/pt6KdKSCWDZWIn+3CUxI8gCJWuUWyOc3xymvw==}
+  /lightningcss-win32-x64-msvc@1.21.8:
+    resolution: {integrity: sha512-mww+kqbPx0/C44l2LEloECtRUuOFDjq9ftp+EHTPiCp2t+avy0sh8MaFwGsrKkj2XfZhaRhi4CPVKBoqF1Qlwg==}
    engines: {node: '>= 12.0.0'}
    cpu: [x64]
    os: [win32]
@@ -5367,21 +5311,21 @@ packages:
    dev: false
    optional: true

-  /lightningcss@1.21.7:
-    resolution: {integrity: sha512-xITZyh5sLFwRPYUSw15T00Rm7gcQ1qOPuQwNOcvHsTm6nLWTQ723w7zl42wrC5t+xtdg6FPmnXHml1nZxxvp1w==}
+  /lightningcss@1.21.8:
+    resolution: {integrity: sha512-jEqaL7m/ZckZJjlMAfycr1Kpz7f93k6n7KGF5SJjuPSm6DWI6h3ayLZmgRHgy1OfrwoCed6h4C/gHYPOd1OFMA==}
    engines: {node: '>= 12.0.0'}
    dependencies:
      detect-libc: 1.0.3
    optionalDependencies:
-      lightningcss-darwin-arm64: 1.21.7
-      lightningcss-darwin-x64: 1.21.7
-      lightningcss-freebsd-x64: 1.21.7
-      lightningcss-linux-arm-gnueabihf: 1.21.7
-      lightningcss-linux-arm64-gnu: 1.21.7
-      lightningcss-linux-arm64-musl: 1.21.7
-      lightningcss-linux-x64-gnu: 1.21.7
-      lightningcss-linux-x64-musl: 1.21.7
-      lightningcss-win32-x64-msvc: 1.21.7
+      lightningcss-darwin-arm64: 1.21.8
+      lightningcss-darwin-x64: 1.21.8
+      lightningcss-freebsd-x64: 1.21.8
+      lightningcss-linux-arm-gnueabihf: 1.21.8
+      lightningcss-linux-arm64-gnu: 1.21.8
+      lightningcss-linux-arm64-musl: 1.21.8
+      lightningcss-linux-x64-gnu: 1.21.8
+      lightningcss-linux-x64-musl: 1.21.8
+      lightningcss-win32-x64-msvc: 1.21.8
    dev: false

  /lightningcss@1.22.1:
@@ -5445,7 +5389,6 @@ packages:
      '@lmdb/lmdb-linux-arm64': 2.7.11
      '@lmdb/lmdb-linux-x64': 2.7.11
      '@lmdb/lmdb-win32-x64': 2.7.11
-    dev: false

  /load-tsconfig@0.2.5:
    resolution: {integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==}
@@ -5624,20 +5567,17 @@ packages:
      '@msgpackr-extract/msgpackr-extract-linux-arm64': 3.0.2
      '@msgpackr-extract/msgpackr-extract-linux-x64': 3.0.2
      '@msgpackr-extract/msgpackr-extract-win32-x64': 3.0.2
-    dev: false
    optional: true

  /msgpackr@1.10.1:
    resolution: {integrity: sha512-r5VRLv9qouXuLiIBrLpl2d5ZvPt8svdQTl5/vMvE4nzDMyEX4sgW5yWhuBBj5UmgwOTWj8CIdSXn5sAfsHAWIQ==}
    optionalDependencies:
      msgpackr-extract: 3.0.2
-    dev: false

  /msgpackr@1.8.5:
    resolution: {integrity: sha512-mpPs3qqTug6ahbblkThoUY2DQdNXcm4IapwOS3Vm/87vmpzLVelvp9h3It1y9l1VPpiFLV11vfOXnmeEwiIXwg==}
    optionalDependencies:
      msgpackr-extract: 3.0.2
-    dev: false

  /mute-stream@1.0.0:
    resolution: {integrity: sha512-avsJQhyd+680gKXyG/sQc0nXaC6rBkPOfyHYcFb9+hdkqQkR9bdnkJ0AMZhke0oesPqIO+mFFJ+IdBc7mst4IA==}
@@ -5692,7 +5632,6 @@ packages:

  /node-addon-api@4.3.0:
    resolution: {integrity: sha512-73sE9+3UaLYYFmDsFZnqCInzPyh3MqIwZO9cw58yIqAZhONrrabrYyYe3TuIqtIiOuTXVhsGau8hcrhhwSsDIQ==}
-    dev: false

  /node-addon-api@6.1.0:
    resolution: {integrity: sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==}
@@ -5700,7 +5639,6 @@ packages:

  /node-addon-api@7.0.0:
    resolution: {integrity: sha512-vgbBJTS4m5/KkE16t5Ly0WW9hz46swAstv0hYYwMtbG7AznRhNyfLRe8HZAiWIpcHzoO7HxhLuBQj9rJ/Ho0ZA==}
-    dev: false

  /node-gyp-build-optional-packages@5.0.3:
    resolution: {integrity: sha512-k75jcVzk5wnnc/FMxsf4udAoTEUv2jY3ycfdSd3yWu6Cnd1oee6/CfZJApyscA4FJOmdoixWwiwOyf16RzD5JA==}
@@ -5710,13 +5648,11 @@ packages:
  /node-gyp-build-optional-packages@5.0.6:
    resolution: {integrity: sha512-2ZJErHG4du9G3/8IWl/l9Bp5BBFy63rno5GVmjQijvTuUZKsl6g8RB4KH/x3NLcV5ZBb4GsXmAuTYr6dRml3Gw==}
    hasBin: true
-    dev: false

  /node-gyp-build-optional-packages@5.0.7:
    resolution: {integrity: sha512-YlCCc6Wffkx0kHkmam79GKvDQ6x+QZkMjFGrIMxgFNILFvGSbCp2fCBC55pGTT9gVaz8Na5CLmxt/urtzRv36w==}
    hasBin: true
    requiresBuild: true
-    dev: false
    optional: true

  /node-object-hash@3.0.0:
@@ -5726,7 +5662,6 @@ packages:

  /node-releases@2.0.14:
    resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==}
-    dev: false

  /normalize-path@3.0.0:
    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
@@ -5753,7 +5688,6 @@ packages:

  /nullthrows@1.1.1:
    resolution: {integrity: sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw==}
-    dev: false

  /object-assign@4.1.1:
    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
@@ -5862,7 +5796,6 @@ packages:

  /ordered-binary@1.5.1:
    resolution: {integrity: sha512-5VyHfHY3cd0iza71JepYG50My+YUbrFtGoUz2ooEydPyPM7Aai/JW098juLr+RG6+rDJuzNNTsEQu2DZa1A41A==}
-    dev: false

  /os-tmpdir@1.0.2:
    resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==}
@@ -5959,7 +5892,6 @@ packages:

  /picocolors@1.0.0:
    resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
-    dev: false

  /picomatch@2.3.1:
    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
@@ -5982,8 +5914,8 @@ packages:
    engines: {node: '>= 6'}
    dev: false

-  /plasmo@0.84.0(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-SK6A/uX5mo4EsYiF7JySTOCp2aMo3ejfpbNey89M0zat9p0yDTKEClvMs9MWKXld5Ae0CXPaMYcZPAMvCMngPQ==}
+  /plasmo@0.84.2(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-9fyuQubUdYOHEs7plvppB7tPfyqTpA1UlWEYUGeVOgKQ6/rhvpvjBLCWyhzy/S3CrzXL8nZ7HQ1xHka4Coe0PA==}
    hasBin: true
    dependencies:
      '@expo/spawn-async': 1.7.2
@@ -5992,7 +5924,7 @@ packages:
      '@parcel/package-manager': 2.9.3(@parcel/core@2.9.3)
      '@parcel/watcher': 2.2.0
      '@plasmohq/init': 0.7.0
-      '@plasmohq/parcel-config': 0.40.0(react-dom@18.2.0)(react@18.2.0)(typescript@5.2.2)
+      '@plasmohq/parcel-config': 0.40.2(react-dom@18.2.0)(react@18.2.0)(typescript@5.2.2)
      '@plasmohq/parcel-core': 0.1.8
      buffer: 6.0.3
      chalk: 5.3.0
@@ -6417,7 +6349,6 @@ packages:

  /safe-buffer@5.2.1:
    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
-    dev: false

  /safe-regex-test@1.0.0:
    resolution: {integrity: sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==}
@@ -7029,13 +6960,13 @@ packages:
    engines: {node: '>= 10.0.0'}
    dev: false

-  /update-browserslist-db@1.0.13(browserslist@4.21.10):
+  /update-browserslist-db@1.0.13(browserslist@4.22.1):
    resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
    hasBin: true
    peerDependencies:
      browserslist: '>= 4.21.0'
    dependencies:
-      browserslist: 4.21.10
+      browserslist: 4.22.1
      escalade: 3.1.1
      picocolors: 1.0.0
    dev: false
@@ -7049,7 +6980,6 @@ packages:
      browserslist: 4.22.2
      escalade: 3.1.1
      picocolors: 1.0.0
-    dev: false

  /uri-js@4.4.1:
    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
@@ -7064,7 +6994,6 @@ packages:
  /utility-types@3.10.0:
    resolution: {integrity: sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg==}
    engines: {node: '>= 4'}
-    dev: false

  /vue@3.3.4:
    resolution: {integrity: sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==}
@@ -7084,7 +7013,6 @@ packages:

  /weak-lru-cache@1.2.2:
    resolution: {integrity: sha512-DEAoo25RfSYMuTGc9vPJzZcZullwIqRDSI9LOy+fkCJPi6hykCnfKaXTuPBDuXAUcqHXyOgFtHNp/kB2FjYHbw==}
-    dev: false

  /webidl-conversions@4.0.2:
    resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==}
@@ -7185,7 +7113,6 @@ packages:

  /xxhash-wasm@0.4.2:
    resolution: {integrity: sha512-/eyHVRJQCirEkSZ1agRSCwriMhwlyUcFkXD5TPVSLP+IPzjsqMVzZwdoczLp1SoQU0R3dxz1RpIK+4YNQbCVOA==}
-    dev: false

  /yallist@3.1.1:
    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
--- a/src/Popup.css
+++ b/src/Popup.css
@@ -1,17 +1,15 @@
-@import url("./font.css");
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;800&display=swap');

 html {
  min-height: 300px;
  min-width: 300px;
-  height: 100%;
 }

 body {
  min-height: 300px;
  min-width: 300px;
  margin: 0;
-  height: 100%;
-  max-height: 100%;
+  font-family: 'Inter', sans-serif;
 }

 .popup {
@@ -21,8 +19,3 @@ body {
  justify-content: center;
  align-items: center;
 }
-
-#__plasmo {
-  height: 100%;
-  background-color: #0a0a10;
-}
--- a/src/background.ts
+++ b/src/background.ts
@@ -1,4 +1,6 @@
 import { isChrome } from '~utils/extension';
+import { injectScript } from '~utils/injection';
+import { listenToTabChanges } from '~utils/tabs';

 // Both brave and firefox for some reason need this extension reload,
 // If this isn't done, they will never load properly and will fail updateDynamicRules()
@@ -11,3 +13,8 @@ if (isChrome()) {
    browser.runtime.reload();
  });
 }
+
+// We need to do some programatic script injection,
+// since we may not have permission everytime, so inject when we switch tab.
+listenToTabChanges(() => injectScript());
+injectScript();
--- a/src/background/messages/hello.ts
+++ b/src/background/messages/hello.ts
@@ -4,6 +4,7 @@ import { hasPermission } from '~hooks/usePermission';
 import { getVersion } from '~hooks/useVersion';
 import type { BaseRequest } from '~types/request';
 import type { BaseResponse } from '~types/response';
+import { makeUrlIntoDomain } from '~utils/domains';
 import { isDomainWhitelisted } from '~utils/storage';

 type Response = BaseResponse<{
@@ -14,19 +15,18 @@ type Response = BaseResponse<{

 const handler: PlasmoMessaging.MessageHandler<BaseRequest, Response> = async (req, res) => {
  try {
-    if (!req.sender?.tab?.url) throw new Error('No tab URL found in the request.');
-
+    const domain = makeUrlIntoDomain(req.sender.url ?? '');
    const version = getVersion();
    res.send({
      success: true,
      version,
      allowed: await isDomainWhitelisted(req.sender.tab.url),
-      hasPermission: await hasPermission(),
+      hasPermission: await hasPermission(domain),
    });
  } catch (err) {
    res.send({
      success: false,
-      error: err instanceof Error ? err.message : String(err),
+      error: err.message,
    });
  }
 };
--- a/src/background/messages/inject.ts
+++ b/src/background/messages/inject.ts
@@ -0,0 +1,10 @@
+import type { PlasmoMessaging } from '@plasmohq/messaging';
+
+import { injectScript } from '~utils/injection';
+
+const handler: PlasmoMessaging.MessageHandler = async (_req, res) => {
+  injectScript();
+  res.send({});
+};
+
+export default handler;
--- a/src/background/messages/makeRequest.ts
+++ b/src/background/messages/makeRequest.ts
@@ -3,7 +3,6 @@ import type { PlasmoMessaging } from '@plasmohq/messaging';
 import type { BaseRequest } from '~types/request';
 import type { BaseResponse } from '~types/response';
 import { removeDynamicRules, setDynamicRules } from '~utils/declarativeNetRequest';
-import { isFirefox } from '~utils/extension';
 import { makeFullUrl } from '~utils/fetcher';
 import { assertDomainWhitelist } from '~utils/storage';

@@ -32,7 +31,7 @@ type Response<T> = BaseResponse<{
 const mapBodyToFetchBody = (body: Request['body'], bodyType: Request['bodyType']): BodyInit => {
  if (bodyType === 'FormData') {
    const formData = new FormData();
-    body.forEach(([key, value]: [any, any]) => {
+    body.forEach(([key, value]) => {
      formData.append(key, value.toString());
    });
  }
@@ -50,17 +49,18 @@ const mapBodyToFetchBody = (body: Request['body'], bodyType: Request['bodyType']

 const handler: PlasmoMessaging.MessageHandler<Request, Response<any>> = async (req, res) => {
  try {
-    if (!req.sender?.tab?.url) throw new Error('No tab URL found in the request.');
-    if (!req.body) throw new Error('No request body found in the request.');
-
    const url = makeFullUrl(req.body.url, req.body);
    await assertDomainWhitelist(req.sender.tab.url);

-    await setDynamicRules({
-      ruleId: MAKE_REQUEST_DYNAMIC_RULE,
-      targetDomains: [new URL(url).hostname],
-      requestHeaders: req.body.headers,
-    });
+    if (req.body.headers['User-Agent']) {
+      await setDynamicRules({
+        ruleId: MAKE_REQUEST_DYNAMIC_RULE,
+        targetDomains: [new URL(url).hostname],
+        requestHeaders: {
+          'User-Agent': req.body.headers['User-Agent'],
+        },
+      });
+    }

    const response = await fetch(url, {
      method: req.body.method,
@@ -71,21 +71,11 @@ const handler: PlasmoMessaging.MessageHandler<Request, Response<any>> = async (r
    const contentType = response.headers.get('content-type');
    const body = contentType?.includes('application/json') ? await response.json() : await response.text();

-    const cookies = await (chrome || browser).cookies.getAll({
-      url: response.url,
-      ...(isFirefox() && {
-        firstPartyDomain: new URL(response.url).hostname,
-      }),
-    });
-
    res.send({
      success: true,
      response: {
        statusCode: response.status,
-        headers: {
-          ...Object.fromEntries(response.headers.entries()),
-          'Set-Cookie': cookies.map((cookie) => `${cookie.name}=${cookie.value}`).join(', '),
-        },
+        headers: Object.fromEntries(response.headers.entries()), // Headers object isn't serializable
        body,
        finalUrl: response.url,
      },
@@ -94,7 +84,7 @@ const handler: PlasmoMessaging.MessageHandler<Request, Response<any>> = async (r
    console.error('failed request', err);
    res.send({
      success: false,
-      error: err instanceof Error ? err.message : String(err),
+      error: err.message,
    });
  }
 };
--- a/src/background/messages/openPage.ts
+++ b/src/background/messages/openPage.ts
@@ -11,9 +11,6 @@ type Request = BaseRequest & {

 const handler: PlasmoMessaging.MessageHandler<Request, BaseResponse> = async (req, res) => {
  try {
-    if (!req.sender?.tab?.id) throw new Error('No tab ID found in the request.');
-    if (!req.body) throw new Error('No body found in the request.');
-
    const searchParams = new URLSearchParams();
    searchParams.set('redirectUrl', req.body.redirectUrl);
    const url = (chrome || browser).runtime.getURL(`/tabs/${req.body.page}.html?${searchParams.toString()}`);
@@ -32,7 +29,7 @@ const handler: PlasmoMessaging.MessageHandler<Request, BaseResponse> = async (re
  } catch (err) {
    res.send({
      success: false,
-      error: err instanceof Error ? err.message : String(err),
+      error: err.message,
    });
  }
 };
--- a/src/background/messages/prepareStream.ts
+++ b/src/background/messages/prepareStream.ts
@@ -15,9 +15,6 @@ interface Request extends BaseRequest {

 const handler: PlasmoMessaging.MessageHandler<Request, BaseResponse> = async (req, res) => {
  try {
-    if (!req.sender?.tab?.url) throw new Error('No tab URL found in the request.');
-    if (!req.body) throw new Error('No request body found in the request.');
-
    await assertDomainWhitelist(req.sender.tab.url);
    await setDynamicRules(req.body);
    res.send({
@@ -26,7 +23,7 @@ const handler: PlasmoMessaging.MessageHandler<Request, BaseResponse> = async (re
  } catch (err) {
    res.send({
      success: false,
-      error: err instanceof Error ? err.message : String(err),
+      error: err.message,
    });
  }
 };
--- a/src/components/BottomLabel.css
+++ b/src/components/BottomLabel.css
@@ -1,6 +1,6 @@
 .bottom-label {
  position: absolute;
-  bottom: 1rem;
+  bottom: .25rem;
  display: flex;
  align-items: center;
  gap: .5rem;
@@ -9,18 +9,9 @@
  font-size: 14px;
 }

-.top-right-label {
-  position: absolute;
-  right: 1rem;
-  top: 1rem;
-  font-weight: normal;
-  color: #4A4863;
-  font-size: 14px;
-}
-
 .dot {
-  width: 3px;
-  height: 3px;
+  width: 2px;
+  height: 2px;
  background: currentColor;
  border-radius: 100px;
-}
+}
--- a/src/components/BottomLabel.tsx
+++ b/src/components/BottomLabel.tsx
@@ -12,9 +12,3 @@ export function BottomLabel() {
    </h3>
  );
 }
-
-export function TopRightLabel() {
-  const version = useVersion({ prefixed: true });
-
-  return <h3 className="top-right-label">{version}</h3>;
-}
--- a/src/components/Button.css
+++ b/src/components/Button.css
@@ -1,41 +0,0 @@
-.button {
-  padding: 1rem;
-  border-radius: 12px;
-  border: 0;
-  font-size: 1rem;
-  text-align: center;
-  cursor: pointer;
-  transition: background-color 100ms ease-in-out, color 100ms ease-in-out, transform 100ms ease-in-out;
-}
-
-.button.full {
-  width: 100%;
-}
-
-.button, .button:focus, .button:active, .button:visited {
-  text-decoration: none;
-}
-
-.button:active {
-  transform: scale(1.05);
-}
-
-.button.button-secondary {
-  background-color: #222033;
-  color: white;
-}
-
-.button.button-secondary:hover {
-  background-color: #2c2941;
-  color: white;
-}
-
-.button.button-primary {
-  background-color: #4F328A;
-  color: white;
-}
-
-.button.button-primary:hover {
-  background-color: #5E3F9D;
-  color: white;
-}
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,27 +0,0 @@
-import type { ReactNode } from 'react';
-
-import './Button.css';
-
-export interface ButtonProps {
-  type?: 'primary' | 'secondary';
-  href?: string;
-  children?: ReactNode;
-  onClick?: () => void;
-  full?: boolean;
-  className?: string;
-}
-
-export function Button(props: ButtonProps) {
-  const classes = `button button-${props.type ?? 'primary'} ${props.className ?? ''} ${props.full ? 'full' : ''}`;
-  if (props.href)
-    return (
-      <a href={props.href} className={classes} target="_blank" rel="noreferrer">
-        {props.children}
-      </a>
-    );
-  return (
-    <button className={classes} type="button" onClick={props.onClick}>
-      {props.children}
-    </button>
-  );
-}
--- a/src/components/DisabledScreen.css
+++ b/src/components/DisabledScreen.css
@@ -5,11 +5,11 @@
  font-size: 16px;
 }

-.disabled .icon {
-  font-size: 1.5rem;
-  margin-bottom: 1rem;
-  text-align: center;
-  display: inline-block;
+.disabled svg {
+  display: block;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin: 0 auto;
  color: #B44868;
 }

@@ -19,4 +19,4 @@

 .disabled strong {
  color: white;
-}
+}
--- a/src/components/DisabledScreen.tsx
+++ b/src/components/DisabledScreen.tsx
@@ -4,9 +4,7 @@ import { Icon } from './Icon';
 export function DisabledScreen() {
  return (
    <div className="disabled">
-      <div className="icon">
-        <Icon name="warningCircle" />
-      </div>
+      <Icon name="warningCircle" />
      <p>
        The <strong>movie-web extension</strong> can not be used on this page
      </p>
--- a/src/components/Icon.tsx
+++ b/src/components/Icon.tsx
@@ -1,25 +1,10 @@
 const icons = {
  power: `<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#filter0_i_1153_291)"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.4375 2.875C16.4375 2.36114 16.2334 1.86833 15.87 1.50498C15.5067 1.14163 15.0139 0.9375 14.5 0.9375C13.9861 0.9375 13.4933 1.14163 13.13 1.50498C12.7666 1.86833 12.5625 2.36114 12.5625 2.875V15.7917C12.5625 16.3055 12.7666 16.7983 13.13 17.1617C13.4933 17.525 13.9861 17.7292 14.5 17.7292C15.0139 17.7292 15.5067 17.525 15.87 17.1617C16.2334 16.7983 16.4375 16.3055 16.4375 15.7917V2.875ZM9.14475 6.42708C9.35678 6.28621 9.53899 6.10495 9.68097 5.89366C9.82295 5.68237 9.92192 5.44519 9.97224 5.19565C10.0226 4.94611 10.0232 4.6891 9.97422 4.4393C9.92521 4.1895 9.82748 3.9518 9.68661 3.73977C9.54574 3.52774 9.36448 3.34553 9.15319 3.20355C8.9419 3.06157 8.70471 2.9626 8.45517 2.91228C8.20563 2.86197 7.94863 2.86129 7.69883 2.9103C7.44903 2.95931 7.21132 3.05704 6.99929 3.19792C5.13427 4.43483 3.60458 6.11435 2.54683 8.08651C1.48907 10.0587 0.936176 12.2621 0.937502 14.5C0.937502 21.9904 7.00963 28.0625 14.5 28.0625C21.9904 28.0625 28.0625 21.9904 28.0625 14.5C28.0625 9.78025 25.651 5.62625 22.0007 3.19792C21.5725 2.91358 21.0489 2.811 20.545 2.91274C20.0412 3.01448 19.5984 3.3122 19.314 3.74042C19.0297 4.16863 18.9271 4.69226 19.0289 5.19611C19.1306 5.69995 19.4283 6.14275 19.8565 6.42708C21.5907 7.5775 22.9083 9.25578 23.6143 11.2134C24.3203 13.1711 24.3771 15.3041 23.7763 17.2965C23.1755 19.289 21.9491 21.035 20.2786 22.2761C18.6081 23.5172 16.5824 24.1873 14.5013 24.1873C12.4202 24.1873 10.3945 23.5172 8.72399 22.2761C7.05349 21.035 5.82705 19.289 5.22627 17.2965C4.62548 15.3041 4.68228 13.1711 5.38826 11.2134C6.09424 9.25578 7.41057 7.5775 9.14475 6.42708Z" fill="currentColor" /></g><defs><filter id="filter0_i_1153_291" x="0.9375" y="0.9375" width="27.125" height="27.125"filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix" /><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" /><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" /><feOffset /><feGaussianBlur stdDeviation="2" /><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" /><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" /><feBlend mode="normal" in2="shape" result="effect1_innerShadow_1153_291" /></filter></defs></svg>`,
  warningCircle: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>`,
-  github: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 496 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>`,
-  cookie: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M247.2 17c-22.1-3.1-44.6 .9-64.4 11.4l-74 39.5C89.1 78.4 73.2 94.9 63.4 115L26.7 190.6c-9.8 20.1-13 42.9-9.1 64.9l14.5 82.8c3.9 22.1 14.6 42.3 30.7 57.9l60.3 58.4c16.1 15.6 36.6 25.6 58.7 28.7l83 11.7c22.1 3.1 44.6-.9 64.4-11.4l74-39.5c19.7-10.5 35.6-27 45.4-47.2l36.7-75.5c9.8-20.1 13-42.9 9.1-64.9l-14.6-82.8c-3.9-22.1-14.6-42.3-30.7-57.9L388.9 57.5c-16.1-15.6-36.6-25.6-58.7-28.7L247.2 17zM208 144a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM144 336a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm224-64a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>`,
-  windows: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M432 64H208c-8.8 0-16 7.2-16 16V96H128V80c0-44.2 35.8-80 80-80H432c44.2 0 80 35.8 80 80V304c0 44.2-35.8 80-80 80H416V320h16c8.8 0 16-7.2 16-16V80c0-8.8-7.2-16-16-16zM0 192c0-35.3 28.7-64 64-64H320c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192zm64 32c0 17.7 14.3 32 32 32H288c17.7 0 32-14.3 32-32s-14.3-32-32-32H96c-17.7 0-32 14.3-32 32z"/></svg>`,
-  shield: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M269.4 2.9C265.2 1 260.7 0 256 0s-9.2 1-13.4 2.9L54.3 82.8c-22 9.3-38.4 31-38.3 57.2c.5 99.2 41.3 280.7 213.6 363.2c16.7 8 36.1 8 52.8 0C454.7 420.7 495.5 239.2 496 140c.1-26.2-16.3-47.9-38.3-57.2L269.4 2.9zM160 154.4c0-5.8 4.7-10.4 10.4-10.4h.2c3.4 0 6.5 1.6 8.5 4.3l40 53.3c3 4 7.8 6.4 12.8 6.4h48c5 0 9.8-2.4 12.8-6.4l40-53.3c2-2.7 5.2-4.3 8.5-4.3h.2c5.8 0 10.4 4.7 10.4 10.4V272c0 53-43 96-96 96s-96-43-96-96V154.4zM216 288a16 16 0 1 0 0-32 16 16 0 1 0 0 32zm96-16a16 16 0 1 0 -32 0 16 16 0 1 0 32 0z"/></svg>`,
-  logo: `<svg width="1em" height="1em" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.2254 4.95486L10.5285 5.65174L9.83162 4.95486L10.5285 4.25799L7.7414 1.4709L7.04453 2.16777L6.34766 1.4709L7.04453 0.774022L6.34766 0.0771484L0.0761918 6.34861L0.773066 7.04549L1.46994 6.34861L2.16681 7.04549L1.46994 7.74236L4.25743 10.5299L4.95431 9.83298L5.65118 10.5299L4.95431 11.2267L5.65118 11.9236L11.9226 5.65214L11.2254 4.95486ZM2.86529 6.35021L2.16681 5.65174L2.86369 4.95487L3.56056 5.65174L2.86529 6.35021ZM4.25904 4.95647L3.56056 4.25799L4.25703 3.56152L4.95391 4.25839L4.25904 4.95647ZM5.65278 3.56272L4.95431 2.86424L5.65078 2.16777L6.34766 2.86464L5.65278 3.56272ZM6.34766 9.83258L5.65078 9.13571L6.34766 8.43883L7.04453 9.13571L6.34766 9.83258ZM7.7414 8.43883L7.04453 7.74196L7.741 7.04549L8.43788 7.74236L7.7414 8.43883ZM9.13515 7.04509L8.43828 6.34821L9.13475 5.65174L9.83162 6.34861L9.13515 7.04509Z" fill="currentColor"/></svg>`,
-  network: `<svg width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 64H384v64H256V64zM240 0c-26.5 0-48 21.5-48 48v96c0 26.5 21.5 48 48 48h48v32H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96v32H80c-26.5 0-48 21.5-48 48v96c0 26.5 21.5 48 48 48H240c26.5 0 48-21.5 48-48V368c0-26.5-21.5-48-48-48H192V288H448v32H400c-26.5 0-48 21.5-48 48v96c0 26.5 21.5 48 48 48H560c26.5 0 48-21.5 48-48V368c0-26.5-21.5-48-48-48H512V288h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352V192h48c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48H240zM96 448V384H224v64H96zm320-64H544v64H416V384z"/></svg>`,
 };
-
 export type Icons = keyof typeof icons;

 export function Icon(props: { name: Icons }) {
-  return (
-    <div
-      // eslint-disable-next-line react/no-danger
-      dangerouslySetInnerHTML={{ __html: icons[props.name] }}
-      style={{
-        width: '1em',
-        height: '1em',
-      }}
-    />
-  );
+  // eslint-disable-next-line react/no-danger
+  return <div dangerouslySetInnerHTML={{ __html: icons[props.name] }} />;
 }
--- a/src/components/PermissionMissingScreen.tsx
+++ b/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>
+  );
+}
--- a/src/components/SetupScreen.css
+++ b/src/components/SetupScreen.css
@@ -1,41 +0,0 @@
-.setup-screen .title {
-  font-size: 1.5rem;
-  color: white;
-}
-
-.setup-screen .paragraph {
-  font-size: 1rem;
-  color: #666485;
-  max-width: 220px;
-}
-
-.setup-screen .top {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  flex: 1;
-}
-
-.setup-screen {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-  box-sizing: border-box;
-  padding: 2rem;
-  text-align: center;
-}
-
-.setup-screen .icon {
-  background-color: #0b0b1b77;
-  color: #945DCC;
-  height: 40px;
-  font-size: 20px;
-  width: 40px;
-  border-radius: 9999px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 20px;
-}
--- a/src/components/SetupScreen.tsx
+++ b/src/components/SetupScreen.tsx
@@ -1,31 +0,0 @@
-import { useCallback } from 'react';
-
-import { Button } from '~components/Button';
-import { Icon } from '~components/Icon';
-
-import './SetupScreen.css';
-
-export function SetupScreen() {
-  const open = useCallback(() => {
-    const url = (chrome || browser).runtime.getURL(`/tabs/PermissionRequest.html`);
-    (chrome || browser).tabs.create({ url });
-    window.close();
-  }, []);
-
-  return (
-    <div className="setup-screen">
-      <div className="top">
-        <div className="icon">
-          <Icon name="logo" />
-        </div>
-        <h1 className="title">Let&apos;s get this set up!</h1>
-        <p className="paragraph" style={{ paddingBottom: 25, paddingTop: 10 }}>
-          To get started, we need to setup some things first. Click the button below to continue.
-        </p>
-      </div>
-      <Button onClick={open} full>
-        Continue
-      </Button>
-    </div>
-  );
-}
--- a/src/components/ToggleButton.tsx
+++ b/src/components/ToggleButton.tsx
@@ -36,7 +36,7 @@ export function ToggleButton(props: ToggleButtonProps) {
        </button>
      </div>
      <p>
-        Extension <strong>{props.active ? 'enabled' : 'disabled'}</strong> <br /> on <strong>{props.domain}</strong>
+        Extension {props.active ? 'enabled' : 'disabled'} <br /> on <strong>{props.domain}</strong>
      </p>
    </div>
  );
--- a/src/contents/movie-web.ts
+++ b/src/contents/movie-web.ts
@@ -1,9 +1,7 @@
 import { relayMessage } from '@plasmohq/messaging';
 import type { PlasmoCSConfig } from 'plasmo';

-export const config: PlasmoCSConfig = {
-  matches: ['<all_urls>'],
-};
+export const config: PlasmoCSConfig = {};

 relayMessage({
  name: 'hello',
--- a/src/font.css
+++ b/src/font.css
@@ -1,28 +0,0 @@
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 400;
-  src: url(data-base64:~assets/inter/regular.ttf);
-}
-
-@font-face {
-  font-family: "Inter";
-  font-style: bold;
-  font-weight: 700;
-  src: url(data-base64:~assets/inter/bold.ttf);
-}
-
-body, html {
-  font-family: "Inter", Arial, Helvetica, sans-serif;
-  font-size: 13px;
-}
-
-* {
-  margin: 0;
-  padding: 0;
-}
-
-button {
-  font-family: inherit;
-  font-size: inherit;
-}
--- a/src/hooks/useDomain.ts
+++ b/src/hooks/useDomain.ts
@@ -15,5 +15,5 @@ export function useDomain(): null | string {
    };
  }, []);

-  return domain ? makeUrlIntoDomain(domain) : null;
+  return makeUrlIntoDomain(domain);
 }
--- a/src/hooks/useDomainWhitelist.ts
+++ b/src/hooks/useDomainWhitelist.ts
@@ -8,12 +8,12 @@ export function useDomainWhitelist() {

  const removeDomain = useCallback((domain: string | null) => {
    if (!domain) return;
-    setDomainWhitelist((s) => [...(s ?? []).filter((v) => v !== domain)]);
+    setDomainWhitelist((s) => [...s.filter((v) => v !== domain)]);
  }, []);

  const addDomain = useCallback((domain: string | null) => {
    if (!domain) return;
-    setDomainWhitelist((s) => [...(s ?? []).filter((v) => v !== domain), domain]);
+    setDomainWhitelist((s) => [...s.filter((v) => v !== domain), domain]);
  }, []);

  return {
@@ -23,15 +23,10 @@ export function useDomainWhitelist() {
  };
 }

-export function useToggleWhitelistDomain(domain: string | null) {
+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 isWhitelisted = domainWhitelist.includes(domain);
+  const { grantPermission } = usePermission(domain);

  const toggle = useCallback(() => {
    if (!isWhitelisted) {
--- a/src/hooks/usePermission.ts
+++ b/src/hooks/usePermission.ts
@@ -1,29 +1,39 @@
+import { sendToBackground } from '@plasmohq/messaging';
 import { useCallback, useEffect, useState } from 'react';

 import { useDomainWhitelist } from './useDomainWhitelist';

-export async function hasPermission() {
+function makeDomainIntoOriginMatchers(domain: string): string[] {
+  return [`http://${domain}/*`, `https://${domain}/*`];
+}
+
+export async function hasPermission(domain: string) {
  return chrome.permissions.contains({
-    origins: ['<all_urls>'],
+    origins: makeDomainIntoOriginMatchers(domain),
  });
 }

-export function usePermission() {
+export function usePermission(domain: string) {
  const { addDomain } = useDomainWhitelist();
  const [permission, setPermission] = useState(false);

-  const grantPermission = useCallback(async (domain?: string) => {
+  const grantPermission = useCallback(async () => {
    const granted = await chrome.permissions.request({
-      origins: ['<all_urls>'],
+      origins: makeDomainIntoOriginMatchers(domain),
    });
    setPermission(granted);
-    if (granted && domain) addDomain(domain);
+    if (granted && domain) {
+      await sendToBackground({
+        name: 'inject',
+      });
+      addDomain(domain);
+    }
    return granted;
-  }, []);
+  }, [domain]);

  useEffect(() => {
-    hasPermission().then((has) => setPermission(has));
-  }, []);
+    hasPermission(domain).then((has) => setPermission(has));
+  }, [domain]);

  return {
    hasPermission: permission,
--- a/src/popup.tsx
+++ b/src/popup.tsx
@@ -1,35 +1,28 @@
-import { BottomLabel, TopRightLabel } from '~components/BottomLabel';
+import { BottomLabel } from '~components/BottomLabel';
 import { DisabledScreen } from '~components/DisabledScreen';
 import { Frame } from '~components/Frame';
-import { SetupScreen } from '~components/SetupScreen';
+import { PermissionMissingScreen } from '~components/PermissionMissingScreen';
 import { ToggleButton } from '~components/ToggleButton';
 import { useDomain } from '~hooks/useDomain';
 import { useToggleWhitelistDomain } from '~hooks/useDomainWhitelist';
-import { usePermission } from '~hooks/usePermission';
-
 import './Popup.css';
+import { usePermission } from '~hooks/usePermission';

 function IndexPopup() {
  const domain = useDomain();
  const { isWhitelisted, toggle } = useToggleWhitelistDomain(domain);
-  const { hasPermission } = usePermission();
+  const { grantPermission, hasPermission } = usePermission(domain);

  let page = 'toggle';
  if (!hasPermission) page = 'perm';
  else if (!domain) page = 'disabled';

-  return page === 'perm' ? (
+  return (
    <Frame>
      <div className="popup">
-        <SetupScreen />
-        <TopRightLabel />
-      </div>
-    </Frame>
-  ) : (
-    <Frame>
-      <div className="popup">
-        {page === 'toggle' && domain ? <ToggleButton active={isWhitelisted} onClick={toggle} domain={domain} /> : null}
+        {page === 'toggle' ? <ToggleButton active={isWhitelisted} onClick={toggle} domain={domain} /> : null}
        {page === 'disabled' ? <DisabledScreen /> : null}
+        {page === 'perm' ? <PermissionMissingScreen onGrant={grantPermission} /> : null}
        <BottomLabel />
      </div>
    </Frame>
--- a/src/tabs/PermissionGrant.css
+++ b/src/tabs/PermissionGrant.css
@@ -1,23 +1,26 @@
-@import url("../font.css");
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;800&display=swap');
+
+* {
+  margin: 0;
+  padding: 0;
+}

 html {
  height: 100%;
-  font-size: 16px;
 }

 body {
  height: 100%;
  max-height: 100%;
+  font-family: 'Inter', sans-serif;
 }

 #__plasmo {
-  display: flex;
-  flex-direction: column;
  height: 100%;
-  background-color: #0A0A10;
+  background-color: #0a0a10;
 }

-.container.permission-grant {
+.container {
  height: 100%;
  width: 100%;
  display: flex;
@@ -25,49 +28,76 @@ body {
  justify-content: center;
 }

-.permission-grant .inner-container {
+.inner-container {
  width: 400px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
 }

-.permission-grant .permission-card {
+.permission-card {
  display: flex;
  align-items: center;
-  flex-direction: column;
  justify-content: center;
-  border-radius: 20px;
-  padding: 40px;
-  padding-top: 50px;
+  background-color: #0f0f1b;
+  border-radius: 10px;
+  height: 125px;
+  padding-right: 40px;
+  padding-left: 40px;
  font-size: 14px;
-  border: 1px solid #272A37;
+  border: 1px solid #20202d;
 }

-.permission-grant h1 {
-  font-size: 1.25rem;
-  margin-bottom: 0.5rem;
+.footer {
+  display: flex;
 }

-.permission-grant .permission-card > p {
-  font-size: 1rem;
-  margin-top: .5rem;
-  margin-bottom: 1rem;
-}
-
-.permission-grant .color-white {
+.color-white {
  color: #ffffff;
 }

-.permission-grant .text-color {
+.text-color {
  color: #73739d;
 }

-.permission-grant .buttons {
-  width: 100%;
-  margin-top: 2rem;
+.go-back-btn,
+.grant-permission-btn {
+  color: #ffffff;
+  padding: 10px 20px;
+  border-radius: 10px;
+  border: 1px solid #0000;
+  cursor: pointer;
+  font-size: 14px;
 }

-.permission-grant .buttons>*+* {
-  margin-top: 1rem;
+.go-back-btn {
+  background:
+    linear-gradient(to right, #151522, #181b2a) padding-box,
+    linear-gradient(50deg, #151522, #181b2a, #456b95) border-box;
+}
+
+.grant-permission-btn {
+  background:
+    linear-gradient(to right, #482179, #8a39e6) padding-box,
+    linear-gradient(50deg, #482179, #4f3585, #b79ae0) border-box;
+}
+
+.go-back-btn:hover {
+  background:
+    linear-gradient(to right, #2a334e, #2f3552) padding-box,
+    linear-gradient(50deg, #2a334e, #2f3552, #6086b7) border-box;
+}
+
+.grant-permission-btn:hover {
+  background:
+    linear-gradient(to right, #603a9a, #a25ff5) padding-box,
+    linear-gradient(50deg, #603a9a, #653c9f, #d9aef1) border-box;
+}
+
+.grant-permission-btn:disabled {
+  background:
+    linear-gradient(to right, #311e4b, #6b4b99) padding-box,
+    linear-gradient(50deg, #311e4b, #3b265b, #704fa5) border-box;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
--- a/src/tabs/PermissionGrant.tsx
+++ b/src/tabs/PermissionGrant.tsx
@@ -1,61 +1,56 @@
-import { Button } from '~components/Button';
+import { useDomainWhitelist } from '~hooks/useDomainWhitelist';
 import { usePermission } from '~hooks/usePermission';
 import { makeUrlIntoDomain } from '~utils/domains';

 import './PermissionGrant.css';

 export default function PermissionGrant() {
-  const { grantPermission } = usePermission();
+  const { domainWhitelist } = useDomainWhitelist();

  const queryParams = new URLSearchParams(window.location.search);
-  const redirectUrl = queryParams.get('redirectUrl') ?? undefined;
-  const domain = redirectUrl ? makeUrlIntoDomain(redirectUrl) : undefined;
+  const redirectUrl = queryParams.get('redirectUrl') ?? 'https://movie-web.app';
+  const domain = makeUrlIntoDomain(redirectUrl);

-  if (!domain) {
-    return (
-      <div className="permission-grant container">
-        <div className="inner-container">
-          <div className="permission-card">
-            <h1 className="color-white">Permission</h1>
-            <p className="text-color" style={{ textAlign: 'center' }}>
-              No domain found to grant permission to.
-            </p>
-          </div>
-        </div>
-      </div>
-    );
-  }
+  const { hasPermission, grantPermission } = usePermission(domain);
+  const permissionsGranted = domainWhitelist.includes(domain) && hasPermission;

  const redirectBack = () => {
    chrome.tabs.getCurrent((tab) => {
-      if (!tab?.id) return;
      chrome.tabs.update(tab.id, { url: redirectUrl });
    });
  };

  const handleGrantPermission = () => {
-    grantPermission(domain).then(() => {
+    grantPermission().then(() => {
      redirectBack();
    });
  };

  return (
-    <div className="permission-grant container">
+    <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">
-          <h1 className="color-white">Permission</h1>
          <p className="text-color" style={{ textAlign: 'center' }}>
            The website <span className="color-white">{domain}</span> wants to <br /> use the extension on their page.
-            Do you trust them?
          </p>
-          <div className="buttons">
-            <Button full onClick={handleGrantPermission}>
-              Grant Permission
-            </Button>
-            <Button full onClick={redirectBack} type="secondary">
-              Decline
-            </Button>
-          </div>
+        </div>
+        <div className="footer">
+          <button type="button" className="go-back-btn" onClick={redirectBack}>
+            Go back
+          </button>
+          <div style={{ flex: 1 }} />
+          <button
+            type="button"
+            className="grant-permission-btn"
+            onClick={handleGrantPermission}
+            disabled={permissionsGranted}
+          >
+            Grant Permission
+          </button>
        </div>
      </div>
    </div>
--- a/src/tabs/PermissionRequest.css
+++ b/src/tabs/PermissionRequest.css
@@ -1,141 +0,0 @@
-@import url("../font.css");
-
-html {
-  font-size: 16px;
-}
-
-body {
-  background-color: #0A0A10;
-  color: white;
-  padding-bottom: 50px;
-}
-
-#__plasmo {
-  height: unset;
-}
-
-.permission-request.container {
-  width: 90%;
-  margin: 100px auto;
-  max-width: 628px;
-}
-
-.permission-request .inner-container {
-  display: flex;
-  flex-direction: column;
-}
-
-.permission-request h1 {
-  font-size: 2rem;
-  font-weight: bold;
-}
-
-.permission-request h2 {
-  font-size: 1.5rem;
-  font-weight: bold;
-  margin-top: 4rem;
-  margin-bottom: 1rem;
-}
-
-.permission-request .text-color {
-  color: #7C7C97;
-}
-
-.permission-request .paragraph {
-  font-size: 1rem;
-  margin-top: 20px;
-  max-width: 500px;
-  line-height: 1.3;
-}
-
-.permission-request .card-list {
-  margin: 1rem 0;
-}
-
-.permission-request .card-list>*+* {
-  margin-top: 1rem;
-}
-
-.permission-request .card {
-  padding: 25px 20px;
-  border: 1px solid #272A37;
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  gap: 1rem;
-  border-radius: 11px;
-}
-
-@media screen and (max-width: 550px) {
-  .permission-request .card {
-    grid-template-columns: auto;
-    grid-template-rows: auto auto auto;
-  }
-}
-
-.permission-request .card .icon-circle {
-  width: 2rem;
-  height: 2rem;
-  font-size: 1rem;
-  background-color: rgba(39, 42, 55, 0.35);
-  border: 1px solid #272A37;
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.permission-request .card.purple, .permission-request .card.purple .icon-circle {
-  border-color: #49277C;
-}
-
-.permission-request .card.purple .icon-circle {
-  background-color: rgba(51, 27, 87, .4);
-}
-
-.permission-request .card .icon-circle > div {
-  display: block;
-  width: 1rem;
-  height: 1rem;
-}
-
-.permission-request .card h3 {
-  font-size: 1rem;
-  font-weight: bold;
-  color: white;
-  margin-top: 5px;
-}
-
-.permission-request .card .paragraph {
-  margin-top: 0.5rem;
-}
-
-.permission-request .card .center-y {
-  display: flex;
-  align-items: center;
-}
-
-.permission-request .card button {
-  padding: 1rem;
-  border-radius: 10px;
-  border: 0;
-  font-size: 1rem;
-  font-weight: bold;
-  background-color: #222033;
-  color: white;
-}
-
-.permission-request .card:not(.purple) .icon-circle {
-  color: #7C7C97;
-}
-
-.permission-request .footer {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100px;
-  background: linear-gradient(to top, #0A0A10 30%, transparent);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
--- a/src/tabs/PermissionRequest.tsx
+++ b/src/tabs/PermissionRequest.tsx
@@ -1,107 +0,0 @@
-import { useCallback } from 'react';
-
-import { Button } from '~components/Button';
-import { Icon } from '~components/Icon';
-import { usePermission } from '~hooks/usePermission';
-
-import './PermissionRequest.css';
-
-function Card(props: { purple?: boolean; children: React.ReactNode; icon?: React.ReactNode; right?: React.ReactNode }) {
-  return (
-    <div className={['card', props.purple ? 'purple' : ''].join(' ')}>
-      <div>
-        <div className="icon-circle">{props.icon}</div>
-      </div>
-      <div>{props.children}</div>
-      {props.right ? <div className="center-y">{props.right}</div> : null}
-    </div>
-  );
-}
-
-export default function PermissionRequest() {
-  const { grantPermission } = usePermission();
-
-  const grant = useCallback(() => {
-    grantPermission().then(() => window.close());
-  }, [grantPermission]);
-
-  return (
-    <div className="container permission-request">
-      <div className="inner-container">
-        <h1 className="color-white">
-          We need some <br /> browser permissions
-        </h1>
-        <p className="text-color paragraph">
-          We don&apos;t like it either, but the movie-web extension needs quite a few permissions to function. Listed
-          below is an explanation for all permissions we need.
-        </p>
-
-        <div className="card-list" style={{ marginTop: '2.5rem' }}>
-          <Card
-            purple
-            icon={<Icon name="github" />}
-            right={
-              <Button type="secondary" href="https://github.com/movie-web/extension">
-                Read source code
-              </Button>
-            }
-          >
-            <h3>Read the source code on GitHub</h3>
-            <p className="text-color paragraph">
-              Don&apos;t trust us? Read the code and decide for yourself if it&apos;s safe!
-            </p>
-          </Card>
-        </div>
-
-        <h2>Permission list</h2>
-        <div className="card-list">
-          <Card icon={<Icon name="windows" />}>
-            <h3>Read & change data from all sites</h3>
-            <p className="text-color paragraph">
-              This is so the extension can gather content from the sources. We need to be able to reach those sources.
-              Unfortunately that requires us to request the permissions from all sites.
-            </p>
-          </Card>
-          <Card icon={<Icon name="network" />}>
-            <h3>Network Requests</h3>
-            <p className="text-color paragraph">
-              This permission allows the extension to instruct the browser how to request data from sites. In more
-              technical terms, this allows movie-web to modify HTTP headers that it wouldn&apos;t normally be allowed
-              to.
-            </p>
-            <p className="text-color paragraph">
-              You won&apos;t be prompted for this permission, it&apos;s included in “Read & change data from all sites”.
-            </p>
-          </Card>
-          <Card icon={<Icon name="cookie" />}>
-            <h3>Read and write cookies</h3>
-            <p className="text-color paragraph">
-              Some sources use cookies for authentication. We need to be able to read and set those cookies.
-            </p>
-            <p className="text-color paragraph">
-              You won&apos;t be prompted for this permission, it&apos;s included in “Read & change data from all sites”.
-            </p>
-          </Card>
-          <Card icon={<Icon name="shield" />}>
-            <h3>Active tab</h3>
-            <p className="text-color paragraph">
-              To determine which site has access to the extension or not, we need to know what tab you&apos;re currently
-              using.
-            </p>
-            <p className="text-color paragraph">
-              This permission is given to all extensions by default, so your browser won&apos;t prompt you for it.
-            </p>
-          </Card>
-        </div>
-
-        <div className="footer">
-          <div style={{ width: '250px' }}>
-            <Button full onClick={grant}>
-              Grant Permission
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/src/utils/declarativeNetRequest.ts
+++ b/src/utils/declarativeNetRequest.ts
@@ -56,11 +56,6 @@ export const setDynamicRules = async (body: DynamicRule) => {
                operation: chrome.declarativeNetRequest.HeaderOperation.SET,
                value: '*',
              },
-              {
-                header: 'Access-Control-Allow-Credentials',
-                operation: chrome.declarativeNetRequest.HeaderOperation.SET,
-                value: 'true',
-              },
              ...mapHeadersToDeclarativeNetRequestHeaders(
                body.responseHeaders ?? {},
                chrome.declarativeNetRequest.HeaderOperation.SET,
@@ -104,11 +99,6 @@ export const setDynamicRules = async (body: DynamicRule) => {
                operation: 'set',
                value: '*',
              },
-              {
-                header: 'Access-Control-Allow-Credentials',
-                operation: 'set',
-                value: 'true',
-              },
              ...mapHeadersToDeclarativeNetRequestHeaders(body.responseHeaders ?? {}, 'set'),
            ],
          },
@@ -123,6 +113,5 @@ export const removeDynamicRules = async (ruleIds: number[]) => {
  await (chrome || browser).declarativeNetRequest.updateDynamicRules({
    removeRuleIds: ruleIds,
  });
-  if ((chrome || browser).runtime.lastError?.message)
-    throw new Error((chrome || browser).runtime.lastError?.message ?? 'Unknown error');
+  if ((chrome || browser).runtime.lastError?.message) throw new Error((chrome || browser).runtime.lastError.message);
 };
--- a/src/utils/extension.ts
+++ b/src/utils/extension.ts
@@ -1,11 +1,3 @@
 export const isChrome = () => {
  return chrome.runtime.getURL('').startsWith('chrome-extension://');
 };
-
-export const isFirefox = () => {
-  try {
-    return browser.runtime.getURL('').startsWith('moz-extension://');
-  } catch {
-    return false;
-  }
-};
--- a/src/utils/injection.ts
+++ b/src/utils/injection.ts
@@ -0,0 +1,20 @@
+// raw urls don't work with eslint, so its a false positive
+// eslint-disable-next-line import/no-unresolved
+import contentScriptUrl from 'url:~contents/movie-web';
+
+import { queryCurrentTab } from '~utils/tabs';
+
+export function injectScript() {
+  queryCurrentTab((tab) => {
+    if (!tab.id) return;
+    chrome.scripting
+      .executeScript({
+        target: {
+          tabId: tab.id,
+        },
+        world: 'MAIN',
+        files: [contentScriptUrl],
+      })
+      .catch(() => {});
+  });
+}
--- a/src/utils/storage.ts
+++ b/src/utils/storage.ts
@@ -3,18 +3,11 @@ import { useStorage } from '@plasmohq/storage/hook';

 import { makeUrlIntoDomain } from '~utils/domains';

-export const DEFAULT_DOMAIN_WHITELIST = [
-  'mw.lonelil.ru',
-  'watch.qtchaos.de',
-  'bmov.vercel.app',
-  'stream.thehairy.me',
-  'scootydooter.vercel.app',
-  'movie-web-me.vercel.app',
-];
+export const DEFAULT_DOMAIN_WHITELIST = [];

 export const storage = new Storage();

-const getDomainWhiteList = async () => {
+export const getDomainWhiteList = async () => {
  const whitelist = await storage.get<string[]>('domainWhitelist');
  if (!whitelist) await storage.set('domainWhitelist', DEFAULT_DOMAIN_WHITELIST);
  return whitelist ?? DEFAULT_DOMAIN_WHITELIST;
@@ -22,7 +15,7 @@ const getDomainWhiteList = async () => {

 const domainIsInWhitelist = async (domain: string) => {
  const whitelist = await getDomainWhiteList();
-  return whitelist?.some((d) => d.includes(domain)) ?? false;
+  return whitelist?.some((d) => d === domain) ?? false;
 };

 export function useDomainStorage() {
@@ -38,9 +31,5 @@ export const isDomainWhitelisted = async (url: string | undefined) => {

 export const assertDomainWhitelist = async (url: string) => {
  const isWhiteListed = await isDomainWhitelisted(url);
-  const currentDomain = makeUrlIntoDomain(url);
-  if (!isWhiteListed)
-    throw new Error(
-      `${currentDomain} is not whitelisted. Open the extension and click on the power button to whitelist the site.`,
-    );
+  if (!isWhiteListed) throw new Error('Domain is not whitelisted');
 };
--- a/src/utils/tabs.ts
+++ b/src/utils/tabs.ts
@@ -1,14 +1,17 @@
 import { isChrome } from './extension';

-export function queryCurrentDomain(cb: (domain: string | null) => void) {
-  const handle = (tabUrl: string | undefined) => {
-    if (!tabUrl) cb(null);
-    else cb(tabUrl);
+export function queryCurrentTab(cb: (tab: chrome.tabs.Tab | browser.tabs.Tab) => void) {
+  const handle = (tab: chrome.tabs.Tab | browser.tabs.Tab) => {
+    cb(tab);
  };
  const ops = { active: true, currentWindow: true } as const;

-  if (isChrome()) chrome.tabs.query(ops).then((tabs) => handle(tabs[0]?.url));
-  else browser.tabs.query(ops).then((tabs) => handle(tabs[0]?.url));
+  if (isChrome()) chrome.tabs.query(ops).then((tabs) => handle(tabs[0]));
+  else browser.tabs.query(ops).then((tabs) => handle(tabs[0]));
+}
+
+export function queryCurrentDomain(cb: (domain: string | null) => void) {
+  queryCurrentTab((tab) => cb(tab.url ?? null));
 }

 export function listenToTabChanges(cb: () => void) {
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,13 +1,18 @@
 {
  "extends": "plasmo/templates/tsconfig.base",
-  "exclude": ["node_modules"],
-  "include": [".plasmo/index.d.ts", "./**/*.ts", "./**/*.tsx"],
-
+  "exclude": [
+    "node_modules"
+  ],
+  "include": [
+    ".plasmo/index.d.ts",
+    "./**/*.ts",
+    "./**/*.tsx"
+  ],
  "compilerOptions": {
-    "jsx": "react-jsx",
-    "strict": true,
    "paths": {
-      "~*": ["./src/*"]
+      "~*": [
+        "./src/*"
+      ]
    },
    "baseUrl": "."
  }
Author	SHA1	Message	Date
mrjvs	75e8ca945b	fix import	2024-02-01 22:02:41 +01:00
mrjvs	1a5d8c184b	Update plasmo + rework permissions + explain permissions in readme + lots of suffering	2024-02-01 21:24:57 +01:00