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.
At the moment only bundles build/trezor-connect-webextension.js
and build/trezor-connect-webextension.min.js
are published.
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"
},
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');
Manually include build/content-script.js from this package into your project's bundle.
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/*"]
}
],
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.
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: ... }).