在配置任何东西之前，我们需要了解BEX的结构。 BEX可以是以下一项（或多项）：

1. 在浏览器自己的选项卡中运行
2. 在Developer Tools窗口中运行。
3. 在Popup窗口中运行。
4. 作为Options窗口运行。
5. 在网页上下文中运行（注入到网站中）

您不需要上述每种BEX类型的新Quasar应用，因为单个Quasar应用可以在上述所有实例中运行。 您可以在类型章节中找到有关这些内容的更多信息。

UI in /src

Should you want to tamper with the Vite config for UI in /src:

// quasar.config.js
module.exports = function (ctx) {
  return {
    build: {
      extendViteConf (viteConf) {
        if (ctx.mode.cordova) {
          // 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的背后都有一个内容脚本和一个后台脚本/service-worker。 在编写您的第一个BEX之前，最好先了解所有这些内容。

综上所述：

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

CSS

任何你想提供给你的网页（而不是你的Quasar应用程序）的样式应该包含在src-bex/assets/content.css中，因为这个文件会自动注入manifest.json文件。