-
Notifications
You must be signed in to change notification settings - Fork 176
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Assets loaded in content script result in 404 #842
Comments
In addition, Maybe one possible solution is to just always prepend |
As @KTibow suggested in the Vite Discord server where I asked for help, the experimental vite.config.ts: export default defineConfig({
plugins: [solidPlugin(), crx({ manifest })],
experimental: {
renderBuiltUrl(filename, { hostType }) {
if (hostType === "css") {
return `chrome-extension://__MSG_@@extension_id__/${filename}`;
}
},
},
}); It prepends the string to the output asset URLs and works perfectly. Still, in my opinion, it'd be great if CRXJS uses this internally, so end-users don't have to face this issue. |
Build tool
Vite
Where do you see the problem?
Describe the bug
I have a simple content script that imports CSS with fonts:
manifest.json:
content.tsx:
index.css:
I do the same in the extension popup and it works perfectly there. However, in the content script, it results in the extension attempting to load the resources from the visited website, and you obviously get a 404:
This problem has been raised in Stack Overflow and the solution is to use a special string in the CSS resource path, as explained in the Chrome docs:
And indeed, if I build my extension, go to the generated CSS, and manually prepend
chrome-extension://__MSG_@@extension_id__
, everything starts working. In other words, this:…has to turn to this:
Reproduction
Create a content script and try to import any CSS asset.
Logs
No response
System Info
The text was updated successfully, but these errors were encountered: