Passport Browser Extension

Browser Extension for managing identities and logging in to Fabric applications.

Features

Additional extension features and configurations can be accessed in the settings page on the top-right corner of the first home-page

• Wallet password, also used to encrypt data before being stored
• Import/Export seed phrases
• Enable/Disable Chains for each identity
• Create additional identities

Quick Start

1. npm i
2. npm run build (one-off compile) or npm start (webpack dev server for iteration)
3. Open chrome://extensions/ in Chromium
4. Enable Developer mode, click Load unpacked, and select this repo’s assets/ directory (webpack output)
5. The extension should appear in the toolbar; pin it if you want quick access.

Local Extension Test Harness

Use a minimal local server (backed by @fabric/http) that serves the compiled assets/ tree (same files you load as unpacked in Chromium):

1. In one terminal, start the harness (runs npm run build, then the server):
   • npm run serve:test
2. In Chromium, load unpacked extension from assets/ (see Quick Start).
3. Popup UI in a normal tab (no chrome-extension:// URL): open http://127.0.0.1:3003/popup.html (or set PORT — e.g. PORT=3044 matches playwright.config.ts / npm run test:ui). IdentityManager falls back when chrome.storage is missing so you can click through the UI; persistence only works inside the real extension popup.
4. Content script harness: open http://127.0.0.1:3003/test.html on the same port as step 3.
5. Validate on test.html:
   • window.fabricExtension
   • window.fabricExtension.chrome.runtime.sendMessage({ type: 'FABRIC_ACTION' }, console.log) → response includes success: true and source: 'local-test-server'.

New Wallet Creation User Flow

1. Upon clicking the extension icon for the first time, a new tab opens with onboarding modals showcasing extension features and options to import or create a new seed.
2. Users will be asked to set an encryption password (which could later be changed in the settings)
3. When choosing to create a new seed, a 12 word seed phrase will be given and seed verification page will display afterwards.
4. After completing these steps, user would be navigated to localhost:3000 a demo fabric application (portal-web) to be hosted with a separate terminal window.
5. When wallet has been imported / initiated, users could toggle and view addresses of different chains.
6. While on fabric applications, users could test the signing feature by clicking the login button when on portal-web or by entering window.portal.request() in the console

Encryption

Data stored in leveldb is encrypted with the subtleCrypto AES-GCM algorithm. Encryption methods are found in fabric/core/types/subtleCrypto

const importKey = ()

• Description : Import Key for SubtleCrypto Encryption

const generateKey = ()

• Description : Generate Key for SubtleCrypto Encryption

const encrypt = (data, key, iv)

• Description : Encrypt data
• Params
  • {ArrayBuffer} data : Data to be encrypted
  • {CryptoKey} key : Key to be used for encryption
  • {Uint8Array} iv : Initial Vector for encryption

const decrypt = (data, key, iv)

• Description : Decrypt data
• Params
  • {ArrayBuffer} data : Data to be decrypted
  • {CryptoKey} key : Key to be used for decryption
  • {Uint8Array} iv : Initial Vector for decryption

const encryptToString = (data)

• Description : Encrypt data to string
• Params
  • {ArrayBuffer} data : Data to be encrypted

const decryptFromString = (data)

• Description : Decrypt data from string
• Params
  • {String} data : Data to be decrypted

New Chain Integration

Per-chain derivation and address formatting live in src/UIElements/IdentityManager.tsx (BIP32 / bech32 paths). Add shared config there or in a new src/config/chains.ts when you formalize multiple chains.

Storage function descriptions

const initDB = async ()

• Description : Initialize leveldb with chain flags set to true

const setSeedPhrase = async (phrase)

• Description : Set seed phrase to setting
• Params
  • {Array} phrase : 12 seed phrases

const insertAccount = async (account)

• Description : Insert a new account
• Params
  • {object} account : Account Info

const insertIdentity = async (identity, accountId = 0)

• Description : Insert identity into an account
• Params
  • {IIdentity} identity : array of identities generated from account
  • {number} accountId : index of account generated from seed.

const setDBIdentityCheckState = async (accountId, identity, chain, state)

• Description : Enable/disable chain operability for specified idenity
• Params
  • {number} accountId : Account index
  • {number} identity : identity index
  • {number} chain : chain's id listed in browser extension
  • {boolean} state : boolean to enable or disable chain

const setGlobalChainState = async (settings)

• Description : Enable/disable chain operability for wallet
• Params
  • {Array} settings : Chain Settings

const getAccountValid = async ()

• Description : Check if there is an account in the store

const getGlobalChainState = async ()

• Description : Get global chain state

const getAccount = async (accountId = 0)

• Description : Get specific account from the store
• Params
  • {number} accountId : Account Index

const checkPassword = async (accountId 0, password)

• Description : Check if the password inputed is same as saved in the store
• Params
  • {number} accountId : Account Index
  • {string} passHash : Hashed Password

const changePassword = async (accountId = 0, password)

• Description : Change the password in the store
• Params
  • {number} accountId : Account Index
  • {string} password : Hashed Password

const retrievePrivateKey = async (accountId = 0)

• Description : Retrieves private key of account in the store
• Params
  • {number} accountId : Account Index

const getIdentityCount = async (accountId = 0)

• Description : Get Count of identities of an account
• Params
  • {number} accountId : Account Index