背景 Hook | Quasar Framework

Quasar CLI with Webpack - @quasar/app-webpack

背景 Hooks

src-bex/js/background-hooks.js 本質上是一個標準的背景腳本，您可以隨意使用。背景腳本可以與您的 BEX 下運行的所有網頁、開發人員工具、選項和彈出視窗進行通訊。

此檔案的額外好處是這個函式：

import { bexBackground } from 'quasar/wrappers'

export default bexBackground((bridge, activeConnections) => {
  //
})

此函式透過 Quasar BEX 建置鏈自動呼叫，並注入一個橋接器，該橋接器在 BEX 的所有部分之間共享，這表示您可以與 BEX 的任何部分進行通訊。

bridge 參數是用於通訊的橋接器。 activeConnections 參數提供透過橋接器註冊的所有 BEX 連線的地圖，即同一 Quasar 應用程式使用的所有網頁、選項、彈出視窗和開發人員工具 BEX。

例如，假設我們想要監聽網頁瀏覽器中新分頁的開啟，然後在我們的 Quasar 應用程式中對其做出反應。首先，我們需要監聽新分頁的開啟並發出一個新事件，以告知 Quasar 應用程式已發生此事件

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  bridge.send('bex.tab.opened', { url: tab.url })
})

然後在我們的 Quasar 應用程式中，我們會在元件生命週期鉤子之一中監聽此事件，如下所示：

import { useQuasar } from 'quasar'
import { onBeforeUnmount } from 'vue'

export default {
  setup () {
    const $q = useQuasar()

    // Our function which receives the URL sent by the background script.
    function doOnTabOpened (url) {
      console.log('New Browser Tab Openend: ', url)
    }

    // Add our listener
    $q.bex.on('bex.tab.opened', doOnTabOpened)

    // Don't forget to clean it up
    onBeforeUnmount(() => {
      $q.bex.off('bex.tab.opened', doOnTabOpened)
    })

    return {}
  }
}

瀏覽器擴充功能背景腳本可以使用各種事件 - 如果您嘗試在此領域中執行某些操作，Google 是您的好朋友。

如果您想以某種方式修改底層網頁內容怎麼辦？這就是我們使用 content-hooks.js 的地方。讓我們在下一節中看看這個。

發現錯誤了嗎？在瀏覽器中編輯此頁面