feat: Add firefox window.postMessage support #48

jiexi · 2025-03-20T23:28:54Z

Adds window.postMessage support for firefox

Extension: MetaMask/metamask-extension#30142

Ticket: https://github.com/orgs/MetaMask/projects/146/views/6?pane=issue&itemId=102893257&issue=MetaMask%7CMetaMask-planning%7C4459

Firefox:

firefox.mov

Chromium:

chromium.mov

socket-security · 2025-03-20T23:29:32Z

Updated dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@metamask/utils@11.0.0 ➜ 11.3.0	None	`0`	787 kB	metamaskbot

View full report↗︎

…essage. Fix handleMessage resolve reject

src/sdk/providers/MetaMaskMultichainWindowPostMessageProvider.ts

src/App.tsx

adonesky1 · 2025-03-21T20:56:58Z

I think its probably fine for now but maybe we should add a way to connect in firefox that doesn't depend on CAIP-294 announcement?

adonesky1

overall LGTM! Great work 💪

src/sdk/providers/MetaMaskMultichainWindowPostMessageProvider.ts

+      this.disconnect();
+    }
+
+    this.#listener = (messageEvent: MessageEvent) => {


To fix the problem, we need to verify the origin of the incoming message in the messageEvent handler. This involves checking the origin property of the messageEvent object to ensure it matches a trusted origin. We will add a check for the origin before processing the message further.

Identify the trusted origin(s) that should be allowed to send messages.

Modify the messageEvent handler to include a check for the origin property.

If the origin matches the trusted origin, proceed with the existing checks and message handling. Otherwise, ignore the message.

ffmcgee725 · 2025-03-25T17:10:37Z

src/components/WalletList.tsx

                  <p className="wallet-extension-id">
-                    Extension ID: {wallet.params.extensionId}
+                    {wallet.params.extensionId === WINDOW_POST_MESSAGE_ID
+                      ? null
+                      : 'Extension ID: '}
+                    {wallet.params.extensionId}
                  </p>


The original suggested change always renders a  tag, even when there's no content. This isn't semantically correct HTML, as an empty paragraph doesn't convey any meaning and will always render regardless of the extensionId provided.

I suggest we do something like:

Suggested change



Extension ID: {wallet.params.extensionId}

{wallet.params.extensionId === WINDOW_POST_MESSAGE_ID

? null

: 'Extension ID: '}

{wallet.params.extensionId}



{wallet.params.extensionId !== WINDOW_POST_MESSAGE_ID && (



Extension ID: {wallet.params.extensionId}



)}

This way we only renders the  element when there's content to display.

github won't let me apply your suggestion. so i'll apply it manually

ohh sorry, so code doesn't result in an empty
tag. Effectively what is happening is.

if wallet.params.extensionId === 'window.postMessage' then window.postMessage

else Extension ID: {wallet.params.extensionId}

I want to show the extensionId always, but i don't want the Extension ID: text if wallet.params.extensionId === 'window.postMessage'

adonesky1

LGTM

## **Description** * Exposes the Multichain API over window.postMessage for Firefox * Enables Flask e2e Multichain API tests for Firefox [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/30142?quickstart=1) ## **Related issues** Test Dapp: MetaMask/test-dapp-multichain#48 ## **Manual testing steps** `yarn start:flask:mv2` In a non-chromium browser, i.e. Firefox Without helper packages ``` window.addEventListener('message', (event) => { const { target, data } = event.data; if ( target !== "metamask-inpage" || data?.name !== 'metamask-multichain-provider' ) { return; } console.log(data.data) }) const caipPostMessage = (data) => { window.postMessage({ target: 'metamask-contentscript', data: { name: 'metamask-multichain-provider', data } }, location.origin) } caipPostMessage({ jsonrpc: '2.0', method: 'wallet_createSession', params: { optionalScopes: {} } }) ``` With helper packages (psuedo-ish code) ``` import { WindowPostMessageStream } from '@metamask/post-message-stream'; import ObjectMultiplex from '@metamask/object-multiplex'; import { pipeline } from 'readable-stream'; const metamaskStream = new WindowPostMessageStream({ name: INPAGE, target: CONTENT_SCRIPT, }); const metamaskMux = new ObjectMultiplex(metamaskStream) const caipStream = window.metamaskMux.createStream('metamask-provider-caip') pipeline(metamaskMux, metamaskStream, metamaskMux, (err) => { console.log({err}) }); caipStream.on('data', console.log) caipStream.write({jsonrpc: '2.0', method: 'wallet_createSession', params:{optionalScopes: {}} }) ``` ## **Screenshots/Recordings**  ### **Before**  ### **After**  ## **Pre-merge author checklist** - [ ] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've completed the PR template to the best of my ability - [ ] I’ve included tests if applicable - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. --------- Co-authored-by: MetaMask Bot <metamaskbot@users.noreply.github.com> Co-authored-by: Alex <adonesky@gmail.com> Co-authored-by: Mark Stacey <markjstacey@gmail.com> Co-authored-by: ffmcgee <51971598+ffmcgee725@users.noreply.github.com> Co-authored-by: Frederik Bolding <frederik.bolding@gmail.com> Co-authored-by: Elliot Winkler <elliot.winkler@gmail.com>

