feat: expose Multichain API via window.postMessage for Firefox

[jiexi]

Description

• Exposes the Multichain API over window.postMessage for Firefox
• Enables Flask e2e Multichain API tests for Firefox

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 and MetaMask Extension Coding Standards.
• 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 format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). 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.

[metamaskbot]

Builds ready [ca74228]

• builds: chrome, firefox
• builds (flask): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• bundle size: Bundle Size Stats
• user-actions-benchmark: User Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all CircleCI artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • content-script: 0
  • offscreen: 0

UI Startup Metrics (1235 ± 78 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1235	1126	1533	78	1281	1388
			load	1077	946	1361	79	1178	991
			domContentLoaded	1071	941	1356	79	1229	993
			domInteractive	17	13	62	6	16	29
			firstPaint	760	130	1365	421	235	990
			backgroundConnect	11	6	51	6	9	10
			firstReactRender	21	15	56	8	19	40
			getState	12	5	38	7	7	8
			initialActions	0	0	1	0	0	0
			loadScripts	821	693	1107	77	864	927
			setupStore	8	5	23	3	7	9
	Webpack	Home	uiStartup	2120	1662	2465	191	2258	2372
			load	1659	1283	2011	176	1762	1938
			domContentLoaded	1654	1279	2005	175	1757	1932
			domInteractive	17	12	69	12	14	58
			firstPaint	172	64	391	65	245	90
			backgroundConnect	31	11	403	39	35	52
			firstReactRender	164	54	382	113	61	97
			getState	13	4	163	17	7	9
			initialActions	3	1	5	1	3	5
			loadScripts	1645	1262	1980	172	1749	1909
			setupStore	27	6	397	58	37	8
Firefox	Browserify	Home	uiStartup	1333	1141	1777	122	1403	1575
			load	1202	1027	1650	120	1263	1442
			domContentLoaded	1201	1027	1649	120	1263	1442
			domInteractive	106	38	236	30	89	98
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	24	16	137	13	23	38
			firstReactRender	21	18	47	4	21	31
			getState	7	3	42	5	7	8
			initialActions	0	0	1	0	0	1
			loadScripts	1179	1010	1620	119	1228	1419
			setupStore	6	4	28	3	6	7
	Webpack	Home	uiStartup	1516	1359	1869	91	1558	1682
			load	1302	1160	1586	83	1356	1452
			domContentLoaded	1301	1160	1586	83	1356	1452
			domInteractive	95	44	170	22	90	98
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	26	19	74	8	27	46
			firstReactRender	36	30	53	5	38	49
			getState	9	5	31	6	8	9
			initialActions	0	0	1	0	1	1
			loadScripts	1277	1138	1565	83	1327	1432
			setupStore	8	5	28	3	8	9

[metamaskbot]

Builds ready [9697f0d]

• builds: chrome, firefox
• builds (flask): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• bundle size: Bundle Size Stats
• user-actions-benchmark: User Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all CircleCI artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
  • content-script: 0
  • offscreen: 0

UI Startup Metrics (1210 ± 49 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1210	1099	1347	49	1234	1296
			load	1054	930	1147	49	1131	995
			domContentLoaded	1048	921	1142	49	1136	991
			domInteractive	17	13	33	4	17	29
			firstPaint	670	134	1148	417	253	989
			backgroundConnect	7	4	15	2	7	9
			firstReactRender	20	14	79	9	20	39
			getState	13	5	49	9	7	9
			initialActions	0	0	1	0	0	1
			loadScripts	808	679	905	48	837	887
			setupStore	8	4	26	3	7	8
	Webpack	Home	uiStartup	2134	1739	2696	174	2251	2390
			load	1686	1296	2147	158	1755	1995
			domContentLoaded	1677	1291	2143	154	1742	1986
			domInteractive	17	12	64	11	13	50
			firstPaint	167	64	428	70	275	87
			backgroundConnect	36	9	396	57	34	9
			firstReactRender	163	52	393	108	60	88
			getState	17	4	302	40	5	9
			initialActions	3	1	6	1	3	5
			loadScripts	1669	1289	2141	146	1740	1924
			setupStore	24	6	305	45	7	9
Firefox	Browserify	Home	uiStartup	1375	1168	1762	105	1446	1561
			load	1233	1038	1636	105	1304	1413
			domContentLoaded	1233	1038	1636	105	1304	1413
			domInteractive	103	39	246	34	89	95
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	21	13	126	15	20	30
			firstReactRender	23	19	52	5	23	27
			getState	7	4	49	5	8	9
			initialActions	0	0	1	0	0	1
			loadScripts	1213	1023	1622	107	1286	1400
			setupStore	6	4	37	4	6	7
	Webpack	Home	uiStartup	1548	1374	2002	118	1644	1753
			load	1335	1188	1691	105	1404	1534
			domContentLoaded	1335	1188	1691	105	1404	1534
			domInteractive	102	65	213	21	92	97
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	21	14	81	8	22	35
			firstReactRender	34	29	55	5	36	45
			getState	8	4	29	4	8	9
			initialActions	0	0	2	1	1	1
			loadScripts	1317	1164	1669	105	1388	1513
			setupStore	11	5	298	29	7	9

[jiexi]

this PR needs to be updated with new test dapp release MetaMask/test-dapp-multichain#54

[metamaskbot]

❌ API Spec Test Failed. View the report here.

[metamaskbot]

Builds ready [f0c8812]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• bundle size: Bundle Size Stats
• user-actions-benchmark: User Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all CircleCI artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7, 8
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • content-script: 0
  • offscreen: 0

UI Startup Metrics (1223 ± 67 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1223	1102	1465	67	1255	1373
			load	1062	966	1290	64	1104	1185
			domContentLoaded	1055	962	1220	61	1096	1175
			domInteractive	18	13	61	6	17	30
			firstPaint	805	92	1227	401	1086	1182
			backgroundConnect	8	4	83	8	7	12
			firstReactRender	21	15	54	7	21	35
			getState	14	5	45	9	20	32
			initialActions	0	0	1	0	0	1
			loadScripts	813	724	976	58	850	910
			setupStore	7	5	16	2	7	10
	Webpack	Home	uiStartup	2154	1741	2501	166	2289	2392
			load	1660	1343	1952	127	1762	1850
			domContentLoaded	1653	1340	1942	126	1756	1840
			domInteractive	15	11	56	10	13	48
			firstPaint	186	65	464	72	221	326
			backgroundConnect	30	9	256	34	29	68
			firstReactRender	216	55	399	120	332	362
			getState	16	4	261	30	14	29
			initialActions	3	1	8	1	3	6
			loadScripts	1648	1338	1920	126	1752	1838
			setupStore	20	7	284	28	20	34
Firefox	Browserify	Home	uiStartup	1346	1161	1618	102	1412	1544
			load	1202	1035	1484	105	1285	1389
			domContentLoaded	1202	1034	1483	105	1284	1389
			domInteractive	105	38	237	34	124	171
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	19	12	63	6	19	27
			firstReactRender	21	19	31	2	22	26
			getState	7	4	30	4	7	9
			initialActions	0	0	1	0	0	1
			loadScripts	1185	1017	1465	105	1267	1373
			setupStore	8	4	196	19	6	7
	Webpack	Home	uiStartup	1608	1387	2067	154	1680	1976
			load	1372	1166	1828	143	1425	1725
			domContentLoaded	1372	1164	1828	143	1425	1725
			domInteractive	93	35	323	44	100	164
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	24	15	81	10	25	41
			firstReactRender	38	29	57	5	40	49
			getState	10	5	32	6	10	28
			initialActions	1	0	2	1	1	1
			loadScripts	1350	1149	1813	142	1406	1699
			setupStore	9	5	31	3	9	12

Bundle size diffs [🚨 Warning! Bundle size has increased!]

• background: 400 Bytes (0.01%)
• ui: 0 Bytes (0%)
• common: 0 Bytes (0%)