Quasar CLI with Vite - @quasar/app-vite
背景脚本

src-bex/background-script.js本质上是一个标准的背景脚本,欢迎你这样使用它。背景脚本可以与所有在你的BEX下运行的网页、开发工具、选项和弹出窗口沟通。

这个文件的额外好处是这个功能:

import { bexBackground } from 'quasar/wrappers'

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

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

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

例如,假设我们想监听在网页浏览器中打开的新标签,然后在我们的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 {}
  }
}

浏览器扩展后台脚本有各种各样的事件可供选择–如果你想在这个领域做一些事情,谷歌是你的朋友。

如果你想以某种方式修改底层的网页内容呢?这时我们就会使用内容脚本(例如,my-content-scripts.js)。让我们在下一节看看这个问题。