允许 Quasar 应用程序与 BEX 的各个部分进行通信至关重要。Quasar 使用 bridge 来弥合这一差距。

BEX 中有 4 个区域需要通信层

1. Quasar 应用程序本身 - 这适用于所有类型的 BEX，例如弹出窗口、选项页面、开发者工具或网页
2. 后台脚本
3. 内容脚本
4. BEX 运行所在的网页

通信规则

理解 Quasar 中的通信桥梁有一个基本规则。

并非所有 BEX 类型都有内容脚本 - 只有在网页上下文中运行的 BEX 才有内容脚本。这是浏览器扩展的一般工作原理。这意味着如果你正在为内容脚本上的事件添加监听器，并尝试从作为开发者工具、选项页面或弹出窗口运行的 Quasar BEX 触发它 - 它将无法工作。

如果你想允许你的开发者工具、弹出窗口或选项页面 BEX 与网页通信，你需要使用后台脚本作为代理。你可以通过以下步骤完成：

1. 在后台脚本上添加监听器，它会依次发出另一个事件。
2. 在网页上下文运行的 Quasar 应用程序中添加一个监听器，监听后台脚本正在引发的事件。
3. 从你的开发者工具、弹出窗口或选项页面向你的后台脚本发出事件。

一旦你掌握了这个概念，BEX 如何与每个部分进行通信将没有限制。

桥梁

桥梁是一个基于 promise 的事件系统，它在 BEX 的所有部分之间共享，因此它允许你在 Quasar 应用程序中监听事件，从其他部分发出事件，反之亦然。这就是 Quasar BEX 模式强大功能的来源。

要在 Quasar 应用程序中访问桥梁，可以使用 $q.bex。在其他区域，桥梁通过各自钩子文件中的 bridge 参数提供。

让我们看看它是如何工作的。

触发事件并等待响应

const { data } = await bridge.send('some.event', { someKey: 'aValue' })
console.log('Some response from the other side', data)

监听事件并发送响应

你可以做出响应，让调用者知道操作已完成。你还可以选择返回一些数据。

bridge.on('some.event', ({ data, respond }) => {
  console.log('Event receieved, responding...')
  respond(data.someKey + ' hey!')
})

Quasar 桥梁在幕后进行了一些工作，将正常的基于事件的通信转换为 promise，因此，为了让 promise 解析，我们需要调用 respond。

清理你的监听器

bridge.off('some.event', this.someFunction)