Content scripts added inside css section not autocoming to dist folder even when present in actual location.

[Shashank-Bhatt1]

Build tool

Vite

Where do you see the problem?

• In the browser
• In the terminal

Describe the bug

Hi all, i am building chrome extension and i came across this nicest solution with vite bundler. So I decided to give a try after seeing all the cool features of vite bundler.

I did the steps exactly mentioned for vanilla js flow and also fixed all the url related errors and it vite finally build my code in the dist folder.

However i noticed two issues.

1.) Css declared inside css prop of content_scripts section is missing in the dist folder. It is however present in the directory where it is needed. So if my content script section is like this

"content_scripts": [
   {
     "matches": ["<all_urls>"],
     "css": ["vendor/jquery.Jcrop.min.css", "content/index.css", "content/css/bootstrap-grid.min.css", "content/css/bootstrap-utilities.min.css",
     "content/css/contextmenu.css"],
     "js": ["vendor/jquery.min.js", "vendor/jquery.Jcrop.min.js", "content/crop.js", "content/index.js",
            "vendor/html-element-picker.js"]
   }
 ],

and when i run npm run dev and try to add dist folder to chrome extension as unpacked, it does not allow me saying vendor/jquery.Jcrop.min.css is missing in dist. However it actually present there in outer directory.

2.) Importing html template to extract content as html and using dynamic import is not working.

const response = await fetch(chrome.runtime.getURL('/content/templates/taskcontextmenu.html'));   
if (!response.ok) {
    throw new Error(`Response status: ${response.status}`);
}
const html = await response.text();

Not sure but this is working in native browser as well but not when using vite and what exactly i need this to replace with.

It would be nice if we can get all features of browser plus some cool vite specific without any missing file/s. Thanks.

Reproduction

Go to folder where you need extension.

• npm init vite@latest

• Create vite.config.js with the code below.

import { defineConfig } from 'vite'
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json'
 
export default defineConfig({
plugins: [crx({ manifest })],
})

• Create a file named manifest.json next to vite.config.js with all necessary details.

• Run npm install && npm run dev

• Add content_scripts section inside manifest.json with css being present there.

Logs

No response

System Info

Windows 10 
Node version: 20.12.2

Severity

annoyance