背景

隔离环境通信，比如window.top和iframe；Chrome Extension各环境之间通信；主线程与web worker通信等；原生的通信方式会遇到以下问题

• 原生通信方式不支持response，比如
  • chrome.runtime.sendMessage
  • (window | vscode | vscode.panel.webview |worker).postMessage
  • Electron.WebContents.send
• 无法直接通信，需要转发
  • Chrome Extension中devtool与前台页面通信需要content script转发

每次遇到这个问题都会封装一个支持Promise的工具方法，遇到的次数多了，封装一个统一api的bridge库。

使用

整个使用过程类似调用后端接口，如下

on 方法监听API

bridge.on(path: string, async function(params: any) {
    const response = { ret: 0, data: 'Hello' }
    return response
});

说明：

• path: 接口路径，比如 ‘web/getUserInfo’
  • 为区分多个环境，path需要以环境的keyplat开头
  • 与事件监听有所不同，一个path只能对应一个方法
• params: 接口参数
• response: 接口返回值

request 方法请求接口

const response = await bridge.request(path, { username: 'yh' });

说明：

• path: 需要和on的path保持一致

示例：chrome-extension 通信

Chrome Extension 环境

• web: 前台页面
• content script
• popup
• devtool
• service worker：之前的background script

devtool或者其他环境与web通信需要经过content-script中转，如图

Chrome Extension 使用 bridge

const Plat = {
  web: 'testDevtoolsWeb'
};
const api = {
  getPinia: `${Plat.web}/getPiniaInfo`
}

// content script 
// must be required, if you want to request `web`
import { ContentBridge } from '@yuhufe/browser-bridge'
export const contentBridge = new ContentBridge({ platWeb: Plat.web }) 

// web.js
import { WebBridge } from '@yuhufe/browser-bridge'
export const webBridge = new WebBridge({ plat: Plat.web });
webBridge.on(api.getPinia, async function({ key }) {
  console.log(key); // 'board'
  return Promise.resolve({ a: 1 });
});


// devtool.js
import { DevtoolBridge } from '@yuhufe/browser-bridge'
export const devtoolBridge = new DevtoolBridge()

const piniaInfo = await devtoolBridge.request(api.getPinia, { key: 'board' });
console.log(piniaInfo); // { a: 1 }

Chrome Extension Bridges 介绍

WebBridge

• 一个页面可能会定义多个WebBridge
  • 多个extension
  • extension与iframe共存
• 为了区分多个WebBridge，需要自定义plat字段

ContentBridge

• 用于proxy各方通信
• 和WebBridge配套，需要定义platWeb字段

DevtoolBridge

• 不同Chrome Extension的devtool是互相隔离的，不需要指定plat
• popup，service-worker同理

BackgroundBridge

PopupBridge

示例：iframe通信

• top页面：宿主页面
  • 只有1个
  • 使用 iframeEl.contentWindow.postMessage通信
• iframe页面：被嵌入的页面
  • 可能有多个，因此需要指定frameKey
  • 使用window.parent.postMessage通信

const Plat = { frame1: 'iframeText', top: 'iframeTop' };
const api = {
  getFrameInfo: `${Plat.frame1}/getInfo`,
  getTopInfo: `${Plat.top}/getTopInfo`
}

// top.js
import { IFrameTopBridge } from '@yuhufe/browser-bridge'
const iframeTopBridge = new IFrameTop({ 
  frameKey: Plat.frame1, 
  frameEl: document.querySelector('iframe') 
})
iframeTopBridge.on(api.getTopInfo, async function({ topname }) {
  console.log(topname);
  return { top: 1 };
});
const userInfo = await iframeTopBridge.request(api.getFrameInfo, { username: '' });

// iframe.js
import { IFrameBridge } from '@yuhufe/browser-bridge'
const iframeBridge = new IFrameBridge({ frameKey })
// handle api
iframeBridge.on(api.getFrameInfo, async function({ username }) {
  return { user: '', age: 0 }
});
// call api
const topInfo = await iframeBridge.request(api.getTopInfo, { topname: '' });

示例：WebWorker通信

import { Plat } from '@yuhufe/browser-bridge'
const Plat = { worker1: 'worker1', master: 'master' }
const api = {
  getWorkerInfo: `${Plat.worker1}/getInfo`,
  getMasterInfo: `${Plat.master1}/getInfo`
}

// master.js
import { MasterBridge } from '@yuhufe/browser-bridge'
export const masterBridge = new MasterBridge()
const worker = new Worker(new URL('./worker.ts', import.meta.url), {
  type: 'module',
})
masterBridge.bindWorker({ plat: Plat.worker, worker })
// handle api
masterBridge.on(api.getMasterInfo, async function () {
  return { accessToken: 'aaa' }
})

