Developing

Start developing a Browser Extension with just one command.

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

# ..or the longer form:
quasar dev --mode bex --target [chrome|firefox]

The default target is chrome, so the -T parameter can be omitted.

Quasar adds BEX mode if necessary and generates the development extension. Load that generated extension into the target browser.

While you develop your BEX, you will notice that Quasar CLI builds the actual extension in the dist folder (normally in /dist/bex-chrome--dev/ or /dist/bex-firefox--dev based on the dev target in “quasar dev” command):

Chrome

In line with the screenshot above, the following steps must be taken:

1. In Chrome, navigate to chrome://extensions
2. Toggle “Developer Mode”.
3. Click “Load unpacked”. This will present you with the folder selection dialog. Navigate to and select your /dist/bex-chrome--dev/ folder.
4. You should now see your BEX mounted in Chrome.

More information about debugging Chrome Browser Extensions can be found in the official documentation.

Other Chromium browsers

Although we haven’t tested all the various Chromium based browsers, BEX mode should be compatible with them. Please refer to the appropriate browser documentation on how to add a browser extension to that particular browser.

Firefox

In line with the screenshot above, the following steps must be taken:

1. In Firefox, navigate to about:debugging
2. Click on “This Firefox”
3. Click “Load Temporary Add-on…”. This will present you with the file selection dialog. Navigate to and select your /dist/bex-firefox--dev/manifest.json file. Note: Firefox requires the manifest file, not the /dist/bex-firefox--dev folder like Chromium browsers.
4. You should now see your BEX mounted in Firefox.

More information about debugging Firefox temporary addons can be found in the Firefox Extension Workshop.

Hot Module Reloading (HMR)

The best developer experience that you will have is with Chrome. We’ve managed to make HMR fully work for it:

• Full HMR for devtools/options/popup page
• When changing the background script, the extension will automatically reload.
• When changing a content script, the extension will automatically reload & the tabs using those content scripts will auto-refresh.
• The popup/page will not need to be compiled in its entirety. Instead, you will be able to benefit from on-the-fly compilation only for the browser requested files, which is VERY fast.

On the other hand, we cannot offer the same experience for Firefox too. However, Firefox watches for file changes and tries to auto-reload the extension on changes, but none of the HMR features above (specified for Chrome) will work.

Debugging

Browser extensions run in several isolated contexts, so inspect the context where the failing code executes.

With Chrome

You can find following places to investigate the errors and outputs from the console in DevTools:

1. Popup - right click on the page or on the extension icon and choose Inspect popup for DevTools.
2. Background scripts (e.g.: background-hooks.js) - open DevTools from Manage extensions - background page.
3. Content scripts - page where your script is injected.
4. Extension Errors - list of errors related to the extension (e.g. manifest configuration) are available in Manage extension - Errors.

If changes do not reach the browser, reload the extension from the extensions page. If that does not help, restart the browser and the Quasar development process.

For more information, please visit Debugging extensions.

Building for production

quasar build -m bex -T [chrome|firefox]

# ..or the longer form:
quasar build --mode bex --target [chrome|firefox]

The default target is chrome, so the -T parameter can be omitted.

You will be instructed which is the output folder. Normally, it’s /dist/bex-chrome/ and /dist/bex-firefox, based on the target specified for the “quasar build” command.

Minification

Browser stores may require submitted code to be readable during review, so Quasar disables minification for BEX builds by default. If the requirements of your target store allow it, opt in with bex.minify: true in the Quasar config file.

Publishing to extension stores

Since Quasar removes the burden of building and packaging your Browser Extension, once you are finished developing your extension, it is ready to be published. The publishing process differs between browsers, but the official documentation will guide you through the process.

Chrome - Publishing a Chrome Browser Extension

Firefox - Publishing a Firefox Add On (Browser Extension)