允許 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。在其他區域，橋接器透過各自 Hook 檔案中的 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)