feat(mv3): hardware wallet support for trezor (#21765)

## **Description**

Uses the Offscreen document to add an iframe for Trezor hardware wallet
communication. The entry point of the trezor-iframe is trezor-iframe.ts
and it is protected by Lavamoat using the build system in the same way
that the offscreen document is.

## **Related issues**

Fixes: #21623 

## **Manual testing steps**

1. run `yarn start:mv3`
2. load the extension into chrome, or reload it if already added.
3. If you previously had your Trezor added to the extension, remove it
(or you can add a secondary account from it)
4. Click Add new hardware wallet from the add account dropdown menu. 
5. See that Trezor and QR are valid options
6. Make sure you have Trezor Suite open and your device unlocked. 
7. Click trezor and then connect.
8. See that you are prompted to connect your trezor and select an
account to import.
9. Perform transactions, signatures, etc using the test dapp. 


## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**
<img width="1225" alt="Screenshot 2023-11-30 at 12 04 49 PM"
src="https://github.com/MetaMask/metamask-extension/assets/4448075/e0300d39-561c-4a20-a494-35020c1aa6a9">

<!-- [screenshots/recordings] -->

### **After**
<img width="778" alt="Screenshot 2023-11-30 at 11 59 01 AM"
src="https://github.com/MetaMask/metamask-extension/assets/4448075/bbd1a50c-963e-4eed-8ffb-38b8302912a2">
<img width="1114" alt="Screenshot 2023-11-30 at 12 01 35 PM"
src="https://github.com/MetaMask/metamask-extension/assets/4448075/839aed19-8cf0-4a6a-a3cd-aa6062a77231">


## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've clearly explained what problem this PR is solving and how it
is solved.
- [x] I've linked related issues
- [x] I've included manual testing steps
- [x] I've included screenshots/recordings if applicable
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.
- [x] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [x] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

---------

Co-authored-by: MetaMask Bot <[email protected]>

Author: brad-decker

.yarnrc.yml

@@ -24,8 +24,11 @@ npmAuditIgnoreAdvisories:
   # Issue: protobufjs Prototype Pollution vulnerability
   # URL - https://github.com/advisories/GHSA-h755-8qp9-cq85
   # Not easily patched. Minimally effects the extension due to usage of
-  # LavaMoat lockdown.
+  # LavaMoat lockdown. Additional id added that resolves to the same advisory
+  # but has a different entry due to it being a new dependency of
+  # @trezor/connect-web. Upgrading
   - 1092429
+  - 1095136
 
   # Issue: Regular Expression Denial of Service (ReDOS)
   # URL: https://github.com/advisories/GHSA-257v-vj4p-3w2h

app/manifest/v3/chrome.json

@@ -1,6 +1,6 @@
 {
   "content_security_policy": {
-    "extension_pages": "script-src 'self'; object-src 'self'; frame-ancestors 'none';"
+    "extension_pages": "script-src 'self'; object-src 'self'; frame-ancestors 'self';"
   },
   "externally_connectable": {
     "matches": ["https://metamask.io/*"],

app/scripts/lib/offscreen-bridge/trezor-offscreen-bridge.ts

@@ -0,0 +1,136 @@
+import { TrezorBridge } from '@metamask/eth-trezor-keyring';
+import type {
+  EthereumSignMessage,
+  EthereumSignTransaction,
+  Params,
+  EthereumSignTypedDataTypes,
+  ConnectSettings,
+  Manifest,
+  Response as TrezorResponse,
+  EthereumSignedTx,
+  PROTO,
+  EthereumSignTypedHash,
+} from '@trezor/connect-web';
+import {
+  OffscreenCommunicationEvents,
+  OffscreenCommunicationTarget,
+  TrezorAction,
+} from '../../../../shared/constants/offscreen-communication';
+
+/**
+ * This class is used as a custom bridge for the Trezor connection. Every
+ * hardware wallet keyring also requires a bridge that has a known interface
+ * that the keyring can call into for specific functions. The bridge then makes
+ * whatever calls or requests it needs to in order to fulfill the request from
+ * the keyring. In this case, the bridge is used to communicate with the
+ * Offscreen Document. Inside the Offscreen document the trezor-iframe is
+ * embedded that will listen for these calls and communicate with the
+ * trezor/connect-web library.
+ */
+export class TrezorOffscreenBridge implements TrezorBridge {
+  model: string | undefined;
+
+  init(
+    settings: {
+      manifest: Manifest;
+    } & Partial<ConnectSettings>,
+  ) {
+    chrome.runtime.onMessage.addListener((msg) => {
+      if (
+        msg.target === OffscreenCommunicationTarget.extension &&
+        msg.event === OffscreenCommunicationEvents.trezorDeviceConnect
+      ) {
+        this.model = msg.payload;
+      }
+    });
+
+    return new Promise<void>((resolve) => {
+      chrome.runtime.sendMessage(
+        {
+          target: OffscreenCommunicationTarget.trezorOffscreen,
+          action: TrezorAction.init,
+          params: settings,
+        },
+        () => {
+          resolve();
+        },
+      );
+    });
+  }
+
+  dispose() {
+    return new Promise<void>((resolve) => {
+      chrome.runtime.sendMessage(
+        {
+          target: OffscreenCommunicationTarget.trezorOffscreen,
+          action: TrezorAction.dispose,
+        },
+        () => {
+          resolve();
+        },
+      );
+    });
+  }
+
+  getPublicKey(params: { path: string; coin: string }) {
+    return new Promise((resolve) => {
+      chrome.runtime.sendMessage(
+        {
+          target: OffscreenCommunicationTarget.trezorOffscreen,
+          action: TrezorAction.getPublicKey,
+          params,
+        },
+        (response) => {
+          resolve(response);
+        },
+      );
+    }) as TrezorResponse<{ publicKey: string; chainCode: string }>;
+  }
+
+  ethereumSignTransaction(params: Params<EthereumSignTransaction>) {
+    return new Promise((resolve) => {
+      chrome.runtime.sendMessage(
+        {
+          target: OffscreenCommunicationTarget.trezorOffscreen,
+          action: TrezorAction.signTransaction,
+          params,
+        },
+        (response) => {
+          resolve(response);
+        },
+      );
+    }) as TrezorResponse<EthereumSignedTx>;
+  }
+
+  ethereumSignMessage(params: Params<EthereumSignMessage>) {
+    return new Promise((resolve) => {
+      chrome.runtime.sendMessage(
+        {
+          target: OffscreenCommunicationTarget.trezorOffscreen,
+          action: TrezorAction.signMessage,
+          params,
+        },
+        (response) => {
+          resolve(response);
+        },
+      );
+    }) as TrezorResponse<PROTO.MessageSignature>;
+  }
+
+  ethereumSignTypedData<T extends EthereumSignTypedDataTypes>(
+    params: Params<EthereumSignTypedHash<T>>,
+  ) {
+    return new Promise((resolve) => {
+      chrome.runtime.sendMessage(
+        {
+          target: OffscreenCommunicationTarget.trezorOffscreen,
+          action: TrezorAction.signTypedData,
+          params,
+        },
+        (response) => {
+          resolve(response);
+        },
+      );
+    }) as TrezorResponse<PROTO.EthereumTypedDataSignature>;
+  }
+}

app/scripts/metamask-controller.js

@@ -285,6 +285,7 @@ import { securityProviderCheck } from './lib/security-provider-helpers';
 import { IndexedDBPPOMStorage } from './lib/ppom/indexed-db-backend';
 ///: END:ONLY_INCLUDE_IF
 import { updateCurrentLocale } from './translate';
+import { TrezorOffscreenBridge } from './lib/offscreen-bridge/trezor-offscreen-bridge';
 ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
 import { snapKeyringBuilder, getAccountsBySnapId } from './lib/snap-keyring';
 ///: END:ONLY_INCLUDE_IF
@@ -948,6 +949,10 @@ export default class MetamaskController extends EventEmitter {
         );
       }
       ///: END:ONLY_INCLUDE_IF
+    } else if (isManifestV3) {
+      additionalKeyrings.push(
+        hardwareKeyringBuilderFactory(TrezorKeyring, TrezorOffscreenBridge),
+      );
     }
 
     ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
@@ -3763,6 +3768,7 @@ export default class MetamaskController extends EventEmitter {
     const keyringOverrides = this.opts.overrides?.keyrings;
     let keyringName = null;
     if (
+      deviceName !== HardwareDeviceNames.trezor &&
       deviceName !== HardwareDeviceNames.QR &&
       !this.canUseHardwareWallets()
     ) {

development/build/scripts.js

@@ -305,7 +305,7 @@ function createScriptTasks({
     // In MV3 we will need to build our offscreen entry point bundle and any
     // entry points for iframes that we want to lockdown with LavaMoat.
     if (process.env.ENABLE_MV3 === 'true') {
-      standardEntryPoints.push('offscreen');
+      standardEntryPoints.push('offscreen', 'trezor-iframe');
     }
 
     const standardSubtask = createTask(
@@ -321,6 +321,8 @@ function createScriptTasks({
               return './app/vendor/trezor/content-script.js';
             case 'offscreen':
               return './offscreen/scripts/offscreen.ts';
+            case 'trezor-iframe':
+              return './offscreen/scripts/trezor-iframe.ts';
             default:
               return `./app/scripts/${label}.js`;
           }
@@ -805,6 +807,16 @@ function createFactoredBuild({
             });
             break;
           }
+          case 'trezor-iframe': {
+            renderJavaScriptLoader({
+              groupSet,
+              commonSet,
+              browserPlatforms,
+              applyLavaMoat,
+              destinationFileName: 'load-trezor-iframe.js',
+            });
+            break;
+          }
           default: {
             throw new Error(
               `build/scripts - unknown groupLabel "${groupLabel}"`,