jiexi added 5 commits March 20, 2025 14:02

Create base provider. Add externally connectable provider

de8d610

Rename provider file

1d95197

lint

6d3fa7b

add WindowPostMessage provider

336d06e

temp use wpm provider

aaf9d38

jiexi requested a review from a team as a code owner March 20, 2025 23:28

jiexi added 4 commits March 21, 2025 12:01

update PostMessageProvider to use postMessage directly

65797b8

update _handleMessage to expect unwrapped caip message. Remove parseM…

f429e56

…essage. Fix handleMessage resolve reject

Add WindowPostMessage support to SDK

345be6c

Use WINDOW_POST_MESSAGE_ID

5f9c627

github-advanced-security bot found potential problems Mar 21, 2025

View reviewed changes

src/sdk/providers/MetaMaskMultichainWindowPostMessageProvider.ts Fixed Show fixed Hide fixed

Add window.postMessage value to announce event

e4d1286

jiexi changed the title ~~DRAFT: Jl/add firefox window post message support~~ feat: Add firefox window.postMessage support Mar 21, 2025

jiexi mentioned this pull request Mar 21, 2025

feat: expose Multichain API via window.postMessage for Firefox MetaMask/metamask-extension#30142

Merged

7 tasks

adonesky1 reviewed Mar 21, 2025

View reviewed changes

src/App.tsx Outdated Show resolved Hide resolved

adonesky1 previously approved these changes Mar 21, 2025

View reviewed changes

lint

8876ce8

jiexi dismissed adonesky1’s stale review via 8876ce8 March 25, 2025 16:44

github-advanced-security bot found potential problems Mar 25, 2025

View reviewed changes

ffmcgee725 reviewed Mar 25, 2025

View reviewed changes

adonesky1 approved these changes Mar 25, 2025

View reviewed changes

jiexi merged commit d1d223d into main Mar 25, 2025
18 checks passed

jiexi deleted the jl/add-firefox-window-post-message-support branch March 25, 2025 17:19

@@ -23,2 +23,6 @@
                 this.#listener = (messageEvent: MessageEvent) => {
+                  const trustedOrigin = 'https://www.example.com'; // Replace with the actual trusted origin
+                  if (messageEvent.origin !== trustedOrigin) {
+                    return;
+                  }
                   const { target, data } = messageEvent.data;

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat: Add firefox window.postMessage support #48

feat: Add firefox window.postMessage support #48

Uh oh!

jiexi commented Mar 20, 2025 •

edited

Loading

Uh oh!

socket-security bot commented Mar 20, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

adonesky1 commented Mar 21, 2025

Uh oh!

adonesky1 left a comment

Uh oh!

Check warning

Copilot Autofix

ffmcgee725 Mar 25, 2025

Uh oh!

jiexi Mar 25, 2025

Uh oh!

jiexi Mar 25, 2025

Uh oh!

adonesky1 left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

feat: Add firefox window.postMessage support #48

feat: Add firefox window.postMessage support #48

Uh oh!

Conversation

jiexi commented Mar 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

socket-security bot commented Mar 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

adonesky1 commented Mar 21, 2025

Uh oh!

adonesky1 left a comment

Choose a reason for hiding this comment

Uh oh!

Check warning

Copilot Autofix

ffmcgee725 Mar 25, 2025

Choose a reason for hiding this comment

Uh oh!

jiexi Mar 25, 2025

Choose a reason for hiding this comment

Uh oh!

jiexi Mar 25, 2025

Choose a reason for hiding this comment

Uh oh!

adonesky1 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jiexi commented Mar 20, 2025 •

edited

Loading

socket-security bot commented Mar 20, 2025 •

edited

Loading