在进行任何配置之前,我们需要了解 BEX 的结构。BEX 可以是以下一项(或多项):
您无需为每种类型的 BEX 创建一个新的 Quasar 应用,因为单个 Quasar 应用可以在以上所有实例中运行。您可以在 类型部分 了解有关这些实例的更多信息。
Manifest.json
您 BEX 最重要的配置文件是 /src-bex/manifest.json
。建议您在开始项目之前 阅读有关此文件的更多信息。
当您创建 Quasar BEX 时,manifest 文件已经配置为添加运行 BEX 所需的基本属性。这包括默认的后台脚本、内容脚本和一个 CSS 文件,该文件会注入到 BEX 运行的网页上下文中。
提示
请注意,manifest.json 文件在构建时会修改,以便自动注入所需的 JavaScript 文件。
后台和内容脚本
每个 BEX 的背后都有一个 内容脚本 和一个 后台脚本。在编写第一个 BEX 之前,了解每个脚本的作用是一个好主意。
总结
- 后台脚本 - 在 BEX 本身上下文中运行,可以监听所有可用的浏览器扩展事件。每个 BEX 只有一个后台脚本实例。
- 内容脚本 - 在网页上下文中运行。每个运行扩展的标签都会有一个新的内容脚本实例。
提示
鉴于内容脚本在网页上下文中运行,这意味着只有与网页交互的 BEX 才能使用内容脚本。弹出窗口、选项和开发者工具不会在它们背后运行内容脚本。但是,它们都会有一个后台脚本。
警告
如果您想使用 Manifest v3,则需要使用 Quasar CLI with Vite 而不是 Quasar CLI with Webpack。更多细节 请查看这里。
CSS
您希望提供给网页(而不是 Quasar 应用)的任何样式都应包含在 src-bex/css/content-css.css
中,因为该文件会自动注入到 manifest.json
文件中。
警告
这必须是原生 CSS,因为它不会通过 Sass 预处理。
Hook 文件
在 Quasar BEX 中,您会得到 background-hook.js
、content-hook.js
和 dom-hook.js
。这些文件旨在让您访问一个桥梁,该桥梁可以弥合 BEX 各个层级之间的通信差距。我们将在 下一节 中更详细地探讨它们。