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

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

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

通信规则

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

并非所有BEX类型都具有内容脚本-只有在网页上下文中运行的BEX才会具有内容脚本。这是浏览器扩展通常的工作方式。这意味着，如果您要在内容脚本上添加事件的侦听器，并尝试从作为开发工具、选项页面或弹出窗口运行的Quasar BEX触发该事件，则无法正常工作。

如果要允许您的开发工具、弹出窗口或选项页面BEX与网页通信，则需要使用后台脚本作为代理。您可以通过以下方式做到这一点：

1. 在后台脚本上添加一个侦听器，该侦听器又发出另一个事件。
2. 将侦听器添加到在Web上下文中运行的Quasar App中，以侦听后台脚本引发的事件
3. 从开发工具、弹出窗口或选项页面将事件发送到后台脚本。

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

桥（Bridge）

桥（Bridge）是基于promise的事件系统，在BEX的所有部分之间共享，因此，您可以在Quasar App中监听事件，从其他部分发出事件，反之亦然。 这就是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)