Quasar CLI with Webpack - @quasar/app-webpack
src-bex/background-hooks.js 是一个标准的后台脚本，它可以与 BEX 的所有部分进行通信。
此文件需要导出一个函数：
import { bexBackground } from "quasar/wrappers";
export default bexBackground((bridge, activeConnections) => {
//
});content_paste
该函数通过 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 });
});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
浏览器插件的后台脚本有各种各样的事件，如果你想在这方面做点什么，谷歌是你的朋友。
如果您想以某种方式修改基础网页内容，该怎么办？这就是我们需要使用 内容脚本 （例如 my-content-scripts.js）的地方。