1

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.)

Mohammad Anwar
  • 39
  • 1
  • 6

1 Answers1

1

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 :).

BVoort
  • 36
  • 3