在配置任何东西之前，我们需要了解BEX的结构。 BEX可以是以下一项（或多项）：
- 在浏览器自己的选项卡中运行
- 在Developer Tools窗口中运行。
- 在Popup窗口中运行。
- 作为Options窗口运行。
- 在网页上下文中运行（注入到网站中）
您不需要上述每种BEX类型的新Quasar应用，因为单个Quasar应用可以在上述所有实例中运行。 您可以在类型章节中找到有关这些内容的更多信息。
Manifest.json
BEX上最重要的配置文件是/src-bex/manifest.json。 建议您在开始项目之前阅读此文件。
创建Quasar BEX时，清单文件已配置为添加运行BEX所需的基本属性。 这包括默认的后台脚本、内容脚本和一个css文件，该文件被插入运行BEX的网页的上下文中。
TIP
请注意，manifest.json文件在构建时已修改，以便自动注入所需的javascript文件。
后台和内容脚本
每个BEX的背后都有一个内容脚本和一个后台脚本。 在编写您的第一个BEX之前，最好先了解所有这些内容。
综上所述：
- 后台脚本-在BEX本身的上下文中运行，并且可以侦听所有可用的浏览器扩展事件。 每个BEX的每个后台脚本将只有一个实例。
- 内容脚本-在网页的上下文中运行。 运行扩展的每个选项卡上将有一个新的内容脚本实例。
TIP
给定内容脚本在网页上下文中运行，这意味着只有与网页交互的BEX才能使用内容脚本。 弹出窗口、选项和Devtools不会在其后面运行内容脚本。 但是，它们都将具有后台脚本。
WARNING
如果你想使用Manifest v3，那么你将需要使用Quasar CLI with Vite，而不是Quasar CLI with Webpack。更多细节在这里。
CSS
您希望对网页（而不是Quasar应用程序）可用的任何样式都应包含在src-bex/css/content-css.css中，因为该文件会自动注入到manifest.json文件中。
WARNING
这必须是本地CSS，因为它不是通过SASS预处理的。
钩子文件
在Quasar BEX中，将为您提供background-hook.js、content-hook.js和dom-hook.js。 这些文件旨在使您能够访问桥接器，以弥合与BEX每一层通信的空白。 我们将在下一章节中更详细地探讨它们。