Manifest cannot be read or something is missing

[thiagolmoraes]

Summary

I followed the steps in this guide https://vite-plugin-web-extension.aklinker1.io/guide/ and after the installation was done I ran the command "npm run dev" and got this error message

"Error to loading extension" / "Manifest File cannot be read or is missing"

[oneezy]

what's your manifest.json look like?

this is working for me but having issue with hot reload:

{
  "{{chrome}}.manifest_version": 3,
  "{{firefox}}.manifest_version": 2,
  "icons": {
    "16": "icon/16.png",
    "32": "icon/32.png",
    "48": "icon/48.png",
    "96": "icon/96.png",
    "128": "icon/128.png"
  },
  "{{chrome}}.action": {
    "default_popup": "popup.html"
  },
  "{{firefox}}.browser_action": {
    "default_popup": "popup.html"
  },
  "background": {
    "{{chrome}}.service_worker": "background.js",
    "{{firefox}}.scripts": ["background.js"]
  },
  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": ["src/scripts.js"],
      "css": ["src/styles.css"]
    }
  ]
}

[thiagolmoraes]

what's your manifest.json look like?

this is working for me but having issue with hot reload:

{
  "{{chrome}}.manifest_version": 3,
  "{{firefox}}.manifest_version": 2,
  "icons": {
    "16": "icon/16.png",
    "32": "icon/32.png",
    "48": "icon/48.png",
    "96": "icon/96.png",
    "128": "icon/128.png"
  },
  "{{chrome}}.action": {
    "default_popup": "popup.html"
  },
  "{{firefox}}.browser_action": {
    "default_popup": "popup.html"
  },
  "background": {
    "{{chrome}}.service_worker": "background.js",
    "{{firefox}}.scripts": ["background.js"]
  },
  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": ["src/scripts.js"],
      "css": ["src/styles.css"]
    }
  ]
}

I'm sorry I forgot to post manifest. The manifest from src/ looks like

{
  "{{chrome}}.manifest_version": 3,
  "{{firefox}}.manifest_version": 2,
  "icons": {
    "16": "icon/16.png",
    "32": "icon/32.png",
    "48": "icon/48.png",
    "96": "icon/96.png",
    "128": "icon/128.png"
  },
  "{{chrome}}.action": {
    "default_popup": "src/popup.html"
  },
  "{{firefox}}.browser_action": {
    "default_popup": "src/popup.html"
  },
  "background": {
    "{{chrome}}.service_worker": "src/background.ts",
    "{{firefox}}.scripts": ["src/background.ts"]
  }
}

Inside dist

    "name":"node22",
    "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';"
            }
        }

[aklinker1]

It looks like a problem with the "reload manager extension" that gets loaded along side your extension to handle reloads... Not a problem with your manifest.

[thiagolmoraes]

It looks like a problem with the "reload manager extension" that gets loaded along side your extension to handle reloads... Not a problem with your manifest.

hm, how can I solve it?

[aklinker1]

No, sorry, never seen this before... Did you check to see if the directories mentioned exist? Are you using WSL?

[thiagolmoraes]

No, sorry, never seen this before... Did you check to see if the directories mentioned exist? Are you using WSL?

hmm yeap, I'm using WSL, it's funny cause after these errors a chrome opens!

[oneezy]

i was using git bash. @aklinker1 you think it's OS specific issue?

[thiagolmoraes]

i was using git bash. @aklinker1 you think it's OS specific issue?

Maybe its OS issue, using node directly on windows, its worked

[thiagolmoraes]

Solved!

If you are using WSL like me, you need to install Chrome on WSL and then adjust the manifest for it.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import webExtension, { readJsonFile } from "vite-plugin-web-extension";

function generateManifest() {
  const manifest = readJsonFile("src/manifest.json");
  const pkg = readJsonFile("package.json");
  return {
    name: pkg.name,
    description: pkg.description,
    version: pkg.version,
    ...manifest,
  };
}

export default defineConfig({
  plugins: [
    react(),
    webExtension({
      manifest: generateManifest,
      webExtConfig: {
        chromiumBinary: "/usr/bin/google-chrome-stable", 
      },
    }),
  ],
});

I don't know the result of this in production, if it would need to be turned on again, but I don't think so, since this is a "dev build". Enjoy! Hot Reloading is working

[aklinker1]

Haha I just deleted my windows install, so glad you got it working!