Problems loading css from dynamic content script.

[int13h]

I am using something like this:

chrome.scripting.registerContentScripts([
   {
     id: contentId,
     js: [scriptPath],
     css: ['src/index.css'],
     matches: ['*://*/*', 'file://*/*'],
     excludeMatches,
     runAt: 'document_idle'
   }
 ]);

when I was just using the manifest the import was within the content script and things just worked.

I also tried this:

import cssPath from 'src/index.css?inline';

and put cssPath in the css array with no luck.

The css itself looks like this:

@tailwind components;
@tailwind utilities;
... some other rules

Is there another trick to this? Thanks!

[int13h]

Found a workaround but it's kinda hacky.

Add content script section:

  "content_scripts": [
    {
      "js": ["src/content/cssLoader.tsx"],
      "matches": ["*://*/*", "file://*/*"],
      "run_at": "document_idle"
    }
  ]

where cssLoader is essentially just this:

import './index.css';

Back in business. I am using an exclude in the dynamic one so will still be tainting unwanted pages with namespaced css. Good for now though :)

[prakhartiwari0]

Do you know how can we remove it?