Example won't work on firefox

[renyuneyun]

Build tool

Vite

Where do you see the problem?

• [X] In the browser
• [ ] In the terminal

Describe the bug

After following the instruction to create a new project and loaded into browser, the extension won't actually load correctly. Clicking on the icon will show the following page:

Error messages appear in browser console (see below).

Reproduction

• Follow instruction to create a new vite project
• Change build target to firefox by setting plugins: [crx({ manifest, browser: 'firefox' })], in vite.config.js (saw this by seeing this post)
• Build the extension (npm run dev)
• Load the extension to Firefox (about:debugging#/runtime/this-firefox -- select "load temporary extension" -- select the manifest file in dist/ directory)
• Open browser console (and switch to "multi process" page)

Logs

Content-Security-Policy: The page’s settings blocked a script (script-src-elem) at http://localhost:5173/@vite/env from being executed because it violates the following directive: “script-src 'self' 'wasm-unsafe-eval'” service-worker-loader.js:1:1
Content-Security-Policy: The page’s settings blocked a script (script-src-elem) at http://localhost:5173/@vite/env from being executed because it violates the following directive: “script-src 'self'” service-worker-loader.js:1:1
Content-Security-Policy: The page’s settings blocked a script (script-src-elem) at http://localhost:5173/@crx/client-worker from being executed because it violates the following directive: “script-src 'self' 'wasm-unsafe-eval'” service-worker-loader.js:2:1
Content-Security-Policy: The page’s settings blocked a script (script-src-elem) at http://localhost:5173/@crx/client-worker from being executed because it violates the following directive: “script-src 'self'” service-worker-loader.js:2:1
Uncaught (in promise) TypeError: error loading dynamically imported module: http://localhost:5173/@vite/env
    <anonymous> moz-extension://6c920f88-52e6-4b5a-bc9e-33003968c870/service-worker-loader.js:1
service-worker-loader.js:1:1
Uncaught (in promise) TypeError: error loading dynamically imported module: http://localhost:5173/@crx/client-worker
    <anonymous> moz-extension://6c920f88-52e6-4b5a-bc9e-33003968c870/service-worker-loader.js:2

System Info

System:
    OS: macOS 14.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 5.78 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.6.2 - /opt/homebrew/bin/node
    npm: 10.2.4 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 124.0.6367.119
    Edge: 124.0.2478.80
    Safari: 17.1
  npmPackages:
    @crxjs/vite-plugin: ^2.0.0-beta.23 => 2.0.0-beta.23 
    vite: ^5.2.0 => 5.2.11


Also

  Firefox: 125.0.3
  Firefox Developer Edition: 126.0b9

Severity

blocking all usage of RPCE

[jhholm]

Firefox doesn't allow remote code execution when using extension manifest version 3. Localhost is technically an external/remote source, as you the extension is loaded from your hard drive. See mv3 migration guide

You can run vite build --watch when developing for Firefox. It's not as nice as just running vite-dev for Chromium browsers with HMR. I'm using web-ext to automatically start Firefox with the extension and autoreload on changes.

[dotproto]

Thanks for sharing the info about vite build --watch, @jhholm. I for one wasn't familiar with that command.

Bug 1864284 appears to be the relevant feature request for Firefox. In comment 3, @Rob--W indicated that he's "leaning towards … allowing localhost and 127.0.0.1 for temporarily loaded add-ons only." Until someone is able to land that change, vite build --watch should at least unblock @crxjs/vite-plugin users.