Quasar CLI with Webpack - @quasar/app-webpack
内容脚本运行在网页的上下文中。每个运行该扩展的标签页都会产生一个新的内容脚本实例。
通信 / 事件
你可以通过我们的 BEX Bridge 在 BEX 的各个部分（后台脚本、内容脚本和开发者工具/弹出窗口/选项页）之间进行通信。
注册内容脚本
/src-bex/manifest.json 是定义你的 BEX 的核心文件。你也需要在这里定义你的内容脚本：
"content_scripts": [
{
"matches": [ "<all_urls>" ],
"css": [ "assets/content.css" ],
"js": [ "my-content-script.ts" ]
}
]content_paste
面向 TS 开发者
你的后台脚本和内容脚本使用 .ts 扩展名。在 manifest.json 中也要使用该扩展名！例如：“background.ts”、“my-content-script.ts”。虽然浏览器厂商只支持 .js 扩展名，但 Quasar CLI 会自动转换文件扩展名。
案例分析
假设我们想在 Quasar 应用中响应按钮点击事件，并高亮底层网页上的某些文本，这可以通过内容脚本实现：
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
.bex-highlight {
background-color: red;
}content_paste
/**
* 导入下面的文件会初始化内容脚本。
*
* 注意事项：
* 不要移除下面的 import 语句。它是扩展正常工作所必需的。
* 如果你不需要 createBridge()，保留 "import '#q-app/bex/content'" 即可。
*/
import { createBridge } from "#q-app/bex/content";
// bridge 的使用是可选的。
const bridge = createBridge({ debug: false });
bridge.on("highlight.content", ({ payload }) => {
const el = document.querySelector(data.selector);
if (el !== null) {
el.classList.add("bex-highlight");
}
});
bridge
.connectToBackground()
.then(() => {
console.log("Connected to background");
})
.catch((err) => {
console.error("Failed to connect to background:", err);
});content_paste
内容脚本运行在一个隔离的环境中，这使得内容脚本可以修改其 JavaScript 环境，而不会与页面或其他内容脚本产生冲突。
隔离的环境不允许内容脚本、扩展和网页之间互相访问对方创建的变量或函数。这也赋予了内容脚本启用那些不应被网页访问的功能的能力。