Quasar CLI with Webpack - @quasar/app-webpack
后台钩子

src-bex/js/background-hooks.js本质上是标准的后台脚本,欢迎您使用它。 后台脚本可以与BEX下运行的所有Web页面、开发工具、选项和弹出窗口进行通信。

此文件的附加好处是此功能:

import { bexBackground } from 'quasar/wrappers'

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

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

bridge参数是用于通信的桥梁。activeConnections参数提供了通过桥接器注册的所有BEX连接的映射,即同一Quasar应用程序使用的所有网页,选项,弹出窗口和开发工具BEX。

例如,假设我们要侦听在网络浏览器中打开的新标签,然后在Quasar App中对其做出反应。 首先,我们需要侦听正在打开的新选项卡,并发出一个新事件来告诉Quasar App这已经发生了:

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

然后,在Quasar App中,我们将在组件生命周期挂钩之一中监听此事件,如下所示:

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的地方。 让我们在下一部分中进行讨论。