背景钩子 | Quasar 框架

Quasar CLI 与 Webpack - @quasar/app-webpack

后台钩子

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。

例如，假设我们想要监听 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()

    // 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。我们将在下一节中介绍它。

发现错误了吗？在浏览器中编辑此页面