Quasar CLI with Vite - @quasar/app-vite
配置BEX

在配置任何东西之前,我们需要了解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的每个后台脚本将只有一个实例。
  • 内容脚本-在网页的上下文中运行。 运行扩展的每个选项卡上将有一个新的内容脚本实例。

TIP

给定内容脚本在网页上下文中运行,这意味着只有与网页交互的BEX才能使用内容脚本。 弹出窗口、选项和Devtools不会在其后面运行内容脚本。 但是,它们都将具有后台脚本

WARNING

Manifest v3中提供的服务工作者(service worker),只在Quasar CLI中用Vite实现。更多细节这里

CSS

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

WARNING

这必须是本地CSS,因为它不是通过SASS预处理的。