在配置任何东西之前,我们需要了解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不会在其后面运行内容脚本。 但是,它们都将具有后台脚本。
CSS
您希望对网页(而不是Quasar应用程序)可用的任何样式都应包含在src-bex/css/content-css.css
中,因为该文件会自动注入到manifest.json
文件中。
WARNING
这必须是本地CSS,因为它不是通过SASS / Stylus预处理的。
钩子文件
在Quasar BEX中,将为您提供background-hook.js
、content-hook.js
和dom-hook.js
。 这些文件旨在使您能够访问桥接器,以弥合与BEX每一层通信的空白。 我们将在下一章节中更详细地探讨它们。