Chrome extension manifest v3 Content Security Policy

Question

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.

The code you've shown is unrelated to the error which says you have an inline script which is a common problem in the popup or options pages: [more info](https://stackoverflow.com/a/25721457). — wOxxOm, May 07 '21 at 17:14
You are right, Indeed I am trying to inject said script in page. I saw that executeScript is a viable alternative. How can I aim to inject the code of a script in the current tab? — Michael, May 07 '21 at 18:01
Use a [content script](https://stackoverflow.com/a/4532567). — wOxxOm, May 07 '21 at 18:08
I updated the code with the offending line. It is the appendchild part that is blocked because V3 does not allow for injection of scripts. I am using a content script to do this but it still fails. — Michael, May 07 '21 at 18:10
Currently you use a content script to inject another script in [page context](/a/9517879), which is a very special thing needed to extract/access JS variables/functions from the page. To inject the code you don't need that. Simply inject the js file as a content script (declaratively or via executeScript). — wOxxOm, May 07 '21 at 18:17
It's sucks, how to deal with third-party, in case they (third party) have some updates? End up compiling a new own script and include it into the extension bundle? — Ng Atom, Sep 07 '21 at 10:36

stackbykumbi · Accepted Answer · 2021-09-29T18:05:20.933

39

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'));

edited Sep 29 '21 at 18:05

answered Sep 28 '21 at 11:38

stackbykumbi

636
6
5

1

I've tried this when v3 was released and I could not access any of the javascript variables from the top window (website context). By access I mean. Say there is a window.text variable. Can I inject a script that does window.text='something';. So I cannot read the variable but I can still change it. From what I understand, this is not possible under v3. – Michael Sep 29 '21 at 16:00
It's definitely possible to inject a script that does `window.text='something'`. I'm updating my answer with an example. – stackbykumbi Sep 29 '21 at 18:01
Yes it does work. I was able to verify it as well. What an elegant and simple solution! thank you so much! – Michael Sep 29 '21 at 23:39
4

Can this work with an external script like paypal's smart button? – Joseph Astrahan Oct 09 '21 at 02:18
I'm getting this error on the remove call when I try to use it in typescipt: "TS2339: Property 'remove' does not exist on type 'GlobalEventHandlers'." – user1689987 Jan 09 '22 at 23:24
That saved me so much time, thanks <3 – makim Aug 12 '22 at 22:42
This works! However, it looks like it is bypassing the content security policy (CSP), so I'm wondering if at some point this could break. – elier Nov 03 '22 at 19:26
3

"Manifest v3 seems to only allow injecting static scripts into the page context." I work on extensions at Google. This is definitely true. – StormyKnight Nov 04 '22 at 16:24
To get it to work for me in v3 I had to add the `myscript.js` to `content_scripts` as well. – Nate-Wilkins Dec 30 '22 at 02:56
I'm shocked this actually worked. Been fighting with this problem all week, since upgrading to V3. This method didn't work in V2, but I'm glad it does now!! Thank you!!!! – Brad Jan 20 '23 at 23:36
@JosephAstrahan Did you get an answer to your question? How did you make it work? – AlwaysLearning Aug 02 '23 at 14:29

score -5 · Answer 2 · answered May 28 '22 at 03:57

-5

Download the script files and put it on your project to make it local. It solved my content security policy problem.

answered May 28 '22 at 03:57

kimshee16

23
3

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 28 '22 at 13:08

Chrome extension manifest v3 Content Security Policy

2 Answers2

Linked