Importing manifest.json in your app causes the CRXJS-generated manifest to be overwritten

Build tool

Vite

Where do you see the problem?

[x] In the browser
[ ] In the terminal
[x] In the filesystem

Describe the bug

I want to output the extension version in my app, so I do this:

src/App.tsx:

import manifest from "../manifest.json";
// ...
export function MyApp() {
    // ...
    return <div>v{version}</div>;
}

This works out great, but it leads to dist/manifest.json getting overwritten. From this:

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "2.0.0",
  "action": {
    "default_popup": "index.html"
  },
  "permissions": [
    "storage"
  ],
  "content_scripts": [
    {
      "js": [
        "src/content.tsx-loader.js"
      ],
      "matches": [
        "file:///*",
        "http://*/*",
        "https://*/*"
      ]
    }
  ],
  "background": {
    "service_worker": "service-worker-loader.js",
    "type": "module"
  },
  "web_accessible_resources": [
    {
      "matches": [
        "<all_urls>"
      ],
      "resources": [
        "**/*",
        "*"
      ],
      "use_dynamic_url": true
    }
  ]
}

…it turns to this (my original manifest file):

{
    "manifest_version": 3,
    "name": "My Extension",
    "version": "2.0.0",
    "action": { "default_popup": "index.html" },
    "permissions": ["storage"],
    "content_scripts": [
        {
            "js": ["src/content.tsx"],
            "matches": ["file:///*", "http://*/*", "https://*/*"]
        }
    ]
}

This leads to the following errors:

Failed to load extension Error: Could not load javascript 'src/content.tsx' for content script. Could not load manifest.

This happens because src/content.tsx obviously isn't a JavaScript file and the browser refuses to load it. In the manifest by CRXJS, src/content.tsx-loader.js is loaded instead and that's how it works.
Even if I manually change src/content.tsx in the dist folder to src/content.tsx-loader.js, I get chrome-extension://invalid/ errors because web_accessible_resources is empty.

My current solution is to load the package.json version and use that instead. However it'd be great if CRXJS handles this internally, so you don't get surprised like that. Being able to import the manifest is something I expect to work. Because there were no big flashing errors, it took quite a bit of time to debug.

Reproduction

Import the main mainfest.json file in your app code.

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i5-12400F
    Memory: 7.95 GB / 15.82 GB
  Binaries:
    Node: 20.10.0 - ~\AppData\Local\Volta\tools\image\node\20.10.0\node.EXE
    Yarn: 1.22.19 - ~\AppData\Local\Volta\tools\image\yarn\1.22.19\bin\yarn.CMD
    npm: 10.2.3 - ~\AppData\Local\Volta\tools\image\node\20.10.0\npm.CMD
  Browsers:
    Edge: Chromium (120.0.2210.61)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @crxjs/vite-plugin: ^2.0.0-beta.21 => 2.0.0-beta.21 
    vite: ^4.3.9 => 4.5.0

Severity

annoyance

crxjs / chrome-extension-tools