Sample: Transfer a blob from a background context to a page

Goal of the demo

Demonstrate how an extension can create a blob in the extension’s service worker and transfer it to a page’s main world.

Suggested implementation

Sketch of my initial implementation plan

1. Have a content script inject an iframe into a page
2. Run a script in the iframe to post a message back to the service worker using navigator.serviceWorker.controller.postMessage()
3. In the SW’s message handler, generate a blob OR use structuredClone() to create a copy of a blob.
4. Use event.source.postMessage(msg, [transferable]) to reply to the client and transfer the blob
5. In the iframe’s message handler, use window.parent.postMessage(msg, "<origin>", [transferable]) to transfer the data to the page

Related links

• https://github.com/w3c/webextensions/issues/293

Notes

Initial findings suggest that it’s not possible to transfer variables across origins. I’m tentatively thinking that to work around this, we can use URL.createObjectURL() in the iframe and directly reference the object URL somewhere that’s easily visible to the end user (e.g. canvas, Audio/Video element, etc.).

[guest271314]

my initial experiments seem to indicate that transferables cannot be sent across origin

Yes they can be, if we are talking about from chrome://<id> to arbitrary Web page, and vice versa.

[tophf]

Ideally chrome messaging should use the standard web platform messaging mechanism under the hood. The linked issue also mentions adding a transfer parameter to enable what the web platform’s “transferrable” parameter does - at least in the non-broadcast methods i.e. ports.