Steps for upgrading from v7

[SebastienGllmt]

Hello,

I'm trying to upgrade Trezor-Connect inside Yoroi browser extension see this PR but I get the following error inside the connect.trezor.io page

popup.html:formatted:1 Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.

I noticed the 8.0.0 changelog say

- Changed communication process between host, iframe and popup. BroadcastChannel is used as default, postMessage as fallback

- Webextension usb permissions iframe dynamically included into html

so presumably it's related, but I can't find examples of concretely what we have to change to upgrade our extension from v7 to v8.

[szymonlesisz]

it's a little bit hidden
https://github.com/trezor/connect/tree/develop/src/js/plugins/webextension

[SebastienGllmt]

Thank you for the reply.
It seems our extension is still inline with the examples given in that link. You can see from the PR I linked above that we change almost nothing with our extension other than updating the type definitions and our test file, and yet connection no longer works (broken on both Chrome and Firefox)
Any idea what would cause this? It fails on the very first call when we try and export the public key

[SebastienGllmt]

This issue reproduces when upgrading from 7.0.5 (last v7 release) to 8.0.0-rc.1

The error shown in my original post triggers on the following line in our content script:

let port = chrome.runtime.connect({ name: 'trezor-connect' });

It looks like the whole popup & iframe logic was redone in 8.0.0 so it's really hard for me to look into what is going wrong. Is it possible to get help on this?

[szymonlesisz]

here you go. working example with connect 8:
[Edit: already in develop]
https://github.com/trezor/connect/tree/develop/examples/webextension

[SebastienGllmt]

Hmm, the example you posted definitely works for me.

However, I created a minimal repro of my issue: https://github.com/SebastienGllmt/trezor-webpack

You can see if you run the minimal repro, everything works fine. However, if you upgrade to version 8, it no longer works (fails to connect)

Possibly the new mechanism trezor-connect now uses can only run in a background script?

[szymonlesisz]

https://github.com/SebastienGllmt/trezor-webpack/blob/master/chrome/content-scripts/3rd-party-trezor/trezor-content-script.js#L23

https://github.com/trezor/connect/blob/develop/examples/webextension/vendor/trezor-content-script.js#L19

maybe because of this?
port.postMessage({ data: event.data });

[szymonlesisz]

Possibly the new mechanism trezor-connect now uses can only run in a background script?

Thb i've never tried to implement it elsewhere than background script, but if it works with 7 it should work with 8 too

[SebastienGllmt]

port.postMessage({ data: event.data });

Ah yes, this is what changed! It works now! I updated my example repo to work with v8 also. Interestingly, {data: event.data} fixes v8 but causes v7 to hang. Possibly good to add this breaking change to the docs.

Thb i've never tried to implement it elsewhere than background script

If you want, I can transfer ownership of my example repo to you or Trezor so you have an example to show people, but if you don't want to maintain it, that's fine. However, it's possible that maybe we should have put this in our background script from the start.

[szymonlesisz]

Possibly good to add this breaking change to the docs.

It was added to changelog that this part was reworked, it was a massive change and i don't want point to every single line of code

• Changed communication process between host, iframe and popup. BroadcastChannel is used as default, postMessage as fallback

[szymonlesisz]

with your permission i will use your example in this repo

[SebastienGllmt]

I made my example repo MIT so you can reuse any part of it you want or its entirety 👍