How to disable content-script loader

[mp3por]

Build tool

Rollup

Where do you see the problem?

• In the browser
• In the terminal

Describe the bug

At the moment when I run vite build I get a content-script.ts-loader.js file which looks something like this:

(function () {
  'use strict';

  const injectTime = performance.now();
  (async () => {
    const { onExecute } = await import(
      /* @vite-ignore */
      chrome.runtime.getURL("assets/content-script.ts-C7vMt-6J.js")
    );
    onExecute?.({ perf: { injectTime, loadTime: performance.now() - injectTime } });
  })().catch(console.error);

})();

Because of this I receive the following error in the browser

content-script.ts-loader-D9s8tIAp.js:8 Refused to load the script 'chrome-extension://300fed4b-9168-4f91-9e64-9e3c97c6aa31/assets/content-script.ts-C7vMt-6J.js' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

I use the following content_script_policy:

content_security_policy: {
    extension_pages: "script-src 'self' 'wasm-unsafe-eval'; object-src 'self';",
  },

How to tell the plugin to not add this loader file because i don't need it in production ?

Reproduction

asdjioasd

Logs

No response

System Info

System:
    OS: macOS 15.0.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 71.64 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
    pnpm: 9.11.0 - /opt/homebrew/bin/pnpm
    Watchman: 2024.09.23.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 130.1.71.118
    Chrome: 130.0.6723.70
    Safari: 18.0.1
  npmPackages:
    @crxjs/vite-plugin: ^2.0.0-beta.28 => 2.0.0-beta.28
    vite: ^5.4.1 => 5.4.2

Severity

blocking all usage of RPCE

[Toumash]

@mp3por i can see the loader is used to support HMR in dev. I'm not sure why it is in production build
Explained here: #391 (comment)
similiar issue here: #391

Looks like theres no way to disable it. We probably would need to make a PR with the option to do so.

Should we go for different dev/prod experience or should we go for an option like a switch?

[Kison]

@mp3por, I also experienced the same problem.
Try to update the package to ^2.0.0-beta.28.

[jacksteamdev]

It would be great if we could find a way to do content scripts without the loader. PR are welcome!

Some background on the dynamic import loader:

• Chrome Extension content scripts don't support ES modules - they're plain JS scripts.
• Vite is an ESM-first build tool. It doesn't output non-module formats.
• Vite supports non-module formats in ViteConfig.build.lib, but we're not building a library - we're building an app.
• CRXJS solves the mismatch of content script file formats using the loader file.

Some things to keep in mind:

• Content scripts should behave the same in dev and build modes.
• Vite relies heavily on ESM features like import.meta. Non-module scripts would miss out on some Vite features. We'd need to document this somehow.

[Toumash]

So if they need to behave the same way in dev/build i guess the only option is to use a vite crxjs config switch for including the HMR support or not. useLoader or not

[Mysteriosis]

Is there a way to manually edit this file to avoid this error ?
Looks like the content-script cannot be run directly after the build (mine, anyway).

[kfazil]

@mp3por, I also experienced the same problem. Try to update the package to ^2.0.0-beta.28.

In my case I'm injecting conent_scripts
content_scripts: [ { matches: ["https://*/*"], js: [ "src/index.tsx" ], media: [], match_about_blank: true } ]

updating @crxjs/vite-plugin 2.0.0-beta.19 to ^2.0.0-beta.28 fixed the issue for me.