Webextension: Access json dictionary from external url, How? - content-security-policy

Question

It is possible (though risky) to allow a webextension in the browser to load javascript from a remote url using the following directive in the manifest.json file - by including something like:
"content_security_policy": "script-src 'self' https://example.com; object-src 'self'"
as documented here.
My question is how do I then go ahead and insert the javascript source file remotely housed on https://example.com ?
I tried in Firefox by adding at the top of my extension code:
var script_insert='<script src="https://example.com/dict.js"></script>';
document.write( script_insert + '\n' );
where dict.jscontains:
window.dict_L1C = {
"a" : "hello",
"b" : "world"
}
but that fails with warnings:
Content Security Policy: Ignoring “'unsafe-inline'” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “https:” within script-src: ‘strict-dynamic’ specified
I guess I'm doing it the wrong way, or I am missing something important.
UPDATE:
I am now looking at the solutions provides here

Answer 1

This is how from within a webextension I managed to read a dictionary fromhttps://www.remote-dictionary.com/dict.json.
First create the manifest.js that contains a permissions section as follows:
{
"manifest_version": 2,
"name": "mywebextension",
"version": "1.0",
"description": "reads a dictionary from a remote website and uses it on another",
"background": { "scripts": [ "background.js" ] },
"content_scripts": [ { "matches": ["*://my-insertion-site.com/*"], "js": [ "content.js" ] } ],
"permissions": [ "storage", "https://www.remote-dictionary.com/*" ]
}
Next create the background.js file that accesses the remote dictionary and then stores it locally in the browser.
if (typeof chrome !== 'undefined') { browser = chrome}
function fetchDict() {
let req = new Request( "https://www.remote-dictionary.com/dict.json", {
method: 'GET',
headers: { 'Accept': 'application/json' },
redirect: 'follow',
referrer: 'client'
});
fetch(req).then(function(response) {
// .json returns another promise
return response.json();
}).then(function(data) {
browser.storage.local.set({data: data}); // set storage for content-script
}).catch(error => { console.log(error); });
}
fetchDict();
And the content.js script:
if (typeof chrome !== 'undefined') { browser = chrome }
browser.storage.local.get({data: ""},function(data){ // get from local storage
window.dict=data.data;
)
})
// later access the dictionary values:
window.dict[ "my_key"];