在配置任何内容之前，我们需要了解 BEX 的结构。BEX 可以是以下一项（或多项）：
不需要为每种类型都创建一个新的 Quasar 应用，因为一个 Quasar 应用可以运行在上述所有场景中。更多信息请参考类型部分。
quasar.config 文件
// 如果你想修改默认的文件路径
sourceFiles: {
bexManifestFile?: 'src-bex/manifest.json',
}bex: {
/**
* 不在 bex manifest 中但你想要编译并在浏览器插件中使用的额外脚本（js/ts）列表。
* 也许你想动态加载它们？
*
* 列表中的每个条目应该是相对于 /src-bex/ 的文件名
*
* @example [ 'my-script.ts', 'sub-folder/my-other-script.js' ]
*/
extraScripts?: string[];
/**
* 扩展用于 bex 脚本（background、content scripts、dom script）
* 的 Esbuild 配置
*/
extendBexScriptsConf?: (config: EsbuildConfiguration) => void;
/**
* 如果你需要动态修改浏览器插件的 manifest 文件
* （/src-bex/manifest.json），可以使用此方法。
*/
extendBexManifestJson?: (json: object) => void;
}/src 中的 UI
如果需要修改 /src 中 UI 代码的 Vite 配置：
export default defineConfig((ctx) => {
return {
build: {
extendViteConf(viteConf) {
if (ctx.mode.bex) {
// 修改 viteConf
// 或者返回一个对象来与当前的 viteConf 进行深度合并
}
},
},
};
});当你构建（或开发）浏览器插件时，UI 文件将被注入并作为 www 文件夹提供。
Manifest.json
BEX 最重要的配置文件是 /src-bex/manifest.json。建议在开始项目之前先阅读该文件的说明文档。
当你第一次添加 BEX 模式时，你会注意到 manifest 文件包含三个根属性：all、chrome 和 firefox。Chrome 的 manifest 由 all + chrome 深度合并生成，而 Firefox 的则由 all + firefox 生成。你甚至可以为每个目标浏览器设置不同的 manifest 版本：
{
"all": {
"manifest_version": 3,
"icons": {
"16": "icons/icon-16x16.png",
"48": "icons/icon-48x48.png",
"128": "icons/icon-128x128.png"
},
"permissions": ["storage", "tabs"],
"host_permissions": ["*://*/*"],
"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self';"
},
"web_accessible_resources": [
{
"resources": ["*"],
"matches": ["*://*/*"]
}
],
"action": {
"default_popup": "www/index.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"css": ["assets/content.css"],
"js": ["my-content-script.ts"]
}
]
},
"chrome": {
"background": {
"service_worker": "background.ts"
}
},
"firefox": {
"background": {
"scripts": ["background.ts"]
}
}
}给 TS 开发者的提示
你的 background 和 content 脚本使用 .ts 扩展名时，在 manifest.json 文件中也要使用该扩展名！例如：“background.ts”、“my-content-script.ts”。虽然浏览器厂商只支持 .js 扩展名，但 Quasar CLI 会自动转换文件扩展名。
后台脚本和内容脚本
每个 BEX 的背后都有内容脚本和后台脚本（manifest v2）/ service-worker（manifest v3+）。建议在编写第一个 BEX 之前先了解它们各自的作用。
概述：
- 后台脚本 - 运行在 BEX 自身的上下文中，可以监听所有可用的浏览器插件事件。
- 内容脚本 - 在网页的上下文中运行。每个运行了该插件的选项卡都会有一个新的内容脚本实例。
提示
由于内容脚本运行在网页上下文中，这意味着只有与网页交互的 BEX 才能使用内容脚本。弹窗、选项页面和开发者工具中的 BEX 不会有内容脚本。不过，它们都会有后台脚本。
警告
在 Chrome 中使用 Manifest v3 时，后台脚本实际上是一个 Service Worker。目前 Firefox 的 Manifest v3 还不是这样（但以后可能会）。
CSS
任何你想在网页（而不是你的 Quasar 应用）中使用的样式都应作为文件放在 src-bex/assets/<name>.css 中。添加此类文件后，请确保在 /src-bex/manifest.json 中对应的 content scripts 配置里引用它：
// 示例：链接 /src-bex/assets/content.css
"content_scripts": [
{
"matches": [ "<all_urls>" ],
"css": [ "assets/content.css" ],
"js": [ /*...*/ ]
}
]警告
必须使用原生 CSS，因为它不会经过 Sass 预处理。
动态/其他脚本
如果你需要为 BEX 动态加载或编译其他脚本，可以通过编辑 quasar.config 文件来添加：
bex: {
/**
* 不在 bex manifest 中但你想要编译并在浏览器插件中使用的额外脚本（js/ts）列表。
* 也许你想动态加载它们？
*
* 列表中的每个条目应该是相对于 /src-bex/ 的文件名
*
* @example [ 'my-script.ts', 'sub-folder/my-other-script.js' ]
*/
extraScripts?: string[];
}