Динамическое отображение встроенной функции в Chrome Extension

Question

В моем расширении Chrome я динамически рендерил некоторые элементы в объекте и пытался добавить встроенную функцию, которая привязывается к одному элементу.

chrome.storage.sync.get(['player_info'], (data) => {
    console.log('search')
    console.log(data)
    // data = list of possible players 
    let player_arr = data.player_info
    for (let i = 0; i < player_arr.length; i++) {
        document.getElementById("card-wrapper").innerHTML +=
            `<div onclick="alert('clicked')" class="player_option">
                <center>
                    <div class="card-img-small">
                        <a href="#">
                            <img id=\"player_img\" src="${player_arr[i].profile_img}" class="img-responsive">
                        </a>
                    </div>
                </center>
                <div class="card-body">
                    <div id="player-name" class="price-small">
                        ${player_arr[i].name}
                    </div>`
    }
})

В оболочке div я добавил функцию alert, чтобы проверить, работает ли она, но ничего не происходит. Я осмотрел элемент, и он выглядел так:

<div onclick="alert('clicked')" class="player_option">
                <center>
                    <div class="card-img-small">
                        <a href="#">
                            <img id="player_img" src="https://fmdataba.com/images/p/4348.png" class="img-responsive">
                        </a>
                    </div>
                </center>
                <div class="card-body">
                    <div id="player-name" class="price-small">
                        Paul Pogba
                    </div></div></div>

Кажется, теперь это разрешено в Chrome Extension. Как решить эту проблему, не нарушая политику безопасности?

РЕДАКТИРОВАТЬ - используя addEventListener

let player_arr = data.player_info
for (let i = 0; i < player_arr.length; i++) {
    document.getElementById("card-wrapper").innerHTML +=
        `<div id="selected_player_${i}" class="player_option">
            <center>
                <div class="card-img-small">
                    <img id=\"player_img\" src="${player_arr[i].profile_img}" class="img-responsive">
                </div>
            </center>
            <div class="card-body">
                <div id="player-name" class="price-small">
                    ${player_arr[i].name}
                </div>`

    document.getElementById(`selected_player_${i}`).addEventListener("click", function() {
        alert(`${player_arr[i].name}`)
    })
}

Answer 1

Я решил проблему, сделав еще один цикл for для addEventListener().Если я поместил и HTML-рендеринг, и addEventListener в один цикл for, как я делал в своем вопросе, addEventListener будет применен только к последнему элементу.

const callname = (name) => {
    alert(name)
}

chrome.storage.sync.get(['player_info'], (data) => {
    console.log('search')
    console.log(data)
    // data = list of possible players
    let player_arr = data.player_info
    for (let i = 0; i < player_arr.length; i++) {
        document.getElementById("card-wrapper").innerHTML +=
            `<div id="selected_player_${i}" class="player_option">
                <center>
                    <div class="card-img-small">
                        <img id=\"player_img\" src="${player_arr[i].profile_img}" class="img-responsive">
                    </div>
                </center>
                <div class="card-body">
                    <div id="player-name" class="price-small">
                        ${player_arr[i].name}
                    </div>`
    }
    for (let i = 0; i < player_arr.length; i++) {
        document.getElementById(`selected_player_${i}`).addEventListener("click", function() {
            callname(`${player_arr[i].name}`)
        })
    }
})