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
)。让我们在下一节看看这个问题。