Transition from manifest v2 to v3

[TarikGul]

closes: https://github.com/polkadot-js/extension/issues/1316 closes: https://github.com/polkadot-js/extension/issues/310

Summary (BREAKING CHANGES)

The following PR gives support for manifest V3. Below will help document the exact changes that have taken place in this PR and how it affects the interface given to users.

@polkadot/extension-base

The following covers exported items from @polkadot/extension-base.

class Extension

• Extension.accountsForget: This is now asynchronous, and has a return type of Promise<boolean> instead of boolean.
• Extension.authorizeUpdate: This is now asynchronous, and has a return type of Promise<void> instead of void.
• Extension.metadataApprove: This is now asynchronous, and has a return type of Promise<boolean> instead of boolean.
• Extension.removeAuthorization: This is now asynchronous, and has a return type of Promise<ResponseAuthorizeList> instead of ResponseAuthorizeList.

class State

• Initializing new State(providers) has now changed. This is because extractMetadata within the constructor has to be asynchronous now. So we instead have the logic from the constructor and placed it within a init function to initialize state. Example below:

// Old
const state = new State(providers);

// New
const state = new State(providers);
await state.init();

• State.saveCurrentAuthList: This is now asynchronous, and has a return type of Promise<void> instead of void.
• State.saveDefaultAuthAccounts: This is now asynchronous, and has a return type of Promise<void> instead of void.
• State.updateDefaultAuthAccounts: This is now asynchronous, and has a return type of Promise<void> instead of void.
• State.removeAuthorization: This is now asynchronous, and has a return type of Promise<AuthUrls> instead of AuthUrls.
• State.updateAuthorizedAccounts: This is now asynchronous, and has a return type of Promise<void> instead of void.
• State.saveMetadata: This is now asynchronous, and has a return type of Promise<void> instead of void.

Checklist

• [X] Update the manifest
  • [X] Change the manifest version from 2 to 3
  • [X] Update Host Permissions
  • [X] Update web_accessible_resources
• [x] Migrate to service worker
  • [x] Update the "background" field in the manifest
  • [x] Move DOM and window calls to an offscreen document
    • This one is a bit annoying since it requires us to use the offscreen API which requires the offscreen permission. See update_permissions, and keep-features for more info. I believe this is actually not necessary given the specific constraints.
  • [x] Convert localStorage to chrome.storage.local
  • [x] Register listeners synchronously
    • We don't have any synchronous listeners that use any browser actions so I think this is okay to check off.
  • [x] Replace calls to XMLHttpRequest() with global fetch().
    • We don't use XMLHttpRequest
  • [x] Persist states
  • [x] Convert timers to alarms
    • There are a few places where we use setTimeout, not sure if that is applicable here and we need to switch it to await chrome.alarms.create
  • [x] Keep the service worker alive (in exceptional cases)
• [x] Update API calls
  • [x] Replace tabs.executeScript() with scripting.executeScript().
    • We don't use tabs.executeScript()
  • [x] Replace tabs.insertCSS() and tabs.removeCSS() with scripting.insertCSS() and scripting.removeCSS().
    • We don't use tabs.insertCSS() or tabs.removeCSS()
  • [x] Replace Browser Actions and Page Actions with Actions
  • [x] Replace functions that expect a Manifest V2 background context.
    • We don't use calls that expect a background context.
  • [x] Replace callbacks with promises
  • [x] Replace unsupported APIs
• [x] Replace web request listeners
  • [x] Update permissions
  • [x] Create declarative net request rules
  • We don't use declarative net requests After completing the items above, you may want to review a few common use cases:
  • [x] Block a single URL
  • [x] Redirect-multiple-urls
  • [x] Block cookies
• [x] Improve extension security
  • [x] Remove execution of arbitrary strings.
  • [x] Remove remotely hosted code
  • [x] Update content security policy.
  • [x] Remove unsupported content security policy values

[TarikGul]

So far the extension is working fine in chrome with the exception of the following errors:

Error: Invalid url chrome://extensions/?errors=fnpncejekijbiiemffncneiiilejbmbj, expected to start with http: or https: or ipfs: or ipns:

[TarikGul]

Instead of causing breaking changes to extension-base by enforcing async at the top level of State, I am going to just use the callback method for storage.local

Edit: Ahh but this might not work since there is no more persistent background.

[Tbaut]

edit: There was a stray change in the current state to avoid a TypeError: chrome.extension.getURL is not a function in packages/extension-base/src/background/handlers/State.ts

- const NOTIFICATION_URL = chrome.extension.getURL('notification.html');
+ const NOTIFICATION_URL = chrome.runtime.getURL('notification.html');

I had a quick look on Firefox, changing the manifest to make it happy with what I found here which I'm sure you know

  "background": {
    "scripts": ["background.js"]
  },

edit2: In Firefox the extension is then loaded correctly, I could add an account, but no script is injected on pages, so Dapps don't detect the extensions.

On chrome/brave, the next error I encountered in background.js was

ReferenceError: localStorage is not defined

[TarikGul]

@Tbaut Yea the I was able to fix the localStorage error but then reverted my changes because I would like to change the design of the implementation, but yea the localStorage issue will be fixed soon :)

[adamdossa]

Is it expected that this PR will be merged in the near future? We have a downstream dependency for our Polymesh Wallet which requires this in order to move to manifest V3. @Tbaut

[TarikGul]

Is it expected that this PR will be merged in the near future? We have a downstream dependency for our Polymesh Wallet which requires this in order to move to manifest V3. @Tbaut

Yes this is absolutely a priority! My goal is to get it done this week.

[Tbaut]

Hello there, I tried this branch and documented my tests:

• loaded extension with manifest v2 (master v0.48.2) imported Bob and Dave
• did a tx with Bob
• exported Bob
• removed Bob
• checked out tg-manifest-v3, did yarn && yarn build refresh the extension in chrome BTW just to be 100% sure this is indeed loading the extension I wantwith v3, I bumped the version in packages/extension/package.json before building, and made sure the new version is displayed in chrome.
• all my accounts are here as expected (just Dave)
• I tested successfully:
  • import an account with mnemonic and derivation
  • import an account with JSON
  • export a batch of accounts
  • import a batch of accounts
  • forget an account
  • sign a TX
  • update the metadata
  • imported an account with Polkadot Vault
  • signed a tx with Polkadot Vault
  • forget an account with Polkadot Vault

Note that this includes connecting to some websites, and changing the connected accounts.

Somewhat unexpected for normal users

• on a website where I had already allowed Bob with v2, I had to authenticate again, as if I had a totally new extension. I don't think it's so much of an issue.

In summary, it's looking amazing :clap: