Quasar CLI with Webpack - @quasar/app-webpack
后台脚本运行在 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" ]
}
}content_paste
面向 TS 开发者
你的后台脚本和内容脚本使用 .ts 扩展名。在 manifest.json 中也要使用该扩展名！例如：“background.ts”、“my-content-script.ts”。虽然浏览器厂商只支持 .js 扩展名，但 Quasar CLI 会自动转换文件扩展名。
案例分析
假设我们想监听浏览器中新标签页的打开事件，然后在 Quasar 应用中做出响应。首先，我们需要监听新标签页的打开并发出事件通知 Quasar 应用：
/**
* 导入下面的文件会初始化扩展的后台环境。
*
* 注意事项：
* 1. 不要移除下面的 import 语句。它是扩展正常工作所必需的。
* 如果你不需要 createBridge()，保留 "import '#q-app/bex/background'" 即可。
* 2. 不要在多个后台脚本中导入此文件。只能在一个中导入！
* 3. 在你的后台 Service Worker 中导入（如果目标浏览器支持的话）。
*/
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 });
});content_paste
然后在 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 {};
},
};content_paste
浏览器扩展后台脚本可以使用种类繁多的事件 - 如果你想在这方面实现什么功能，善用搜索引擎即可。