BEX 类型 | Quasar 框架

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 工具栏（从而允许与页面的其余部分交互）。

我们可以随时从 Quasar 应用中调用此事件，只要我们知道我们正在打开抽屉并因此更改 IFrame 的高度以允许整个抽屉可见。

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. 网页

新标签页

开发者工具、选项和弹出窗口

网页