0

I am trying to import a CSS file in the content script of a browser extension, but the content script doesn't get executed anymore when the import is added.

My popup also imports a file App.css and works fine, but when I try to do the exact same in the content script, I don't get any errors but the content script doesn't run anymore at all.

The CSS-part of my Webpack-config looks like this

{
   test: /\.css$/,
   use: ['style-loader', 'css-loader', 'postcss-loader'],
   exclude: /\.module\.css$/,
},

and I don't understand why the CSS-import is working fine in the popup, but not in the content script. (I need postcss because I want to use Tailwind, but the import doesn't work even with "normal" CSS)

I know that I can specify a css property in the manifest for content-scripts, but I guess this wouldn't work if I want to use Tailwind, because Webpack doesn't generate a CSS-file.

Nils
  • 134
  • 2
  • 9
  • For complex UI it's better to put it inside a [special iframe](https://stackoverflow.com/a/25100953/) pointing to an html file that you'll build the same way as the popup. – wOxxOm Mar 30 '22 at 05:55

1 Answers1

0

When imported by your background script, the style-loader will inject your CSS into "background" resources, like pop-ups and the background page. Using file-loader or, in newer Webpack versions, asset modules will publish the CSS as it's own file and return it's public file path on import. Which can then be registered as a content script and automatically injected into matching pages along with content scripts. The file path will have an prefix that will need to be removed.

Try something like this in your background script:

import myStyles from 'file-loader!./styles.css'
browser.contentScripts.register({
    css: [{ file: new URL(myStyles).pathname }]
})
Ralph
  • 1
  • 1