Quasar CLI with Webpack - @quasar/app-webpack
后台脚本
src-bex/background-hooks.js
是一个标准的后台脚本,它可以与 BEX 的所有部分进行通信。
此文件需要导出一个函数:
import { bexBackground } from 'quasar/wrappers'
export default bexBackground((bridge, activeConnections) => {
//
})
该函数通过 Quasar BEX 构建链自动调用,并注入一个桥(bridge),该桥在 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()
// 接收后台脚本发送的 URL 的函数。
function doOnTabOpened (url) {
console.log('New Browser Tab Openend: ', url)
}
// 监听事件
$q.bex.on('bex.tab.opened', doOnTabOpened)
// 不要忘记清除事件
onBeforeUnmount(() => {
$q.bex.off('bex.tab.opened', doOnTabOpened)
})
return {}
}
}
浏览器插件的后台脚本有各种各样的事件,如果你想在这方面做点什么,谷歌是你的朋友。
如果您想以某种方式修改基础网页内容,该怎么办?这就是我们需要使用 内容脚本 (例如 my-content-scripts.js
)的地方。