@trezor/connect-webextension

The @trezor/connect-webextension package provides an implementation of @trezor/connect designed specifically for use within web extensions. Key features include:

• Compatibility with service worker environments.
• Full access to the TrezorConnect API.
• Automatic handling of pop-up windows for user approvals on trezor.io.
• Direct response delivery to the calling script.

Using the Library

At the moment only bundles build/trezor-connect-webextension.js and build/trezor-connect-webextension.min.js are published.

Option 1: Using Scripting Permissions

For a seamless integration, especially with background processes, modify your extension's manifest.json to include scripting permissions, specify host_permissions, and define your service worker script as shown below:

    "permissions": ["scripting"],
    "host_permissions": ["*://connect.trezor.io/9/*"]
    "background": {
        "service_worker": "serviceWorker.js"
    },

Service Worker Import:

In your serviceWorker.js, use importScripts to import the library. Ensure you replace with the actual path to the library file:

importScripts('<path>/trezor-connect-webextension.js');

Option 2: Manual Content Script Injection

Bundle the Library:

Manually include build/content-script.js from this package into your project's bundle.

manifest.json Update:

Amend your manifest.json to include the script as a content script. Replace with the real path to the library file:

  "content_scripts": [
    {
      "js": ["<path>/content-script.js"],
      "matches": ["*://connect.trezor.io/9/*"]
    }
  ],

Adding your webextension to knownHosts

To ensure your extension is displayed with its name rather than its ID, you need to open a Pull Request to include it in the knownHosts section of the file located at https://github.com/trezor/trezor-suite/blob/develop/packages/connect/src/data/config.ts#L17.

Examples

• Simple example
• Connect Explorer example

Development

• yarn
• yarn build:libs
• yarn workspace @trezor/connect-webextension build
• yarn workspace @trezor/connect-iframe build:core-module
• yarn workspace @trezor/connect-popup dev

After completing these steps, you can import from @trezor/connect-webextension or directly use the built file build/trezor-connect-webextension.js. The popup will run on your localhost, and you can specify it in the TrezorConnect.init({ connectSrc: ... }).