Using Preact in a Chrome Extension

[nahtnam]

Do you want to request a feature or report a bug?

Need help

What is the current behaviour?

I am trying to build a chrome extension but I'm stuck with the following problem:

Preact is injecting the following line

<link href="/bundle.c3a3d.css" rel="stylesheet" media="only x" onload="this.media='all'">

The problem is that Chrome Extensions are not allowed to run any inline functions and as a result if throws an exception on this line. Is there any way to disable the onload from being added? I couldn't figure out what Webpack plugin this is coming from.

Another issue I'm facing is even if I remove that onload and the css is loaded, the fonts are not rendering. I have custom fonts in the CSS file and I import the css file in my app.tsx. I see that the css is being loaded but after the app renders, Chrome chooses not to render it. If I add some static html with the font-family to the index.html, then Chrome decides to load the font.

If the current behaviour is a bug, please provide the steps to reproduce.

I can provide a sample repo if anyone wants to look into this further

What is the expected behaviour?

If this is a feature request, what is motivation or use case for changing the behaviour?

onload shouldn't be added and fonts should load!

Please mention other relevant information.

Environment Info:
  System:
    OS: macOS 10.16
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 12.16.3 - ~/.nvm/versions/node/v12.16.3/bin/node
    npm: 6.14.4 - ~/.nvm/versions/node/v12.16.3/bin/npm
  Browsers:
    Chrome: 84.0.4147.89
    Edge: 84.0.522.40
    Firefox: 75.0
    Safari: 14.0
  npmPackages:
    preact: ^10.3.1 => 10.4.6 
    preact-cli: ^3.0.0 => 3.0.0 
    preact-render-to-string: ^5.1.4 => 5.1.10 
    preact-router: ^3.2.1 => 3.2.1 
  npmGlobalPackages:
    preact-cli: 3.0.0

[prateekbh]

please use --no-inline-css at the time of build

[nahtnam]

Hey, thank you! That seemed to fix the problem! I fixed the CSS fonts issue by adding this:

body {
  font-family: inherit;
  font-size: inherit;
}

Apparently Chrome automatically injects some styles into the body