CSP blocks all remote scripts

[derdudev]

This problem is really driving me crazy.

my manifest.js file:

{
    "manifest_version": 2,
    "name": "musescore-dld",
    "version": "1.0",
    "description": "Downloader for sheet music on musescore",
    "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/beastify",
    "icons": {
        "48": "icons/musescore-ico-48.png"
    },

    "permissions": [
        "activeTab",
        "tabs",
        "unlimitedStorage",
        "storage",
        "downloads"
    ],

    "browser_action": {
        "default_icon": "icons/musescore-ico-32.png",
        "default_title": "MusescoreDLD",
        "default_popup": "popup/dld-menu.html"
    }
}

Am I missing any permissons? Why does this CSP error occur in the extension script but not when using the remote scripts in another unrelated "normal" html file?

[derdudev]

It's a 2 step process:

1. Add a "content_security_policy" property and set it to the following

   "content_security_policy": "script-src 'self' 'unsafe-eval' <remote script routes>; object-src 'self'"

   and replace <remote script routes> with a list of the base routes of the remote scripts you want to include (separated by one space). So e.g. when you want to use a cdnjs library like jsPDF from the link https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js, it should look like this:

   "content_security_policy": "script-src 'self' 'unsafe-eval' https://cdnjs.cloudflare.com; object-src 'self'"

2. Insert a corresponding meta-tag in the html file into which your main content script is imported. The meta tag should look like the following

   <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-eval' <remote script routes>">

   Again, replace <remote script routes> with the same routes you already inserted in step 1.

This did it for me.