Quasar CLI with Webpack - @quasar/app-webpack

后台脚本

src-bex/background-hooks.js 是一个标准的后台脚本,它可以与 BEX 的所有部分进行通信。

此文件需要导出一个函数:

import { bexBackground } from 'quasar/wrappers'

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

该函数通过 Quasar BEX 构建链自动调用,并注入一个桥(bridge),该桥在 BEX 的所有部分之间共享,这意味着您可以与 BEX 的任何部分进行通信。

bridge 参数是用于通信的桥梁。activeConnections 参数提供了通过桥注册的所有 BEX 连接的数组,即同一个 Quasar 应用使用的所有 BEX 部分(网页,开发者工具、右键菜单选项页或弹出式菜单)。

例如,假设我们想在 web 浏览器中监听正在打开的新选项卡,然后在 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()

    // 接收后台脚本发送的 URL 的函数。
    function doOnTabOpened (url) {
      console.log('New Browser Tab Openend: ', url)
    }

    // 监听事件
    $q.bex.on('bex.tab.opened', doOnTabOpened)

    // 不要忘记清除事件
    onBeforeUnmount(() => {
      $q.bex.off('bex.tab.opened', doOnTabOpened)
    })

    return {}
  }
}

浏览器插件的后台脚本有各种各样的事件,如果你想在这方面做点什么,谷歌是你的朋友。

如果您想以某种方式修改基础网页内容,该怎么办?这就是我们需要使用 内容脚本 (例如 my-content-scripts.js)的地方。