Preparation for BEX | Quasar Framework

Quasar CLI with Webpack - @quasar/app-webpack

Preparation for BEX

The difference between building a SPA, Mobile App, Electron App, BEX or SSR is simply determined by the “mode” parameter in “quasar dev” and “quasar build” commands.

Add Quasar BEX Mode

In order to build a BEX, we first need to add the BEX mode to our Quasar project:

$ quasar mode add bex

If you want to jump right in and start developing, you can skip the “quasar mode” command and issue:

$ quasar dev -m bex -T [chrome|firefox]

This will add BEX mode automatically, if it is missing, by creating the /src-bex folder into your project.

TIP

The src-bex folder is just a standard browser extension folder so you are free to use it as you would any other browser extension project folder. Please refer to supported Browser Extension documentation to learn more.

Firefox Browser Extension Documentation
Google Chrome Browser Extension Documentation
Other Chromium Based Browsers - Refer to their specific documentation.

The Anatomy of “/src-bex”

The new folder has the following structure:

src-bex/

assets/

content.css

# CSS file which is auto injected into the consuming webpage via the manifest.json

icons/

# Icons of your app for all platforms

icon-128x128.png

# Icon file at 128px x 128px

icon-16x16.png

# Icon file at 16px x 16px

icon-48x48.png

# Icon file at 48px x 48px

_locales/

# Optional BEX locales files that you might define in manifest

manifest.json

# The browser extension manifest file

background.js

# (or .ts) Standard background script BEX file (auto injected via manifest.json)

my-content-script.js

# (or .ts) Standard content script BEX file - auto injected via manifest.json (you can have multiple content scripts)

The next section will discuss these in more detail.

Caught a mistake?Edit this page in browser

1. Introduction

2. Add Quasar BEX Mode

3. The Anatomy of “/src-bex”