I am trying to load (inject) in page a javascript code. The javascript file is local to the extension. the filepath is ‘js/somefile.js’.
const basePath = chrome.runtime.getURL(''); fetch(chrome.runtime.getURL(filePath), { mode: 'same-origin' }) // <-- important .then((_res) => _res.blob()) .then((_blob) => { const reader = new FileReader(); reader.addEventListener('loadend', (data) => { callback(data.currentTarget.result, basePath); }); reader.readAsText(_blob); }); const scriptTag = document.createElement('script'); scriptTag.innerHTML = scriptText; scriptTag.type = 'text/javascript'; const scriptElement = document[injectLocation].appendChild(scriptTag); if (removeImmediately) document[injectLocation].removeChild(scriptElement);
My web accessible resources are:
"web_accessible_resources": [{ "resources": [ "js/*.js", ], "matches": ["<all_urls>"] }], "content_security_policy": { "extension_pages": "script-src 'self'; object-src 'self'", "sandbox": "sandbox allow-scripts; script-src 'self' 'https://apis.google.com/' 'https://www.gstatic.com/' 'https://*.firebaseio.com' 'https://www.googleapis.com' 'https://ajax.googleapis.com'; object-src 'self'" },
The error that I get is:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-Wq/CW2mxkri68TjkuaA0+LnU0capVpyiEuSA5NOVNfU='), or a nonce ('nonce-...') is required to enable inline execution.
Advertisement
Answer
You can resolve the inline execution error by changing scriptTag.innerHTML = scriptText;
to scriptTag.src = chrome.runtime.getURL(filePath);
, no need to fetch the script. Manifest v3 seems to only allow injecting static scripts into the page context.
If you want to run dynamically sourced scripts I think this can be achieved by having the static (already trusted) script fetch a remote script then eval it.
UPDATE: example extension, with manifest v3, that injects a script that operates in the page context.
# myscript.js window.variableInMainContext = "hi"
# manifest.json { "name": "example", "version": "1.0", "description": "example extension", "manifest_version": 3, "content_scripts": [ { "matches": ["https://*/*"], "run_at": "document_start", "js": ["inject.js"] } ], "web_accessible_resources": [ { "resources": [ "myscript.js" ], "matches": [ "https://*/*" ] } ] }
# inject.js const nullthrows = (v) => { if (v == null) throw new Error("it's a null"); return v; } function injectCode(src) { const script = document.createElement('script'); // This is why it works! script.src = src; script.onload = function() { console.log("script injected"); this.remove(); }; // This script runs before the <head> element is created, // so we add the script to <html> instead. nullthrows(document.head || document.documentElement).appendChild(script); } injectCode(chrome.runtime.getURL('/myscript.js'));