Prototype manifest v3 extension

extension/src/popup/popup.tsx

@@ -2,22 +2,27 @@ import React from 'react'
 import { createRoot } from 'react-dom/client'
 import { Provider } from 'react-redux'
 import { HelmetProvider } from 'react-helmet-async'
-import { Store } from 'webext-redux'
+import { configureAppStore } from 'store/configureStore'
 import { createHashRouter, RouterProvider } from 'react-router-dom'
 
 import { ThemeProvider } from 'styles/theme/ThemeProvider'
+import browser from 'webextension-polyfill'
 
 import 'locales/i18n'
 import 'sanitize.css/sanitize.css'
 import 'styles/main.css'
 import { routes } from './routes'
 
-const container = document.getElementById('root') as HTMLElement
-const root = createRoot(container!)
-const store = new Store()
-const router = createHashRouter(routes)
-
-store.ready().then(() => {
+// Open as a single popup:
+// - single: so no need to sync between tabs
+if (browser.extension.getViews({ type: 'tab' }).length > 0) {
+  console.log('This is a tab. Close.')
+  window.close()
+} else {
+  const container = document.getElementById('root') as HTMLElement
+  const root = createRoot(container!)
+  const store = configureAppStore()
+  const router = createHashRouter(routes)
   root.render(
     <Provider store={store}>
       <ThemeProvider>
@@ -29,6 +34,4 @@ store.ready().then(() => {
       </ThemeProvider>
     </Provider>,
   )
-})
-
-console.log('popup')
+}

internals/getSecurityHeaders.js

@@ -34,9 +34,10 @@ const getCsp = ({ isExtension, isDev }) =>
     default-src 'none';
     script-src
       'self'
-      ${isDev ? reactErrorOverlay : ''}
-      ${isDev ? hmrScripts : ''}
-      'report-sample';
+      ${!isExtension && isDev ? reactErrorOverlay : '' /* Manifest v3 doesn't allow anything */}
+      ${!isExtension && isDev ? hmrScripts : ''}
+      ${!isExtension ? 'report-sample' : ''}
+      ;
     style-src
       'self'
       'unsafe-inline'

package.json

@@ -97,7 +97,7 @@
     "typed-redux-saga": "1.5.0",
     "valid-url": "1.0.9",
     "webext-redux": "2.1.9",
-    "webextension-polyfill": "0.10.0"
+    "webextension-polyfill": "0.12.0"
   },
   "devDependencies": {
     "@capacitor/cli": "6.0.0",
@@ -123,7 +123,7 @@
     "@types/testing-library__jest-dom": "5.14.9",
     "@types/valid-url": "1.0.7",
     "@types/w3c-web-usb": "1.0.10",
-    "@types/webextension-polyfill": "0.10.7",
+    "@types/webextension-polyfill": "0.12.1",
     "@typescript-eslint/eslint-plugin": "6.9.1",
     "@typescript-eslint/parser": "6.9.1",
     "babel-plugin-istanbul": "6.1.1",

public/manifest.json

@@ -3,7 +3,7 @@
   "name": "__MSG_appName__",
   "short_name": "__MSG_appName__",
   "description": "__MSG_appDescription__",
-  "manifest_version": 2,
+  "manifest_version": 3,
   "version": "2.0.0",
   "default_locale": "en",
   "icons": {
@@ -15,7 +15,7 @@
     "128": "./Icon Blue 512.png",
     "512": "./Icon Blue 512.png"
   },
-  "browser_action": {
+  "action": {
     "default_icon": {
       "16": "./Icon Blue 512.png",
       "19": "./Icon Blue 512.png",
@@ -28,12 +28,9 @@
     "default_title": "ROSE Wallet",
     "default_popup": "../extension/src/popup.html"
   },
-  "permissions": ["storage", "notifications", "activeTab"],
-  "content_security_policy": "{{{ EXTENSION_CSP }}}",
-  "background": {
-    "page": "../extension/src/background.html",
-    "persistent": true
+  "permissions": ["storage", "notifications"],
+  "content_security_policy": {
+    "extension_pages": "{{{ EXTENSION_CSP }}}"
   },
-  "web_accessible_resources": ["./oasis-xu-frame.html"],
   "externally_connectable": { "ids": [] }
 }

src/app/components/Persist/ChoosePasswordFields.tsx

@@ -9,6 +9,7 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { ChoosePasswordInputFields } from './ChoosePasswordInputFields'
+import { runtimeIs } from 'config'
 
 export function ChoosePasswordFields() {
   const { t } = useTranslation()
@@ -17,6 +18,8 @@ export function ChoosePasswordFields() {
   const hasUnpersistedAccounts = unlockedStatus === 'openUnpersisted'
   const [startPersisting, setStartPersisting] = useState(!hasUnpersistedAccounts)
 
+  const isExtension = runtimeIs === 'extension'
+
   const isChoiceDisabled =
     isPersistenceUnsupported ||
     unlockedStatus === 'unlockedProfile' ||
@@ -41,6 +44,12 @@ export function ChoosePasswordFields() {
                 disabled: true,
                 checked: unlockedStatus === 'unlockedProfile',
               }
+            : isExtension
+            ? {
+                disabled: true,
+                // Force creating a profile in Manifest v3 extension because we can't keep state in memory
+                checked: true,
+              }
             : {
                 checked: startPersisting,
               })}

src/app/pages/OpenWalletPage/webextension.tsx

@@ -12,6 +12,7 @@ export function FromLedgerWebExtension() {
       webExtensionUSBLedgerAccess={() => {
         navigate('/open-wallet/ledger/usb')
         openLedgerAccessPopup(href)
+        // check if ledger popup works
       }}
     />
   )

src/app/state/persist/encryption.ts

@@ -47,6 +47,14 @@ export async function decryptWithPassword<T>(
 ): Promise<T> {
   const encryptedObj = fromBase64andParse<EncryptedObject>(encryptedString)
   const derivedKeyWithSalt = await deriveKeyFromPassword(password, encryptedObj.salt)
+  return await decryptWithKey(derivedKeyWithSalt, encryptedString)
+}
+
+export async function decryptWithKey<T>(
+  derivedKeyWithSalt: KeyWithSalt,
+  encryptedString: EncryptedString<T>,
+): Promise<T> {
+  const encryptedObj = fromBase64andParse<EncryptedObject>(encryptedString)
   const dataBytes = nacl.secretbox.open(encryptedObj.secretbox, encryptedObj.nonce, derivedKeyWithSalt.key)
   if (!dataBytes) throw new PasswordWrongError()
 

src/app/state/persist/saga.ts

@@ -4,18 +4,26 @@ import { isActionSynced } from 'redux-state-sync'
 import { persistActions, STORAGE_FIELD } from './index'
 import {
   base64andStringify,
+  decryptWithKey,
   decryptWithPassword,
   deriveKeyFromPassword,
   encryptWithKey,
   fromBase64andParse,
 } from './encryption'
 import { RootState } from 'types'
-import { EncryptedString, KeyWithSalt, PersistedRootState, SetUnlockedRootStatePayload } from './types'
+import {
+  EncryptedString,
+  KeyWithSalt,
+  PersistState,
+  PersistedRootState,
+  SetUnlockedRootStatePayload,
+} from './types'
 import { PasswordWrongError } from 'types/errors'
 import { walletActions } from 'app/state/wallet'
 import { selectUnlockedStatus } from 'app/state/selectUnlockedStatus'
 import { runtimeIs } from 'config'
 import { backupAndDeleteV0ExtProfile, readStorageV0 } from '../../../utils/walletExtensionV0'
+import { selectStringifiedEncryptionKey } from './selectors'
 
 function* watchPersistAsync() {
   yield* fork(function* () {
@@ -211,8 +219,55 @@ function* encryptAndPersistState(action: AnyAction) {
   window.localStorage.setItem(STORAGE_FIELD, encryptedState)
 }
 
+function* retainEncryptionKeyBetweenPopupReopenings() {
+  if (runtimeIs !== 'extension') return
+  yield* fork(function* () {
+    const channelQueue = yield* actionChannel<AnyAction>('*')
+    let previousStringifiedEncryptionKey: PersistState['stringifiedEncryptionKey'] = undefined
+    while (true) {
+      yield* take(channelQueue)
+      const stringifiedEncryptionKey = yield* select(selectStringifiedEncryptionKey)
+      if (stringifiedEncryptionKey !== previousStringifiedEncryptionKey) {
+        previousStringifiedEncryptionKey = stringifiedEncryptionKey
+        yield* call(writeSharedExtMemory, stringifiedEncryptionKey)
+      }
+    }
+  })
+
+  yield* fork(function* () {
+    const encryptedState = window.localStorage.getItem(
+      STORAGE_FIELD,
+    ) as EncryptedString<PersistedRootState> | null
+    if (!encryptedState) return // Ignore
+    try {
+      const stringifiedEncryptionKey = yield* call(readSharedExtMemory)
+      if (!stringifiedEncryptionKey) return // Ignore
+      if (stringifiedEncryptionKey === 'skipped') return // Ignore
+      const keyWithSalt: KeyWithSalt = fromBase64andParse(stringifiedEncryptionKey)
+      const persistedRootState = yield* call(decryptWithKey<PersistedRootState>, keyWithSalt, encryptedState)
+      yield* put(persistActions.setUnlockedRootState({ persistedRootState, stringifiedEncryptionKey }))
+    } catch (error) {
+      // Ignore
+    }
+  })
+}
+
+async function writeSharedExtMemory(stringifiedEncryptionKey: PersistState['stringifiedEncryptionKey']) {
+  if (runtimeIs !== 'extension') return
+  const browser = await import('webextension-polyfill')
+  await browser.storage.session.set({ stringifiedEncryptionKey })
+}
+
+async function readSharedExtMemory() {
+  if (runtimeIs !== 'extension') return
+  const browser = await import('webextension-polyfill')
+  const storage = await browser.storage.session.get('stringifiedEncryptionKey')
+  return storage.stringifiedEncryptionKey as PersistState['stringifiedEncryptionKey']
+}
+
 export function* persistSaga() {
   yield* watchPersistAsync()
+  yield* retainEncryptionKeyBetweenPopupReopenings()
   const storageV0 = yield* call(readStorageV0)
   yield* put(persistActions.setHasV0StorageToMigrate(!!storageV0?.chromeStorageLocal.keyringData))
 }

src/app/state/persist/selectors.ts

@@ -20,3 +20,8 @@ export const selectIsPersistenceUnsupported = createSelector(
   [selectSlice],
   state => state.isPersistenceUnsupported,
 )
+
+export const selectStringifiedEncryptionKey = createSelector(
+  [selectSlice],
+  state => state.stringifiedEncryptionKey,
+)

yarn.lock

@@ -3194,10 +3194,10 @@
   resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz#f066abfcd1cbe66267cdbbf0de010d8a41b41597"
   integrity sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==
 
-"@types/webextension-polyfill@0.10.7":
-  version "0.10.7"
-  resolved "https://registry.yarnpkg.com/@types/webextension-polyfill/-/webextension-polyfill-0.10.7.tgz#de059250599733a60ed26c8a0c81e21e11183b90"
-  integrity sha512-10ql7A0qzBmFB+F+qAke/nP1PIonS0TXZAOMVOxEUsm+lGSW6uwVcISFNa0I4Oyj0884TZVWGGMIWeXOVSNFHw==
+"@types/webextension-polyfill@0.12.1":
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/@types/webextension-polyfill/-/webextension-polyfill-0.12.1.tgz#8dae244fe094cbb541005362e8e22f16671f6054"
+  integrity sha512-xPTFWwQ8BxPevPF2IKsf4hpZNss4LxaOLZXypQH4E63BDLmcwX/RMGdI4tB4VO4Nb6xDBH3F/p4gz4wvof1o9w==
 
 "@types/yargs-parser@*":
   version "20.2.0"
@@ -9954,10 +9954,10 @@ [email protected]:
     lodash.assignin "^4.2.0"
     lodash.clonedeep "^4.5.0"
 
-webextension-polyfill@0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/webextension-polyfill/-/webextension-polyfill-0.10.0.tgz#ccb28101c910ba8cf955f7e6a263e662d744dbb8"
-  integrity sha512-c5s35LgVa5tFaHhrZDnr3FpQpjj1BB+RXhLTYUxGqBVN460HkbM8TBtEqdXWbpTKfzwCcjAZVF7zXCYSKtcp9g==
+webextension-polyfill@0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/webextension-polyfill/-/webextension-polyfill-0.12.0.tgz#f62c57d2cd42524e9fbdcee494c034cae34a3d69"
+  integrity sha512-97TBmpoWJEE+3nFBQ4VocyCdLKfw54rFaJ6EVQYLBCXqCIpLSZkwGgASpv4oPt9gdKCJ80RJlcmNzNn008Ag6Q==
 
 webidl-conversions@^7.0.0:
   version "7.0.0"