// worker.js
import { WorkerBridge } from '@yuhufe/browser-bridge'

const workerBridge = new WorkerBridge()
const init = async function () {
  const info: any = await workerBridge.request(api.getMasterInfo, null)
  console.log(info)
}
init()

自定义bridge: electron下2个窗口通信

上面只把常用的场景进行了bridge封装，你也可以使用BaseBridge进行自定义封装，如下例。

通信方: electron在global上挂了2个窗口需要通信

• mainWin(Electron.BrowserWindow)
• backWin(Electron.BrowserWindow)

通信方式

• 监听事件：在各自的代码中调用ipcRenderer.on
  • ipcRenderer来自类型Electron.IpcRenderer
• 触发事件：backWin中调用global.mainWin.webContents.send

基于以上通信方式，构造bridge如下

import { BaseBridge, MsgDef } from '@yuhufe/browser-bridge'

const ipcRenderer = remote.ipcRenderer

export const WinPlat = {
  backWin: 'backWin', // background页面
  mainWin: 'mainWin', // 主页面
}
export const WinAPI = {
  backToggle: `${WinPlat.backWin}/toggle`,
  cptDynamicUpdateFileInfo: `${WinPlat.backWin}/cpt-dynamicUpdate-fileInfo`,
  ipclog: `${WinPlat.mainWin}/ipclog`,
}

export class ElectronBridge extends BaseBridge {
  constructor({ plat }: any = {}) {
    super({ plat })
    this.init()
  }

  init() {
    ipcRenderer?.on('kxBridgeMessage', (evt, message) => {
      this.onReceiveMessage(message);
    })
  }

  async sendMessage(message) {
    const { target } = message
    return global[target]?.webContents.send('kxBridgeMessage', message)
  }
}

说明：

• 在初始化时开始监听事件
• 使用handleRequest处理请求消息
  • 提供sendResponse具体实现，本例中直接转发
• 使用handleResponse处理response消息
• 实现sendMessage方法，内容为向其他bridge发送消息

ElectronBridge使用代码如下

// backWin
const backBridge = new ElectronBridge({ plat: WinPlat.backWin })
backBridge.on(WinAPI.cptDynamicUpdateFileInfo, async data => {
    // 业务逻辑
    return {}
})

// mainWin
const mainBridge = new ElectronBridge({ plat: WinPlat.mainWin })
const data = await mainBridge.request(WinAPI.cptDynamicUpdateFileInfo, {})

自定义bridge: vscode extension与tab页通信

vscode extension通过一个json文件，打开一个新的tab页面，tab页面展示json的图形化结构

通信方

• vscode.extension: vscode扩展代码执行环境
• panel.webview: vscode扩展的webview执行环境
• jsonViewer: 真正的json图形化展示页面，页面地址（http://localhost:9999）

希望实现jsonViewer与vscode.extension的bridge，代码如下

export const EXTENSION_PLAT = {
  vscode: 'vscode',
  jsonViewer: 'jsonViewer',
}

// vscode.extension: 收发消息通过panel.webview
import { WebviewPanel } from 'vscode'
import { BaseBridge } from '@yuhufe/browser-bridge'
export class VSCodePanelBridge extends BaseBridge {
  panel: WebviewPanel

  constructor({ panel }: { panel: WebviewPanel }) {
    super({ plat: EXTENSION_PLAT.vscode })
    this.panel = panel
    this.init()
  }

  init() {
    this.panel.webview.onDidReceiveMessage(message => {
      this.onReceiveMessage(message);
    })
  }

  async sendMessage(message: any) {
    await this.panel.webview.postMessage(message)
    return
  }
}

// panel.webview: 仅用来进行转发
window.addEventListener('message', event => {
  if (event.data?.target === 'vscode') {
    vscode.postMessage(event.data)
  }
  if (event.data?.target === 'jsonViewer') {
    iframe.contentWindow.postMessage(event.data, '*')
  }
})

// jsonViewer: 在iframe中，与panel.webview通信等同于IFrameBridge
import { IFrameBridge } from '@yuhufe/browser-bridge'
export const vscodeWebBridge = new IFrameBridge({ frameKey: EXTENSION_PLAT.jsonViewer });

之后vscodeWebBridge 与 vscodePanelBridge通信方式同上

项目地址

https://github.com/defghy/web-toolkits/tree/main/packages/wtool-chrome-bridge

完