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