Will pay someone to fix this: Unable to import a .webm file

[ryanmargono]

Build tool

Vite

Where do you see the problem?

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

Describe the bug

Not able to import a .webm file to use as a video source. Am able to import images to use as img sources. Confirmed this is a plugin issue since i disabled it and ran dev in the browser as standlone vite react app. When inspecting the popup with dev tools, the asset doesn't show (when hovering the src) while the images do.

Example:

import aura from './sign-in_aura.webm'; // in src/popup/pages/sign-in
...
      <video
        src={aura}
        controls
        playsInline
        muted
        autoPlay
        loop
      />

^ This worked when using Plasmo. And this would be a blocker from us fully migrating to your tool.

Config:

import react from '@vitejs/plugin-react';
import path from 'node:path';
import { defineConfig } from 'vite';
import webExtension from 'vite-plugin-web-extension';

// https://vitejs.dev/config/
export default defineConfig({
  root: '.',
  server: {
    port: 5000,
  },
  plugins: [react(), webExtension()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@app/core': path.resolve(__dirname, '../core/src'),
      '@app/features': path.resolve(__dirname, '../features/src'),
    },
  },
});

Manifest:

{
    "manifest_version": 3,
    "name": "CRXJS React Vite Example",
    "version": "1.0.0",
    "action": { "default_popup": "src/index.html" }
}

Reproduction

N/A

Logs

No response

System Info

System:
    OS: macOS 13.4
    CPU: (12) arm64 Apple M2 Max
    Memory: 88.95 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.1 - ~/.nvm/versions/node/v18.16.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.16.1/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.1/bin/npm
    pnpm: 8.10.5 - ~/.nvm/versions/node/v18.16.1/bin/pnpm
  Browsers:
    Chrome: 127.0.6533.89
    Safari: 16.5

Severity

blocking an upgrade

[Toumash]

Alright i've put the sample as sample.web into the public/assets/sample.web and added

<video src={chrome.runtime.getURL('/assets/sample.webm')} />

into my Popup.tsx

"@crxjs/vite-plugin": "^2.0.0-beta.23", "vite": "^5.2.11",

my vite.config.ts:

import { crx, defineManifest } from '@crxjs/vite-plugin';
import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';

....
 plugins: [
   crx({ manifest: createManifest(env) }),
   react(),
 ],

aaaand it works in the 🟢production build but for some reason not in 🔴dev

Why it does not work in dev? No idea, the response looks fine just the video does not load Even when looking at the direct response from a vite dev server it looks fine

[ryanmargono]

Working in dev is a hard requirement imo.

[ryanmargono]

@Toumash what will it take for this to get prioritized? More than happy to work something out.

[Toumash]

Its looks like a problem with Chrome's CSP but im not sure. No errors no nothing in the fetch() here https://github.com/crxjs/chrome-extension-tools/blob/a6d882a5091da474ffcfde815c53bf4eda19b6a6/packages/vite-plugin/src/client/es/hmr-client-worker.ts#L44 in sendToServer. Only found this thread https://groups.google.com/a/chromium.org/g/chromium-extensions/c/xmg1ez0IxYU

But. Perhaps the better solution is to host the video yourself. Heck, even github allows for it somehow. Works on dev and prod.

      <video src={`https://github.com/Toumash/video-csp-test/raw/main/sample.webm`} controls></video>

Works just fine

[cpakken]

If its a CSP problem sometimes the generated manifest web accessible resources / host permissions is different when in dev vs build. Try checking the generated manifest file to make sure you have permissions for the file.

You might want to a specific manifest config for vite while in dev mode to give your self all the permissions and then change it up when building

[Toumash]

@cpakken prod manifest has even less configuration and yet it works. Service worker has it wrong somehow - theres a tip from a comment in the source code

https://github.com/crxjs/chrome-extension-tools/blob/a6d882a5091da474ffcfde815c53bf4eda19b6a6/packages/vite-plugin/src/client/es/hmr-client-worker.ts#L45