Using CSS in `content_scripts`

[KamilBaczkowski]

Summary

I can't use CSS files in content_scripts. If I import one in a .tsx file, it gets compiled and the contents go to the dist/style.css file. But trying to use it by adding it into manifest.json, I get Could not resolve entry module "style.css". error.

Reproduction

https://github.com/KamilBaczkowski/vpwe-repro

Environment

System:
    OS: Linux 6.1 NixOS 24.05 (Uakari) 24.05 (Uakari)
    CPU: (12) x64 AMD Ryzen 5 5600X 6-Core Processor
    Memory: 8.10 GB / 31.27 GB
    Container: Yes
    Shell: 3.6.1 - /run/current-system/sw/bin/fish
  Binaries:
    Node: 18.18.2 - ~/.nix-profile/bin/node
    npm: 9.8.1 - ~/.nix-profile/bin/npm
  npmPackages:
    vite: ^5.0.0 => 5.0.10
    vite-plugin-web-extension: ^4.0.0 => 4.0.1

[KamilBaczkowski]

I assume I'm doing something wrong, but I can't really tell what, and the docs are not helpful when it comes to this part of the extension development.

[aklinker1]

The plugin will automatically add the CSS to the content script in your manifest, you don't have to list it manually.

So just remove the CSS from your manifest, run a build, and open dist/manifest.json. you'll see the CSS is listed there!

I thought this was documented, but I can't find it right now...

[KamilBaczkowski]

You are right, I didn't notice it, because I used a shadow DOM and couldn't get it to load there. I actually got it to work by adding it to web_accessible_resources and loading it manually within the shadow root. Now my question is wholly different: is there a way to stop the extension from adding style.css to the final manifest? I know there's the transformManifest way, but anything else? I don't want to pollute the website with styles from my extension.

[aklinker1]

Depends on the rest of your content script.

If the CSS file contains all your styles, you can:

1. Remove import in the entry point
2. Add it to the additionalInputs option (if it needs to be transformed by vite) or add it to the public directory (if it doesn't need to be transformed by vite)
3. Add the CSS file to web_accessible_resources
4. Use chrome.runtime.gstURL to get the CSS files final URL at runtime, and either fetch it or load it via a link element in your shadow root. (I recommend fetching it and loading the string into the body of a style element to avoid website's CSP)

If you're using react or another framework that's generating additional styles, your only option is to remove it from the manifest with transformManifest.

[KamilBaczkowski]

All right, in such case I'll stick to transformManifest and document why I'm using it in that way. Thanks!