讓 Quasar 應用程式能與 BEX 各個部分溝通至關重要。Quasar 使用 bridge 來彌合這個差距。

BEX 中有 4 個區域需要通訊層

1. Quasar 應用程式本身 - 這適用於所有類型的 BEX，例如彈出視窗 (Popup)、選項頁面 (Options Page)、開發人員工具 (Dev Tools) 或網頁 (Web Page)
2. 背景腳本
3. 內容腳本
4. BEX 正在運行的網頁

通訊規則

關於 Quasar 中的通訊橋樑，有一個基本規則需要理解。

並非所有 BEX 類型都有內容腳本 - 只有在網頁環境中運行的 BEX 才有內容腳本。這是一般瀏覽器擴充功能的工作方式。這表示如果您在內容腳本上新增事件監聽器，並嘗試從作為開發人員工具 (Dev Tools)、選項頁面 (Options Page) 或彈出視窗 (Popup) 運行的 Quasar BEX 觸發它 - **它將無法運作**。

如果您想讓您的開發人員工具 (Dev Tools)、彈出視窗 (Popup) 或選項頁面 (Options Page) BEX 與網頁通訊，您需要使用背景腳本作為代理。您可以透過以下方式做到這一點：

1. 在背景腳本上新增一個監聽器，然後它會發出另一個事件。
2. 在網頁環境中運行的 Quasar 應用程式中新增一個監聽器，以監聽背景腳本發出的事件
3. 從您的開發人員工具、彈出視窗或選項頁面將事件發送到您的背景腳本。

一旦您理解這個概念，BEX 與各個部分之間的溝通方式就沒有限制了。

橋樑 (Bridge)

橋樑是一個基於 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 resolve，我們需要呼叫 respond。

清理您的監聽器

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