允许 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)