4

I'm trying to write a browser extension which injects some buttons and custom components into a website, therefore I wanted to use Tailwind (and DaisyUI) to style them.

I found this discussion and configured my project according to the solution and I got Tailwind and DaisyUI working for the popup of my extension. My App.css looks like

@tailwind base;
@tailwind components;
@tailwind utilities;

This gets imported in my Popup.tsx with import "../App.css";. No problems there.

But when I try to do the same import in my content-script, I don't get any errors, but the script somehow fails/doesn't get executed at all anymore. If I put in a console.log without importing App.css, it gets printed. If I import App.css, it's not shown anymore.

Could this be an error with my webpack/postcss-config or is there something else preventing me from using custom CSS in the content script? I'm confused because it's working in the popup without any problems.

EDIT: The problem seems to appear no matter what CSS-file I try to load in the content-script.

Lauren Yim
  • 12,700
  • 2
  • 32
  • 59
Nils
  • 134
  • 2
  • 9

1 Answers1

0

I encountered the same problem but hopefully I found a solution.

In my webpack config, I specified in the plugins section, that I want to copy my file named tailwind.css into dist.

My file structure

src/
 - ContentScript.tsx (imorting tailwind.css)
 - tailwind.css

-- output is generated below
dist/
 js/
   contentScript.js
   tailwind.css
 manifest.json

In webpack.config.js


const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  // Other config goes there
  plugins: [
        new CopyPlugin({
            patterns: [
                {
                    from: "src/tailwind.css",
                    to: "./",
                },
            ],
        }),
    ],
 }

In manifest.json

{
  // other config
  "content_script": [
  {
    // your config
    "css": ["js/tailwind.css"],
    "js": ["js/contentScript.js"]
  }
  ],
  "web_accessible_ressources": [
  {"resources": ["js/*"]}
  ]
}
ajubin
  • 1
  • 3