为什么要捐赠
API 资源管理器
升级指南
NEW!
quasar.config 文件
转换为 CLI with Webpack
浏览器兼容性
支持 TypeScript
目录结构
命令列表
CSS 预处理器
路由
延迟加载 - 代码分割
处理资产
启动文件
预取功能
API 代理
处理 Webpack
处理 process.env
使用 Pinia 进行状态管理
使用 Vuex 进行状态管理
代码检查器
测试和审计
开发移动应用程序
Ajax 请求
将开发服务器开放到公网
Quasar CLI with Webpack - @quasar/app-webpack
配置 BEX

在进行任何配置之前,我们需要了解 BEX 的结构。BEX 可以是以下一项(或多项):

  1. 在浏览器中以独立标签运行
  2. 开发者工具 窗口中运行。
  3. 弹出窗口 窗口中运行。
  4. 选项 窗口运行。
  5. 在网页的上下文中运行(注入到网站中)

您无需为每种类型的 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.jscontent-hook.jsdom-hook.js。这些文件旨在让您访问一个桥梁,该桥梁可以弥合 BEX 各个层级之间的通信差距。我们将在 下一节 中更详细地探讨它们。