fix: Make extension using Manifest V3 compatible with Firefox (#1388)

* updated README

* changed Manifest.json to scripts

* split manifest.json into manifest_chrome.json and manifest_firefox.json

* updated build script

* updated regular build scripts

* fixed CI build

* updated zip scripts

* updated .gitignore

* updated scripts

* updated docs

* updated CI

* revert extension-base's README.md

.github/workflows/push-master.yml

@@ -24,7 +24,7 @@ jobs:
         CC_TEST_REPORTER_ID: ${{ secrets.CC_TEST_REPORTER_ID }}
         GH_PAT: ${{ secrets.GH_PAT_BOT }}
         GH_RELEASE_GITHUB_API_TOKEN: ${{ secrets.GH_PAT_BOT }}
-        GH_RELEASE_FILES: master-build.zip,master-src.zip
+        GH_RELEASE_FILES: master-ff-build.zip,master-ff-src.zip,master-chrome-build.zip,master-chrome-src.zip
         NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
       run: |
         corepack enable

.gitignore

@@ -16,8 +16,10 @@ NOTES.md
 .pnp.*
 cc-test-reporter
 lerna-debug.log*
-master-build.zip
-master-src.zip
+master-chrome-build.zip
+master-chrome-src.zip
+master-ff-build.zip
+master-ff-src.zip
 npm-debug.log*
 tsconfig.*buildinfo
 yarn-debug.log*

README.md

@@ -16,23 +16,23 @@ Find out more about how to use the extension as a Dapp developper, cookbook, as
 
 ## Firefox installation from source instructions.
 
-1. Uncompress `master-src.zip`
+1. Uncompress `master-ff-src.zip`
 2. Run `corepack enable` [More information](https://github.com/nodejs/corepack?tab=readme-ov-file#corepack-enable--name)
 2. Install dependencies via `yarn install`
 3. Build all packages via `yarn build`
-  - The `/packages/extension/build` directory will contain the exact code used in the add-on, and should exactly match the uncompressed `master-build`.
+  - The `/packages/extension/build` directory will contain the exact code used in the add-on, and should exactly match the uncompressed `master-ff-build`.
 
-NOTE: If you would like to regenerate the compressed `master-build.zip`, and `master-src.zip` files run: `yarn build:zip`
+NOTE: If you would like to regenerate the compressed `master-ff-build.zip`, and `master-ff-src.zip` files run: `yarn build:zip:ff`
 
-## Ensuring `master-build` and `master-src` dont have any diffs (For maintainers)
+## Ensuring `master-<TARGET-BROWSER>-build` and `master-<TARGET_BROWSER>-src` dont have any diffs (For maintainers)
 
 Summary: These are the steps to ensure the following builds don't have any diffs so that the firefox review goes smoothly.
 
-1. Run `yarn build`
-2. Run `yarn build:zip` - This will generate a `master-build.zip`, and `master-src.zip`.
-3. Move `master-src.zip`, and `master-build.zip` to its own enviornment/folder.
-4. Uncompress `master-src.zip` to `master-zrc` and inside of `master-src` run `yarn && yarn build`.
-5. Uncompress `master-build.zip` to `master-build`.
+1. Run `yarn build:ff` or `yarn build:chrome`, depending on your target browser.
+2. Run `yarn build:zip:ff` or `yarn build:zip:chrome` - This will generate a `master-<TARGET_BROWSER>-build.zip`, and `master-<TARGET_BROWSER>-src.zip`.
+3. Move `master-<TARGET_BROWSER>-src.zip`, and `master-<TARGET_BROWSER>-build.zip` to its own enviornment/folder.
+4. Uncompress `master-<TARGET_BROWSER>-src.zip` to `master-src` and inside of `master-src` run `yarn && yarn build:<ff|chrome>`, depending on your target browser.
+5. Uncompress `master-<TARGET_BROWSER>-build.zip` to `master-build`.
 6. Now we can compare the two builds using `diff`, and `comm`
   - Run `diff -qr <path-to-master-build>/master-build <path-to-master-src>/packages/extension/build | sort`
 7. To sanity check important files (`background.js`, and `extension.js`) you can also run: 
@@ -43,19 +43,22 @@ Summary: These are the steps to ensure the following builds don't have any diffs
 
 Steps to build the extension and view your changes in a browser:
 
-1. Build via `yarn build`
-  - NOTE: You may need to enable corepack by running `corepack enable`
-2. Install the extension
-  - Chrome:
-    - go to `chrome://extensions/`
-    - ensure you have the Development flag set
-    - "Load unpacked" and point to `packages/extension/build`
-    - if developing, after making changes - refresh the extension
-  - Firefox:
-    - go to `about:debugging#addons`
-    - check "Enable add-on debugging"
-    - click on "Load Temporary Add-on" and point to `packages/extension/build/manifest.json`
-    - if developing, after making changes - reload the extension
+1. Chrome:
+    1. Build via `yarn build:chrome`
+      - NOTE: You may need to enable corepack by running `corepack enable`
+    2. Install the extension
+      - go to `chrome://extensions/`
+      - ensure you have the Development flag set
+      - "Load unpacked" and point to `packages/extension/build`
+      - if developing, after making changes - refresh the extension
+2. Firefox
+    1. Build via `yarn build:ff`
+      - NOTE: You may need to enable corepack by running `corepack enable`
+    2. Install the extension
+      - go to `about:debugging#addons`
+      - check "Enable add-on debugging"
+      - click on "Load Temporary Add-on" and point to `packages/extension/build/manifest.json`
+      - if developing, after making changes - reload the extension
 3. When visiting `https://polkadot.js.org/apps/` it will inject the extension
 
 Once added, you can create an account (via a generated seed) or import via an existing seed. The [apps UI](https://github.com/polkadot-js/apps/), when loaded, will show these accounts as `<account name> (extension)`
@@ -69,6 +72,8 @@ The repo is split into a number of packages -
 - [extension-dapp](packages/extension-dapp/) - A convenience wrapper to work with the injected objects, simplifying data extraction for any dapp that wishes to integrate the extension (or any extension that supports the interface)
 - [extension-inject](packages/extension-inject/) - A convenience wrapper that allows extension developers to inject their extension for use by any dapp
 
+It also contains a [`manifest_chrome.json`](packages/extension/manifest_chrome.json) file which contains the manifest configuration for Chrome and another [`manifest_firefox.json`](packages/extension/manifest_firefox.json) with the configuration for Firefox, for compatibility reasons, and a dummy `manifest.json` file that's only used by the build.
+
 ## Dapp developers
 
 The actual in-depth technical breakdown is given in the next section for any dapp developer wishing to work with the raw objects injected into the window. However, convenience wrappers are provided that allows for any dapp to use this extension (or any other extension that conforms to the interface) without having to manage any additional info.

package.json

@@ -23,14 +23,20 @@
     "packages/*"
   ],
   "scripts": {
-    "build": "polkadot-dev-build-ts && yarn build:zip && yarn build:rollup",
+    "build": "yarn build:chrome && yarn build:ff",
     "build:before": "yarn build:i18n",
+    "build:chrome": "cp ./packages/extension/manifest_chrome.json ./packages/extension/manifest.json && polkadot-dev-build-ts && yarn build:zip:chrome && yarn build:rollup",
+    "build:ff": "cp ./packages/extension/manifest_firefox.json ./packages/extension/manifest.json && polkadot-dev-build-ts && yarn build:zip:ff && yarn build:rollup",
     "build:i18n": "i18next-scanner --config i18next-scanner.config.cjs",
     "build:release": "polkadot-ci-ghact-build",
     "build:rollup": "polkadot-exec-rollup --config",
-    "build:zip": "yarn build:zip:dst && yarn build:zip:src",
-    "build:zip:dst": "rm -rf ./master-build.zip && cd packages/extension/build && zip -r -FS ../../../master-build.zip .",
-    "build:zip:src": "rm -rf ./master-src.zip && zip -r -x '*build/*' -x '*node_modules*' -FS ./master-src.zip packages .editorconfig eslint.config.js rollup.config.js CHANGELOG.md CONTRIBUTING.md i18next-scanner.config.cjs LICENSE package.json README.md tsconfig.json yarn.lock .yarnrc.yml tsconfig.base.json tsconfig.build.json tsconfig.eslint.json tsconfig.webpack.json",
+    "build:zip": "yarn build:zip:chrome && yarn build:zip:ff",
+    "build:zip:chrome": "cp ./packages/extension/manifest_chrome.json ./packages/extension/manifest.json && yarn build:zip:dst:chrome && yarn build:zip:src:chrome",
+    "build:zip:dst:chrome": "rm -rf ./master-chrome-build.zip && cd packages/extension/build && zip -r -FS ../../../master-chrome-build.zip .",
+    "build:zip:dst:ff": "rm -rf ./master-ff-build.zip && cd packages/extension/build && zip -r -FS ../../../master-ff-build.zip .",
+    "build:zip:ff": "cp ./packages/extension/manifest_firefox.json ./packages/extension/manifest.json && yarn build:zip:dst:ff && yarn build:zip:src:ff",
+    "build:zip:src:chrome": "rm -rf ./master-chrome-src.zip && zip -r -x '*build/*' -x '*node_modules*' -FS ./master-chrome-src.zip packages .editorconfig eslint.config.js rollup.config.js CHANGELOG.md CONTRIBUTING.md i18next-scanner.config.cjs LICENSE package.json README.md tsconfig.json yarn.lock .yarnrc.yml tsconfig.base.json tsconfig.build.json tsconfig.eslint.json tsconfig.webpack.json",
+    "build:zip:src:ff": "rm -rf ./master-ff-src.zip && zip -r -x '*build/*' -x '*node_modules*' -FS ./master-ff-src.zip packages .editorconfig eslint.config.js rollup.config.js CHANGELOG.md CONTRIBUTING.md i18next-scanner.config.cjs LICENSE package.json README.md tsconfig.json yarn.lock .yarnrc.yml tsconfig.base.json tsconfig.build.json tsconfig.eslint.json tsconfig.webpack.json",
     "clean": "polkadot-dev-clean-build",
     "lint": "polkadot-dev-run-lint",
     "postinstall": "polkadot-dev-yarn-only",

packages/extension-base/README.md

@@ -7,4 +7,6 @@ Functions, classes and other utilities used in `@polkadot/extension`. These incl
 
 They are primarily meant to be used in `@polkadot/extension`, and can be broken without any notice to cater for `@polkadot/extension`'s needs.
 
-They are exported here if you wish to use part of them in the development of your own extension. Don't forget to add `process.env.EXTENSION_PREFIX` to separate ports and stores from the current extension's ones.
+They are exported here if you wish to use part of them in the development of your 
+own extension. Don't forget to add `process.env.EXTENSION_PREFIX` to separate 
+ports and stores from the current extension's ones.

packages/extension/manifest.json

@@ -7,7 +7,7 @@
   "manifest_version": 3,
   "permissions": ["storage", "tabs", "alarms"],
   "background": {
-    "service_worker": "background.js",
+    "scripts": ["background.js"],
     "type": "module"
   },
   "action": {

packages/extension/manifest_chrome.json

@@ -0,0 +1,42 @@
+{
+  "author": "polkadot.{js}",
+  "description": "Manage your Polkadot accounts outside of dapps. Injects the accounts and allows signing transactions for a specific account.",
+  "homepage_url": "https://github.com/polkadot-js/extension",
+  "name": "polkadot{.js} extension",
+  "short_name": "polkadot{.js}",
+  "manifest_version": 3,
+  "permissions": ["storage", "tabs", "alarms"],
+  "background": {
+    "service_worker": "background.js",
+    "type": "module"
+  },
+  "action": {
+    "default_title": "polkadot{.js}",
+    "default_popup": "index.html"
+  },
+  "content_scripts": [{
+    "js": ["content.js"],
+    "matches": ["http://*/*", "https://*/*"],
+    "run_at": "document_start"
+  }],
+  "icons": {
+    "16": "images/icon-16.png",
+    "32": "images/icon-32.png",
+    "48": "images/icon-48.png",
+    "64": "images/icon-64.png",
+    "128": "images/icon-128.png"
+  },
+  "web_accessible_resources": [
+    {
+      "resources": [
+        "page.js"
+      ],
+      "matches": [
+        "*://*/*"
+      ]
+    }
+  ],
+  "content_security_policy": {
+    "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'"
+  }
+}

packages/extension/manifest_firefox.json

@@ -0,0 +1,42 @@
+{
+  "author": "polkadot.{js}",
+  "description": "Manage your Polkadot accounts outside of dapps. Injects the accounts and allows signing transactions for a specific account.",
+  "homepage_url": "https://github.com/polkadot-js/extension",
+  "name": "polkadot{.js} extension",
+  "short_name": "polkadot{.js}",
+  "manifest_version": 3,
+  "permissions": ["storage", "tabs", "alarms"],
+  "background": {
+    "scripts": ["background.js"],
+    "type": "module"
+  },
+  "action": {
+    "default_title": "polkadot{.js}",
+    "default_popup": "index.html"
+  },
+  "content_scripts": [{
+    "js": ["content.js"],
+    "matches": ["http://*/*", "https://*/*"],
+    "run_at": "document_start"
+  }],
+  "icons": {
+    "16": "images/icon-16.png",
+    "32": "images/icon-32.png",
+    "48": "images/icon-48.png",
+    "64": "images/icon-64.png",
+    "128": "images/icon-128.png"
+  },
+  "web_accessible_resources": [
+    {
+      "resources": [
+        "page.js"
+      ],
+      "matches": [
+        "*://*/*"
+      ]
+    }
+  ],
+  "content_security_policy": {
+    "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'"
+  }
+}