Content security policy blocking injecting styles into pages

Add-ons addons.mozilla.org
#1

I am working on an extension that will inject some elements into the webpages using content scripts.

i used react/webpack to build the extension. but when i am trying to use the extension, in some websites like secure.login.gov the styles are not getting injected. i am getting the following error in console.

Content-Security-Policy: The page’s settings blocked an inline style (style-src-elem) from being applied because it violates the following directive: “style-src ‘self’ https://secure.login.gov ‘nonce-83e27ef5530a894f4f0ee9c5323940ea’

there is no issue in chrome/edge where i am using manifest v3 where as in firefox i am using manifest v2.

i tried instructions in here https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_security_policy. but this looks like will be applied to extension pages not the actual web pages

any help on this will be appreciated.

#2

How are you injecting the styles? I would expect that appending a style tag to the host document would be blocked by CSP but that using content script injection mechanisms should work.

For example, you should be able to inject a CSS file in the extension using a static content_scripts declaration in the manifest. If that doesn’t work, I’d consider that a bug.