后台脚本在 BEX 本身的上下文中运行，并且可以监听所有可用的浏览器扩展事件。
¥The background script runs in the context of the BEX itself and can listen to all available browser extension events.
警告
在 Chrome 中，使用 Manifest v3 时，你的后台脚本实际上是一个 Service Worker。目前，这不适用于带有 Manifest v3 的 Firefox。
¥In Chrome with Manifest v3 your background script is actually a Service Worker. This does not currently apply to Firefox with Manifest v3 (yet).
注册后台脚本(Registering a background script)
¥Registering a background script
你的 /src-bex/manifest.json 是定义 BEX 的核心。你还可以在此处定义后台脚本：
¥Your /src-bex/manifest.json is the central point that defines your BEX. This is the place where you also define your background script(s):
"chrome": {
"background": {
"service_worker": "background.js"
}
},
"firefox": {
"background": {
"scripts": [ "background.js" ]
}
}面向 TS 开发者
你的背景和内容脚本都带有 .ts 扩展名。在 manifest.json 文件中也使用该扩展名！示例：“background.ts”, “my-content-script.ts”.虽然浏览器供应商仅支持 .js 扩展名，但 Quasar CLI 会自动转换文件扩展名。
¥Your background and content scripts have the .ts extension. Use that extension in the manifest.json file as well! Examples: “background.ts”, “my-content-script.ts”. While the browser vendors do support only the .js extension, Quasar CLI will convert the file extensions automatically.
案例研究(Case study)
¥Case study
假设我们想要监听在 Web 浏览器中打开的新标签页，然后在 Quasar 应用中对其进行响应。首先，我们需要监听新标签页的打开情况，并发出一个新事件来告知 Quasar 应用已打开新标签页：
¥Let’s say we want to listen for a new tab being opened in the web browser and then react to it in our Quasar App. First, we’d need to listen for the new tab being opened and emit a new event to tell the Quasar App this has happened:
/**
* Importing the file below initializes the extension background.
* * Warnings:
* 1. Do NOT remove the import statement below. It is required for the extension to work.
* If you don't need createBridge(), leave it as "import '#q-app/bex/background'".
* 2. Do NOT import this file in multiple background scripts. Only in one!
* 3. Import it in your background service worker (if available for your target browser).
*/
import { createBridge } from '#q-app/bex/background'
const bridge = createBridge({ debug: false })
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
bridge.send('bex.tab.opened', { url: tab.url })
})然后，在我们的 Quasar 应用中，我们会在组件生命周期钩子中监听这一点，如下所示：
¥Then in our Quasar App, we’d listen for this in one of our component lifecycle hooks, like so:
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 是你的好朋友。
¥There are wide variety of events available to the browser extension background script - Google is your friend if you’re trying to do something in this area.