I am attempting to load a remote js file into my popup/sidebar using the following code
const newScript = document.createElement('script')
newScript.src = 'https://mycompany.com/dist/myscript.js'
const myTarget = document.getElementById('offcanvas')
myTarget.appendChild(newScript)
Which results in the following errors
Refused to load the script ‘https://mycompany.com/dist/myscript.js’ because it violates the following Content Security Policy directive: “script-src ‘self'”. Note that ‘script-src-elem’ was not explicitly set, so ‘script-src’ is used as a fallback.
Refused to load the script ‘https://mycompany.com/dist/myscript.j’ because it violates the following Content Security Policy directive: “script-src ‘self’ ‘wasm-unsafe-eval’ ‘inline-speculation-rules’ http://localhost:* http://127.0.0.1:*”. Note that ‘script-src-elem’ was not explicitly set, so ‘script-src’ is used as a fallback.
If I instead download the js file and include it in the extension bundle like this though it works as expected
const newScript = document.createElement('script')
newScript.src = 'myscript.js'
const myTarget = document.getElementById('offcanvas')
myTarget.appendChild(newScript)
I prefer to call the remote file so the latest version is always being referenced, but it’s not clear to me how to resolve this.
Can someone point me in the right direction please.