[Chrome Extension] How to pass the value to callback function

I created the makeButton() to make buttons dynamically like this:

const makeButton = (value) => {
  return `<button class='myextension-button' type='button'>Button</button>`
}

The value is the data passed to callback function.

In the chrome extension cases

I can use HTMLElement.dataset to pass the value to callback function like this:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/dataset

$(document).on('click', '.myextension-button', (event) => {
  console.log(event.currentTarget.dataset)
})

const makeButton = (value) => {
  return `<button class='myextension-button' data-index='${value}' type='button'>Button</button>`
}

In this method, I can take {index: value} in the callback function.

In the usual JavaScript cases

In the usual JavaScript code, I can pass the value like this:

const makeButton = (value) => {
  return `<button class='myextension-button' onClick='myFunc(${value})' type='button'>Button</button>`
}

But in the chrome extention, I would get the error.

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です