How to solve error "Firefox can’t find the file at moz-extension://......" when running a built blank Quasar BEX ("quasar dev -m bex" works)

user_3424416 0
Viewed 207

These are the commands I ran (I didn't change the code in any way):

quasar upgrade -i
mkdir folder
cd folder
quasar create
quasar mode add bex
npm i
quasar build -m bex
cd /dist/bex/UnPackaged && web-ext sign --api-key ... --api-secret ...

I then drag&dropped that signed .xpi file (in the folder ./web-ext-artifacts/) into the latest Firefox ESR in Debian 10 stable (78.12.0esr) and installed the addon (with no other addons being installed/running in that Firefox profile). When I click onto the Quasar (v2.0.1) icon in the upper right of Firefox after it finished installing it shows this error page:

File not found Firefox can’t find the file at moz-extension://extension-id/www/index.html.

instead of the proper Vue/Quasar page. The same also occurs with the unsigned addon (after setting xpinstall.signatures.required to enable installation) but it does work fine when running quasar dev -m bex.

Why is that and how to solve it?

It appears to be due to problems with the filepaths when using the build-command rather than the dev command. One can change the url in address bar to show the page but neither could I change all places where 'index.html' or process.env.DEV is used to make it work, nor would that be the build-process as is which I assume ought to work (as is; as said I only ran those few commands for a completely blank BEX and didn't change the code for testing).

quasar-framework firefox-addon
1 Answers

Seems like this is bug since quasar: 2.0.0-beta.1 moved to stable: This is not a good long term solution, but I did the following as a temporary fix:

install execa

npm i execa

in quasar.conf.js

const execa = require('execa')
...

build: {


  async afterBuild(cfg) {
    try {
      // bit of a hack to move the index.html into the www folder on build of Packaged
      const dirUnPackaged = cfg.quasarConf.bex.builder.directories.input
      const { stdout } = await execa('mv', [`${dirUnPackaged}/index.html`, `${dirUnPackaged}/www/`])
      console.log(stdout)
    } catch (error) {
      console.error(error.message)
    }
  },


}

Essentially moving the index.html file into the www folder in the Package

user_79596160
Related