Can I prevent CSS from loading in the content script?

[wallw-teal]

I have a content script which needs to just load its JS, and then a portion of it will add an iframe to the page and subsequently load the styles only inside that iframe (which are imported into app and sub-component definitions directly). Currently, the build correctly spits out dist/style.css and I have it entered in web_accessible_resources, but the resulting dist/manifest.json gets the following:

{
  "content_scripts": [
    {
      "js": [
        "src/content.js"
      ],
      "css": [
        "style.css"
      ]
    }
  ]
}

which leaks styles expected to be contained by the iframe onto the whole page. Is there a way to avoid including the "css" entry there?

[aklinker1]

It should only include a CSS file in your manifest's content script if you import the CSS file into the content script at some point.

Are you including an HTML file in the plugin's additionalInputs option to use as the iframe's src, or are you creating it via a string? If you're using an HTML file, you should import the CSS file there instead of your content script, and everything will work.

If you could share a small reproduction, I could give you better advice. But yeah, it seems like you're importing the CSS when you shouldn't be.

[aklinker1]

Yeah, a small repro would be useful. So are the styles being generated from the react components imported?

[wallw-teal]

Here is the reproduction

I think minimally just a hook like (manifest: Manifest) => Promise<Manifest> just after rendering the manifest and before validation would be fairly generic and allow some custom modifications. I'm happy to add that as a PR if you are interested.

[aklinker1]

That's what I was leaning toward as well. If you want to submit a PR, that'd be great. How does transformManifest sound?

[wallw-teal]

That works for me! PR is up at #123

[aklinker1]

Released in v3.1.0