Quasar CLI with Vite - @quasar/app-vite
后台脚本运行在 BEX 自身的上下文中，可以监听所有可用的浏览器扩展事件。
WARNING
在 Chrome 中使用 Manifest v3 时，后台脚本实际上是一个 Service Worker。目前 Firefox 的 Manifest v3 尚未采用这一机制。
注册后台脚本
/src-bex/manifest.json 是定义 BEX 的核心文件，后台脚本也在这里定义：
"chrome": {
"background": {
"service_worker": "background.js"
}
},
"firefox": {
"background": {
"scripts": [ "background.js" ]
}
}给 TS 开发者
后台脚本和内容脚本使用 .ts 扩展名。在 manifest.json 文件中也请使用该扩展名！例如：“background.ts”、“my-content-script.ts”。虽然浏览器厂商只支持 .js 扩展名，但 Quasar CLI 会自动转换文件扩展名。
案例分析
假设我们想监听浏览器中新标签页的打开事件，然后在 Quasar 应用中做出响应。首先，我们需要监听新标签页打开的事件，并发送一个事件通知 Quasar 应用：
/**
* 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) => {
if (bridge.portList.includes('app')) {
bridge.send({
event: 'bex.tab.updated',
to: 'app',
payload: { url: tab.url }
})
}
});然后在 Quasar 应用中，通过组件的生命周期钩子来监听这个事件：
import { useQuasar } from "quasar";
import { onBeforeUnmount } from "vue";
export default {
setup() {
const $q = useQuasar();
// 接收后台脚本发送的 URL 的函数
function doOnTabOpened({ payload }) {
console.log("Browser tab updated:", payload.url);
}
// 添加监听器
$q.bex.on("bex.tab.updated", doOnTabOpened);
// 别忘了清理
onBeforeUnmount(() => {
$q.bex.off("bex.tab.updated", doOnTabOpened);
});
return {};
},
};浏览器扩展 API 还提供了许多其他事件。请参考您目标浏览器和 manifest 版本的文档。