Dynamic content script injection

[nicoandmee]

I am very happy with this plugin but one issue I have not yet solved is dynamic content script injection. The scenario is the following: I have a content script that should only be injected upon user command. I go about this by injecting it using chrome.scripting.executeScript. I would like to use the same approach this plugin uses to bundle content scripts (but obviously, I don't want to declare it in the manifest) to produce an IIFE file I can inject in the same way. I tried manually adding it to the rollup config, but ran into the old Cannot use import statement outside a module error. Any recommendations on how to approach this?

[nicoandmee]

For anyone else who lands on this issue- I found the solution here - would be very helpful to have this directly in the docs!

[AntonOfTheWoods]

@nicoandmee , totally agree this should be in the docs!

[prakhartiwari0]

This solved my problem too!

Do you know of any way to do the same with CSS files? I can use direct CSS text and inject it using scripting.injectCSS, but can't do the same with files.

[Alm0g]

Hi @nicoandmee, how did you manage the compilation error?
Whenever I'm trying to:

import myScript from './content?script' I get the following compilation error:
"Cannot find module './content?script' or its corresponding type declarations.ts(2307)"

I have tried several conventions without success...

Edit:
I found this example in the package's tests:

chrome-extension-tools/packages/vite-plugin/tests/out/dynamic-script/src/background.ts

Line 4 in 5bf6711

It seems to be working, I wonder if there is an option to, instead of importing one-by-one, loop over an array and dynamically import those files.

[grinholz]

The last piece for me: I had to manually add this type definition for *?script and include it in a whatever-name.d.ts file in my project. That fixed the TS linting error that was blocking my build.

declare module "*?script" {
    const fileName: string;
    export default fileName;
}

I found it, along with other similar definitions here:
https://github.com/crxjs/chrome-extension-tools/blob/5bf6711ec75e74f31b22474a7465a72a052089e0/packages/vite-plugin/client.d.ts