fresh vite-plugin-web-extension produces "Manifest file is missing or not readable"

[mklueh]

Summary

I'm getting a popup from the chrome browser saying the Manifest file is missing or not readable (in german):

This happens with a freshly created project using yarn create vite-plugin-web-extension.

Reproduction

This is the generated manifest.json

{
  "name": "my-extension",
  "version": "1.0.0",
  "manifest_version": 3,
  "icons": {
    "16": "icon/16.png",
    "32": "icon/32.png",
    "48": "icon/48.png",
    "96": "icon/96.png",
    "128": "icon/128.png"
  },
  "action": {
    "default_popup": "src/popup.html"
  },
  "background": {
    "service_worker": "src/background.js"
  },
  "host_permissions": [
    "http://localhost/*"
  ],
  "content_security_policy": {
    "extension_pages": "script-src 'self' 'wasm-unsafe-eval' http://localhost:*; object-src 'self';"
  }
}

Environment

The project sits inside WSL

  System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (5) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
    Memory: 6.74 GB / 7.76 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 16.20.1 - /usr/bin/node
    Yarn: 3.6.0 - /usr/bin/yarn
    npm: 8.19.4 - ~/workspace/my-project/node_modules/.bin/npm
  Browsers:
    Chrome: 114.0.5735.198
  npmPackages:
    vite: ^4.3.9 => 4.3.9
    vite-plugin-web-extension: ^3.1.0 => 3.1.0

[aklinker1]

Hmm, interesting. Are you letting the plugin open the browser and install the extension, or are you skipping that and loading the unpacked directory manually? Make sure you're loading the dist directory, not the project directory if you're loading it manually.

[mklueh]

Yes, I'm letting the plugin open it, and I have nothing changed at all after the create command

[aklinker1]

WSL has known issues with letting the extension open the browser.

Since the plugin is running in WSL, it will pass /c/user/path/to/project\dist to web-ext for the project directory, but the browser is running in a Windows process, and is expecting C:\user\path\to\project\dist. So it can't find the path.

I don't know how to detect if the plugin is being executed from WSL, so I don't know if we can update the path correctly.

You may have to set disableAutoLaunch: true in your config file.

[aklinker1]

Edit: Not sure how I missed this in my initial search a while back, but there's a package called is-wsl that we could use. Then we might just need to convert the path to a windows path with node:path/win32.

There may be further failures beyond this though. I don't have a windows computer (only linux and mac), so if you want to experiment with adding support for WSL, here's the relevant code:

https://github.com/aklinker1/vite-plugin-web-extension/blob/e428b55dd58d12f44b06a8461309164b3780ee0c/packages/vite-plugin-web-extension/src/extension-runner/web-ext-runner.ts#L35C5-L35C5

Maybe just change it to:

const sourceDir = isWsl() ? paths.win32.resolve(paths.outDir) : paths.outDir;

[mklueh]

@aklinker1 not sure about that, because in my case, I'm opening Chromium in Ubuntu. It just gets a view frame in Windows, but is running in Linux. Also, it once worked for me in the past in WSL. Don't know what version it was, but it definitely did.

[aklinker1]

@mklueh I did not know you could run chromium from inside WSL... interesting.

If you want to debug it further, can you add logs inside the plugin? Search for const sourceDir = paths.outDir inside node_modules/vite-plugin-web-extension/dist/index.js and node_modules/vite-plugin-web-extension/dist/index.cjs. After the assignment, add a log for sourceDir and run your dev command again. What does it print out? Is there a manifest.json file inside the directory?

[mklueh]

@aklinker1 sry for the late response.

this is the path that is used

/home/user/workspace/my-project/apps/myapp/dist

After I close the first popup window, I get another one

it seems to add the windows drive prefix in front of the path for whatever reason

[aklinker1]

Huh, weird. I think I'm just gonna have to install windows and do some debugging. Does it happen on the vanilla template?

And you're using Ubuntu for WSL2?

[mklueh]

@aklinker1 I think that would be a good idea :)

yes, It's the vanilla template and yes, Ubuntu WSL2

Edit: found something related https://github.com/mozilla/web-ext/issues/2108

[bogdano2]

Could this be solved with wsplath from WSLU which is installed by default with the Ubuntu distribution?

WSL Utilities package provides ability to use the wslpath command.

Example usage:

cd $(wslpath 'C:\Users<username>\Documents') ... will change to /mnt/c/Users//Documents.

The reverse conversion is also possible with the -w option:

mspaint.exe $(wslpath -w ~/profile.jpg) ... will open the file \wsl$<distroname>\home<username>\profile.jpg in the Paint application.