在进行任何配置之前，我们需要了解 BEX 的结构。一个 BEX 可以是以下之一（或更多）

1. 在浏览器中自己的选项卡中运行
2. 在 开发者工具 窗口中运行。
3. 在 弹出窗口 窗口中运行。
4. 作为 选项 窗口运行。
5. 在网页的上下文中运行（注入到网站中）

您不需要为每个 BEX 类型创建新的 Quasar 应用，因为单个 Quasar 应用可以在上述 所有 实例中运行。您可以在 类型部分 了解有关这些内容的更多信息。

UI 在 /src 中

如果您想修改 /src 中 UI 的 Vite 配置

module.exports = function (ctx) {
  return {
    build: {
      extendViteConf (viteConf) {
        if (ctx.mode.bex) {
          // do something with ViteConf
        }
      }
    }
  }
}

当您构建（或开发）浏览器扩展时，UI 文件将被注入并作为 www 文件夹可用。

manifest.json

您 BEX 最重要的配置文件是 /src-bex/manifest.json。建议您在开始项目之前 阅读有关此文件的更多信息。

当您第一次添加 BEX 模式时，系统会询问您喜欢哪种浏览器扩展清单版本

? What version of manifest would you like? (Use arrow keys)
❯ Manifest v2 (works with both Chrome and FF)
  Manifest v3 (works with Chrome only currently)

后台和内容脚本

每个 BEX 背后都有一个 内容脚本 和一个后台脚本/服务工作者。在编写第一个 BEX 之前，了解它们的含义是一个好主意。

总结

• 后台脚本 - 在 BEX 本身的上下文中运行，可以监听所有可用的浏览器扩展事件。每个 BEX 仅 会有一个后台脚本实例。
• 内容脚本 - 在网页的上下文中运行。每个运行扩展的选项卡都会有一个新的内容脚本实例。

CSS

您希望提供给网页（而不是 Quasar 应用）的任何样式都应包含在 src-bex/assets/content.css 中，因为此文件会自动注入到 manifest.json 文件中。