Specifying styles to content scripts

[avi12]

I couldn't figure out how to specify CSS files in the manifest under "content_scripts" I tried:

{
  "content_scripts": [
    {
      "matches": ["..."],
      "js": ["src/pages/content/index.js"],
      "css": ["src/pages/content/content-script-style.css"]
    }
  ]
}

vite.config.ts

export default defineConfig({
  // ...
  build: {
    rollupOptions: {
      input: {
        background: resolve(pageDir, "background", "index.ts"),
        content: resolve(pageDir, "content", "index.ts"),
        contentStyles: resolve(pageDir, "content", "content-script-styles.css"),
        popup: resolve(pageDir, "popup", "index.html"),
      }
    }
  }
});

What I actually get:

dist
└ assets
    └ contentStyles.87089714.css
    └ popup.8911f826.css

[NekitCorp]

I did not think about such a case, as a temporary solution I can offer:

{
  "content_scripts": [
    {
      "matches": ["..."],
      "js": ["src/pages/content/index.js"],
      "css": ["assets/content.css"]
    }
  ]
}

vite.config.ts

build: {
    rollupOptions: {
        input: {
            background: resolve(pagesDir, "background", "index.ts"),
            content: resolve(pagesDir, "content", "index.ts"),
            popup: resolve(pagesDir, "popup", "index.html"),
        },
        output: {
            entryFileNames: (chunk) => `src/pages/${chunk.name}/index.js`,
            chunkFileNames: `assets/[name].js`,
            // https://github.com/vitejs/vite/issues/378#issuecomment-768816653
            assetFileNames: `assets/[name].[ext]`
        },
    },
},

import styles in src/pages/content/index.ts:

import type { IStorage } from "src/types";
import "./styles.css";

chrome.storage.sync.get({ count: 0 } as IStorage, ({ count }: IStorage) => {
    console.log("content", count);
});

Output:

dist/src/pages/options/index.html    0.37 KiB
dist/src/pages/popup/index.html      0.37 KiB
dist/src/pages/background/index.js   0.12 KiB / gzip: 0.12 KiB
dist/src/pages/content/index.js      0.07 KiB / gzip: 0.08 KiB
dist/src/pages/options/index.js      0.20 KiB / gzip: 0.17 KiB
dist/src/pages/popup/index.js        0.20 KiB / gzip: 0.17 KiB
dist/assets/Options.js               4.70 KiB / gzip: 2.17 KiB
dist/assets/Options.css              0.33 KiB / gzip: 0.21 KiB
dist/assets/content.css              0.03 KiB / gzip: 0.05 KiB

I will think of a more beautiful solution, thanks for describing the problem :)

[avi12]

What if I wanted to use an SCSS file instead?

[NekitCorp]

https://vitejs.dev/guide/features.html#css-pre-processors

npm add -D sass

and that's it, you can use SCSS

[avi12]

Unfortunately, Vite copies the SCSS rather than running it through Sass to get the CSS file

[NekitCorp]

src/pages/content/index.ts:

import type { IStorage } from "src/types";
import "./styles.scss";

chrome.storage.sync.get({ count: 0 } as IStorage, ({ count }: IStorage) => {
    console.log("content", count);
});

src/pages/content/styles.scss:

$color: red;

body {
    background-color: $color !important;
}

npm run build

> chrome-extension-svelte-typescript-boilerplate@2.0.0 build
> vite build

vite v2.9.13 building for production...
✓ 11 modules transformed.
dist/src/pages/options/index.html    0.37 KiB
dist/src/pages/popup/index.html      0.37 KiB
dist/src/pages/background/index.js   0.12 KiB / gzip: 0.12 KiB
dist/src/pages/content/index.js      0.07 KiB / gzip: 0.08 KiB
dist/src/pages/options/index.js      0.20 KiB / gzip: 0.17 KiB
dist/assets/content.css              0.04 KiB / gzip: 0.06 KiB
dist/src/pages/popup/index.js        0.20 KiB / gzip: 0.17 KiB
dist/assets/Options.css              0.33 KiB / gzip: 0.21 KiB
dist/assets/Options.js               4.70 KiB / gzip: 2.17 KiB

Output dist/assets/content.css:

body{background-color:red!important}

[avi12]

Unfortunately, your hotfix breaks when upgrading to Vite 3 #6

[NekitCorp]

Added examples in Vite 3.2.0 for these cases

/main/src/content

// Some global styles on the page
import "./styles.css";

// Some JS on the page
storage.get().then(console.log);

// Some svelte component on the page
new Overlay({ target: document.body });