Error Loading Chrome Extension - Insecure CSP value "" in directive 'script-src'

Question

When Migrating MV2 to MV3, Chrome is throwing this error:

Insecure CSP value "" in directive 'script-src'

Here's my content security policy:

"content_security_policy": {
    "extension_pages": "script-src 'self' 'https://www.fonts.googleapis.com' 'unsafe-eval'; object-src 'self'"
}

How can I fix this?

Answer 1

You should not have quotes around URLs, hosts and schemes. You should only quote keyword as 'self', 'none', 'unsafe-inline', 'nonce-XXX' and hashes. See https://content-security-policy.com/#source_list for examples. Specifically you need to remove the quotes around https://www.fonts.googleapis.com

Answer 2

According to the section on Remotely hosted code restrictions in the v2 to v3 migration guide:

Remotely hosted code refers to any code that is not included in an extension's package as a loadable resource. For example, the following are considered remotely hosted code:

• JavaScript files pulled from the developer's server.
• Any library hosted on a CDN.
• a code string passed into eval() at runtime

In Manifest V3, all of your extension's logic must be included in the extension. You can no longer load and execute a remotely hosted file.

You'll have to download a local version of the script and reference that

Manifest V2 Page

<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

Manifest V3 Page

<script src="./react-dom.production.min.js"></script>
<link href="./bootstrap.min.css" rel="stylesheet">