后台钩子

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

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

export default function attachBackgroundHooks (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中,我们将在组件生命周期挂钩之一中监听此事件,如下所示:

export default {
  methods: {
    // Our function which receives the URL sent by the background script.
    doOnTabOpened (url) {
      console.log('New Browser Tab Openend: ', url)
    }
  },

  created () {
    // Add our listener
    this.$q.bex.on('bex.tab.opened', this.doOnTabOpened)
  },

  beforeDestroy () {
    // Don't forget to clean it up
    this.$q.bex.off('bex.tab.opened', this.doOnTabOpened)
  }
}

浏览器扩展后台脚本有很多可用的事件-如果您要在此领域中做某事,Google是您的朋友。

如果要以某种方式修改基础网页内容怎么办? 那就是我们要使用content-hooks.js的地方。 让我们在下一部分中进行讨论。