Before we can configure anything, we need to understand how the BEX is structured. A BEX can be one (or more) of the following:
- Runs in its own tab in the browser
- Runs in the Developer Tools window.
- Runs in a Popup window.
- Runs as Options window.
- 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.
TIP
Given content scripts run in the web page context, this means that only BEX’s that interact with a web page can use content scripts. Popups, Options and Devtools will not have a content script running behind them. They will all however have a background script.
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.
WARNING
This must be native CSS as it’s not preprocessed via Sass.