Refused to apply inline style because it violates the following Content Security Policy

[Faraz Shuja]

Hi,

I have developed a Chrome extension (Manifest V3) that is functioning as expected under normal circumstances. However, I have encountered an issue when integrating this extension with a separate web application that has Content Security Policy (CSP) enabled.

When CSP is activated on the web application, the extension triggers several CSP errors, such as the following:

"Refused to apply inline style because it violates the following Content Security Policy directive: 'default-src 'self''. Either the 'unsafe-inline' keyword, a hash ('sha256-vCJmv4Wgwg='), or a nonce ('nonce-...') is required to enable inline execution."

Notably, when the extension is disabled, these errors do not appear in the console.

I am currently unsure of the steps required to investigate and resolve this issue. I would greatly appreciate any guidance or direction that could assist me in addressing this problem.

thanks

Faraz

[woxxom]

Sounds like your content script runs in the "MAIN" world, where the CSP of the page is applied. If you really need access to the main world, add a second content script without specifying the world and create the DOM elements there. To coordinate the two scripts you can use CustomEvent to pass cloneable data and MouseEvent's relatedTarget to pass DOM elements.

[Faraz Shuja]

In my code I am already executing scripts without providing any world, something like:

  chrome.runtime.onInstalled.addListener(async (details) => {
    for (const cs of chrome.runtime.getManifest().content_scripts) {
      for (const tab of await chrome.tabs.query({ url: cs.matches })) {
        if (tab.status !== 'unloaded') {
          try {
            if (tab.id && cs.js) {
              await chrome.scripting.executeScript({
                target: { tabId: tab.id },
                files: cs.js,
              });
            }
          }
          catch (e) {}
        }
      }
    }

[woxxom]

Do you create a "script" element in cs.js? If so, it runs in the main world.