CSP

[TetraTsunami]

On some sites with stricter CSP, the image won't load and the extension looks ugly. Possible solutions:

• Don't load images on these sites
• Load them elsewhere (background sw? iframe?)

[TetraTsunami]

This specific case on Hacker News seems to be a regression since 1.0.0, and only on Firefox. I'm baffled as to how it worked in the first place, and how it continues to work on Chrome???

[TetraTsunami]

const Content: FC<PlasmoCSUIProps> = ({ anchor }) => {
  const [imageUrl, setImageUrl] = useState("")
  const immediate = "https://i.guim.co.uk/img/media/5defd4787682e1c3210c0fc088fbef530df0c486/6_573_3063_1838/master/3063.jpg?width=1200&height=630&quality=85&auto=format&fit=crop&overlay-align=bottom%2Cleft&overlay-width=100p&overlay-base64=L2ltZy9zdGF0aWMvb3ZlcmxheXMvdGctZGVmYXVsdC5wbmc&enable=upscale&s=d57091ddf4cbeaaf27d79cea029e8549" 
  useEffect(() => {
    setTimeout(() => {
      setImageUrl(immediate)
    }, 1000)
  })
  return (
    <div>
      <img src={immediate} height={50}/>
      {imageUrl && <img src={imageUrl} height={50}/>}
      <img src={imageUrl} height={50}/>
    </div>
  );
};

It appears that I need to create an img element with an empty src then set the src later, otherwise it won't work.

Of course, all three are fine in Chrome.