BEX 類型 | Quasar Framework

Quasar CLI 搭配 Webpack - @quasar/app-webpack

BEX 類型

如先前討論，Quasar 可以處理瀏覽器擴充程式可能存在的各種位置，即新分頁、網頁、開發人員工具選項或彈出視窗。您不需要為這些位置的每一個都建立一個單獨的 Quasar 應用程式。您可以透過路由器進行一些方便的操作。

新分頁

這是 BEX 預設的執行方式。透過點擊瀏覽器中的 BEX 圖示即可存取。Quasar 應用程式將在該新的（空白）分頁中執行。

這些都遵循相同的模式，設定一個路由並配置 manifest.json 檔案，以便在嘗試顯示其中一種類型時查看該路由。例如

const routes = [
  { path: '/options', component: () => import('pages/OptionsPage.vue') },
  { path: '/popup', component: () => import('pages/PopupPage.vue') },
  { path: '/devtools', component: () => import('pages/DevToolsPage.vue') }
]

您可以使用以下內容配置您的 manifest.json 檔案，以便從該路由載入選項頁面

{
  "name": "My extension",
  ...
  "options_page": "www/index.html#/options", // Options Page
  ...
  "browser_action": {
    "default_popup": "www/index.html#/popup" // Popup Page
  },
  ...
  "devtools_page": "www/index.html#/devtools", // Dev Tools
}

網頁

這才是真正強大的地方。透過一點巧思，我們可以將 Quasar 應用程式注入到網頁中，並將其用作覆蓋層，使其看起來像是我們的 Quasar 應用程式是頁面體驗的一部分。

以下是如何實現此目的的簡要概述

src-bex/js/content-hooks.js

這裡的想法是建立一個 IFrame 並將我們的 Quasar 應用程式新增到其中，然後將其注入到頁面中。

假設我們的 Quasar 應用程式可能需要佔用視窗的完整高度（因此停止與底層頁面的任何互動），我們有一個事件來處理設定 IFrame 的高度。預設情況下，IFrame 的高度剛好足以顯示 Quasar 工具列（並進而允許與頁面的其餘部分互動）。

每當我們知道自己要開啟抽屜，從而改變 IFrame 的高度以允許整個抽屜可見時，我們都可以從 Quasar 應用程式中呼叫此事件。

import { bexContent } from 'quasar/wrappers'

const
  iFrame = document.createElement('iframe'),
  defaultFrameHeight = '62px'

/**
 * Set the height of our iFrame housing our BEX
 * @param height
 */
const setIFrameHeight = height => {
  iFrame.height = height
}

/**
 * Reset the iFrame to its default height e.g The height of the top bar.
 */
const resetIFrameHeight = () => {
  setIFrameHeight(defaultFrameHeight)
}


/**
 * The code below will get everything going. Initialize the iFrame with defaults and add it to the page.
 * @type {string}
 */
iFrame.id = 'bex-app-iframe'
iFrame.width = '100%'
resetIFrameHeight()

// Assign some styling so it looks seamless
Object.assign(iFrame.style, {
  position: 'fixed',
  top: '0',
  right: '0',
  bottom: '0',
  left: '0',
  border: '0',
  zIndex: '9999999', // Make sure it's on top
  overflow: 'visible'
})

;(function () {
  // When the page loads, insert our browser extension app.
  iFrame.src = chrome.runtime.getURL('www/index.html')
  document.body.prepend(iFrame)
})()

export default bexContent((bridge) => {
  /**
   * When the drawer is toggled set the iFrame height to take the whole page.
   * Reset when the drawer is closed.
   */
  bridge.on('wb.drawer.toggle', ({ data, respond }) => {
    if (data.open) {
      setIFrameHeight('100%')
    } else {
      resetIFrameHeight()
    }
    respond()
  })
})

src-bex/css/content-css.css

在我們文件的頂部新增一個邊距，這樣我們的 Quasar 工具列就不會與實際頁面內容重疊。

.target-some-header-class {
  margin-top: 62px;
}

Quasar 應用程式 (/src)

然後在我們的 Quasar 應用程式 (/src) 中，我們有一個函數可以切換抽屜並向內容腳本發送一個事件，告訴它調整 IFrame 的大小，從而允許我們的整個應用程式可見

<q-drawer :model-value="drawerIsOpen" @update:model-value="drawerToggled">
  Some Content
</q-drawer>

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

setup () {
  const $q = useQuasar()
  const drawerIsOpen = ref(true)

  async function drawerToggled () {
    await $q.bex.send('wb.drawer.toggle', {
      open: drawerIsOpen.value // So it knows to make it bigger / smaller
    })

    // Only set this once the promise has resolved so we can see the entire slide animation.
    drawerIsOpen.value = !drawerIsOpen.value
  }

  return { drawerToggled }
}

現在您有一個在網頁中執行的 Quasar 應用程式。您現在可以從 Quasar 應用程式觸發其他事件，內容腳本可以偵聽這些事件並與底層頁面互動。

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

1. 簡介

2. 新分頁

4. 網頁

新分頁

開發人員工具、選項和彈出視窗

網頁