I feel the new CSP fields in the console can be improved.

Right now it states:

Comma-separated list of base URLs from which your Extension can load images (e.g. <img> HTML elements and favicons). These values will be used by the HTTP Content-Security-Policy (CSP) img-src directive

Comma-separated list of base URLs from which your Extension can load additional media (i.e. <audio>, <video>, and <track> HTML elements). These values will be used by the HTTP Content-Security-Policy (CSP) media-src directive.

Comma-separated list of base URLs from which your Extension can load information via scripting interfaces (e.g. API calls, fetch(), XMLHttpRequest, WebSockets). These values will be used by the HTTP Content-Security-Policy (CSP) connect-src directive.

A correctly constructed CSP for a given policy entry doesn't contain commas.

I feel it would be more practical to accept a "standard" CSP into these fields.

So you would specify in the fields a "valid" CSP for connct/img/media source. as per MDN - https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy

Rather than a CSV that is beint intrepreted either by automation or the reviewer.

It would make sense all around that I enter, for image domains for example:

https://www.google-analytics.com/ https://images.igdb.com/ https://static-cdn.jtvnw.net/ https://pbs.twimg.com/

instead of

https://www.google-analytics.com/,https://images.igdb.com/,https://static-cdn.jtvnw.net/,https://pbs.twimg.com/

The latter is not a valid CSP, but the former is.

This makes it easier for developers to correctly specify a https and a wss for socket based operations. And means what is entered into the field is a direct match to what you would test with if you have as test server that provides the files and the CSP headers when in localtest.

Libraries such as helmet both accept a "valid" CSP or an array of entries. So in code:

app.use(twitchextensioncsp({
    clientID: 'ca2np9xlw9bx7vlppwn8ekwz9ws0io',
    enableMobile: true,
    imgSrc: [
        'https://www.google-analytics.com/ https://images.igdb.com/ https://static-cdn.jtvnw.net/ https://pbs.twimg.com/ https://twitch.extensions.barrycarlyon.co.uk/'
    ],

is valid as is

app.use(twitchextensioncsp({
    clientID: 'ca2np9xlw9bx7vlppwn8ekwz9ws0io',
    enableMobile: true,
    imgSrc: [
        'https://www.google-analytics.com/',
        'https://images.igdb.com/',
        'https://static-cdn.jtvnw.net/',
        'https://pbs.twimg.com/',
        'https://twitch.extensions.barrycarlyon.co.uk/'
    ],

The string version is easier to copy and paste from my test server to the entry field in the console. And the string version (without commas is a Valid CSP)

This means less complications by Twitch requiring a Comma Seperated List.

TLDR:

    imgSrc: [
        'https://www.google-analytics.com/ https://images.igdb.com/ https://static-cdn.jtvnw.net/ https://pbs.twimg.com/ https://twitch.extensions.barrycarlyon.co.uk/'
    ],

the above is valid CSP the below (if I direct copied from the console into code) is not.

    imgSrc: [
        'https://www.google-analytics.com/,https://images.igdb.com/,https://static-cdn.jtvnw.net/,https://pbs.twimg.com/,https://twitch.extensions.barrycarlyon.co.uk/'
    ],

So I propose change the CSP fields to accept valid CSP not a CSV.

Or it should be laid out like the oAuth redirect URI's (multiple text fields one URL per field add/remove buttons etc)