feat: establish channel between background and content

packages/example/extension/src/background/index.ts

@@ -1,3 +1,4 @@
+import { CONTENT_PORT_NAME, createChannel, createPortTransport, serializeMessage } from '../messages';
 import { generateMnemonic } from './wallet';
 
 chrome.runtime.onInstalled.addListener((details) => {
@@ -6,3 +7,11 @@ chrome.runtime.onInstalled.addListener((details) => {
         chrome.storage.local.set({ mnemonic });
     }
 });
+
+chrome.runtime.onConnect.addListener((port) => {
+    if (port.name === CONTENT_PORT_NAME) {
+        const transport = createPortTransport(port);
+
+        const channel = createChannel(transport);
+    }
+});

packages/example/extension/src/content/index.ts

@@ -1,4 +1,14 @@
+import { CONTENT_PORT_NAME } from '../messages';
 import { inject } from './utils';
 
 const windowScript = new URL('./window.ts', import.meta.url);
 inject(windowScript.href);
+
+// Proxy messages between website and background process.
+const port = chrome.runtime.connect({ name: CONTENT_PORT_NAME });
+window.addEventListener('message', (event) => {
+    port.postMessage(event.data);
+});
+port.onMessage.addListener((message) => {
+    window.postMessage(message);
+});

packages/example/extension/src/content/window.ts

@@ -1,9 +1,17 @@
 import type { WalletsWindow } from '@wallet-standard/standard';
 
+import type { Channel } from '../messages';
+import { createChannel, createWindowTransport } from '../messages';
 import type { MultiChainWalletAccount } from './multiChainWallet';
 import { MultiChainWallet } from './multiChainWallet';
 
-declare const window: WalletsWindow<MultiChainWalletAccount>;
+declare const window: WalletsWindow<MultiChainWalletAccount> & {
+    _channel: Channel;
+};
+
+const transport = createWindowTransport(window);
+const channel = createChannel(transport);
+window._channel = channel;
 
 function register(): void {
     window.navigator.wallets = window.navigator.wallets || [];