后台脚本 | Quasar 框架

使用 Vite 的 Quasar CLI - @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）通过桥梁注册的所有映射。

例如，假设我们想要监听 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 是您的朋友。

如果要以某种方式修改底层网页内容怎么办？这就是我们使用内容脚本（例如 my-content-scripts.js）的地方。让我们在下一节中看看它。

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