Disabling module for content script

[freb]

When you add additional imports to the content script for things other than types, the output js file is a module that contains import statements. The chrome console complains about these since it doesn't appear that content scripts support modules:

Do you have a solution for using commonjs output for the content script?

A follow-up question. Once the script portion of the content-script is working correctly, do you have any guidance on injecting a svelte component into a page (such as an overlay component)? I'm assuming I will run into that next but am happy to cross that bridge when I come to it.

[NekitCorp]

Hi, sorry for the long answer, was looking for a better solution.

As far as I know, Vite is not quite suitable for building a single bundle file. I tried to find some workaround for this, you can use dynamic import like in this repository https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/blob/main/src/pages/content/index.ts and add custom vite import plugin https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/blob/main/utils/plugins/custom-dynamic-import.ts and manually add styles to the page. I'm not sure there will be more problems in the future :(

So I think it's better to use another bundler, like rollup in a previous version of this project. I created a branch with an example: https://github.com/NekitCorp/chrome-extension-svelte-typescript-boilerplate/tree/issue-7

Output:

At the output, we get a single bundle file for each extension page, which we can simply include:

"content_scripts": [
    {
        "matches": ["<all_urls>"],
        "js": ["build/content_script.js"],
        "css": ["build/content_script.css"]
    }
],

Some extension content_scripts overlay component:

[freb]

Thanks so much for the response. I'll take a look and let you know how it goes. I'll close this issue once I've had a chance to check it out and share any thoughts.

[freb]

After taking some time to learn how Vite and Rollup differ, it makes total since to ditch Vite altogether, especially since there is not reloading for extensions (at least that I'm aware of).

Thanks again for your help on this.