Search code examples
javascripthtmlgoogle-chrome-extensioncontent-security-policymanifest.json

Is there a way to allow unsafe-inline code in a chrome extension (MV3)?

I am currently making a chrome extension (in Manifest Version 3) and I am trying to allow inline event handlers. In my popup.html I want to run a function when a button is clicked, as shown below:

HTML:

<button onclick="foo(this)">bar</button>

(Separate) JavaScript:

function foo(x){
    console.log(x);
}

When I run the extension I get the following error:

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

I have tried to add a content security policy and a nonce to my JavaScript file (to allow the inline-execution to work) but that has not worked either:

"content_security_policy": {
    "extension_pages": "script-src 'self' 'nonce-baz'"
},

Adding the content security policy causes the following error:

'content_security_policy.extension_pages': Insecure CSP value "'nonce-2726c7f26c'" in directive 'script-src'. Could not load manifest.

So I am wondering how I can allow the inline-code to be executed. (I have seen this post: Chrome Extension - Content Security Policy - executing inline code, however, the answer is using Manifest Version 2, while I am using Manifest Version 3.)

Solution

  • I don't know much about making a chrome extension but it might help if you use an .addEventListener. I have heard that using onclick isn't recommend so you might want to use and .addEventListener anyways.

    In your case I think it should look like:

    html:

    <button id='putIdHere'>bar</button>

    js:

    document.getElementById('putIdHere').addEventListener('click', {
   console.log('stuff')
});

    Not sure if this helps, but hopefully you can do something with it :).