Before we can configure anything, we need to understand how the BEX is structured. A BEX can be one (or more) of the following:

1. Runs in its own tab in the browser
2. Runs in the Developer Tools window.
3. Runs in a Popup window.
4. Runs as Options window.
5. Runs in the context of a web page (injected into a website)

You do not need a new Quasar App per BEX type above as a single Quasar Application can run in all of the instances above. You can find out more about these in the types section.

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
        }
      }
    }
  }
}

The UI files will be injected and available as www folder when you build (or develop) the browser extension.

Manifest.json

The most important config file for your BEX is /src-bex/manifest.json. It is recommended that you read up on this file before starting your project.

When you first add the BEX mode, you will get asked which Browser Extension Manifest version you like:

? 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)

Background And Content Scripts

Behind every BEX is a content script and a background script / service-worker. It’s a good idea to understand what each of these are before writing your first BEX.

In summary:

• Background Script - runs in the context of the BEX itself and can listen to all available browser extension events. There will only ever be one instance of each background script per BEX.
• Content Script - runs in the context of the web page. There will be a new content script instance per tab running the extension.

CSS

Any styles you want to be made available to your web page (not your Quasar App) should be included in src-bex/assets/content.css as this file ia automatically injected into the manifest.json file.