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.
1. 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
This will add BEX mode automatically, if it is missing adding a
src-bex folder to your project.
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.
2. Understand The Anatomy Of
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 ├── background.js # Standard background script BEX file │ # auto injected via manifest.json ├── dom.js # JS file which is injected into the DOM with a hook into the BEX communication layer ├── 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 └── my-content-script.js # 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.