[FEATURE] Chrome Extension Manifest V3 Support

[charliesantos]

In manifest V2, extensions have the ability to run the Twilio Voice JS SDK in the background. But with the introduction of manifest V3 (MV3), running the Twilio Voice JS SDK in the background using service workers does not work out of the box due to certain limitations which include DOM access and the ability to keep the service worker alive.

In order to make outgoing calls and listen/receive incoming calls through the SDK, the service worker should be connected to a WebSocket server and should send/receive messages periodically to keep it alive. Also, the service worker should create offscreen documents to run the SDK. Check our example to see how this works.

Looking ahead, we are working on a solution that allows for running the SDK in MV3 without having to setup a separate WebSocket server. Please watch this issue for future updates.

[GhazanfarKhan]

Can we use twilio conversation sdk and voice sdk both at the same time ? We have our extension that is using both at the same time. Since the service worker should create offscreen documents to run the SDK and only 1 offscreen document can be open at one time. Is it possible?

[charliesantos]

You should be able to run both in one offscreen document if you want to.

[GhazanfarKhan]

How do we register events such as call accept, disconnect, similarly for conversation and message we have multiple events. Since offscreen document can be closed how can we manage state.

[charliesantos]

This repo is for questions regarding Twilio Voice JavaScript SDK. For conversations related, please reach out to your account manager or submit a ticket using your Twilio account.

You can still register events in the voice sdk when running offscreen documents. The lifecycle of the document is determined depending on the reasons as mentioned here https://developer.chrome.com/docs/extensions/reference/api/offscreen.

For example, when a call comes in, your service worker creates the offscreen document and loads the voice js sdk. During a call, the offscreen document remains open because of the "reasons" you provided. See example here https://github.com/twilio/twilio-voice.js/blob/feature/chrome_ext_mv3_external_signaling/extensions/chrome/app/worker/worker.js#L85 While the document is open, call related events will work and it's up to you how you want to pass those anywhere in your app.

[GhazanfarKhan]

Thanks for your responses. Last question we handle inbound call workflow using twilio taskrouter. So when someone loggedin we setup worker for it. Then inbound call received using reservation events. How we can setup these events.

[charliesantos]

Then inbound call received using reservation events. How we can setup these events.

No worries @GhazanfarKhan . Which events are you referring to? Can you provide a link to the API docs just to make sure we're referring to the same thing?

[GhazanfarKhan]

Worker reservation events

[GhazanfarKhan]

offscreen document shouldn't be closed as long as user is waiting for call is that correct?

[charliesantos]

It seems the worker reservation events you provided are not related to voice js sdk. Please reach out to support and they should be able to route you properly.

offscreen document shouldn't be closed as long as user is waiting for call is that correct?

Per chrome's mv3 documentation, if you're only waiting, the document will close. You need to be actively doing the "reasons" you provided. For voice js sdk, you will be doing 'AUDIO_PLAYBACK', 'USER_MEDIA', 'WEB_RTC' which all happens during a call. I suggest you initiate the call soon after you create the offscreen document.

[GhazanfarKhan]

In your mv3 example if browser page is refreshed do the call remains in offscreen page or it will be disconnected and cleared? because in mv2 we setup call in background.js and call remains connected when the page refresh or not.

[charliesantos]

Yes, offscreen page will remain if the browser page is refreshed in mv3. Same behavior as mv2.

[charliesantos]

We added better support for chrome extensions in v2.11.0. See https://github.com/twilio/twilio-voice.js/blob/master/CHANGELOG.md#2110-may-2-2024