Quasar CLI with Webpack - @quasar/app-webpack
src-bex/content-hooks.js 是一个标准的内容脚本，它能够访问网页的 DOM，因此你能够操纵该网页的内容。
此文件需要导出一个函数：
import { bexContent } from "quasar/wrappers";
export default bexContent((bridge) => {
//
});content_paste
该函数通过 Quasar BEX 构建链自动调用，并注入一个桥（bridge），该桥在 Quasar 应用和 BEX 的后台脚本之间共享。
例如，假设我们想对 Quasar 应用程序上的一个按钮做出反应，并在底层网页上突出显示一些文本，这将通过如下内容脚本来完成:
// Quasar App, /src
setup () {
const $q = useQuasar()
async function myButtonClickHandler () {
await $q.bex.send('highlight.content', { selector: '.some-class' })
$q.notify('Text has been highlighted')
}
return { myButtonClickHandler }
}content_paste
/* src-bex/assets/content-css.css */
.bex-highlight {
background-color: red;
}content_paste
// src-bex/content-script.js:
import { bexContent } from "quasar/wrappers";
export default bexContent(function (bridge) {
bridge.on("highlight.content.event", (event) => {
// 找到一个带有 .some-class 类名的元素，并给其添加高亮 CSS 类
const el = document.querySelector(".some-class");
if (el !== null) {
el.classList.add("bex-highlight");
}
// 不是必需的，但是 resolve 我们的 promise。
bridge.send(event.responseKey);
});
});content_paste
内容脚本存在于一个独立的世界,中，允许内容脚本对其 JavaScript 环境进行更改，而不会与页面或其他内容脚本发生冲突。
独立的世界不允许内容脚本、插件和 Web 页面访问其他人创建的任何变量或函数。这也使内容脚本能够启用网页不应该访问的功能。
这就是 DOM 脚本 的用武之地。