Есть ли способ сделать функцию, которая будет доступна позже в расширении Google Chrome?

Question

Я пытаюсь создать расширение, которое создает кнопку, которая затем выполняет функцию, потому что расширение выполняет файл javascript после загрузки страницы. Однако, когда я создаю кнопку, я хочу запустить функцию. Есть ли способ, которым я могу сохранить функцию и переменные, которые можно будет запустить и получить доступ позже с помощью кнопки?

var effect = [[1,100],[2,32], [5,3]];
var points = (function(){var adding = 0;for(var i = 0; i<effect.length;i++){adding+=effect[i][0];};return adding;})()
var score = (function(){var adding = 0;for(var i = 0; i<effect.length;i++){adding+=effect[i][1];};return adding;})()
var percentage=(score/points*100).toString()+"%";
this.effect = effect;
this.points = points;
this.score = score;
var percentage = points/score;
function list_effect(){
    var effect_string = "";
    for(var i = 0; i<effect.length;i++){
        effect_string += ((points-effect[i][0])/score) - ((points)/score);
    }
    alert(effect_string);
}
if(percentage == 'NaN%'){
//  alert('ERROR');
}else{
  document.getElementsByClassName("agenda")[0].innerHTML = "<button type=\'button\' id=\'get_list\'>Get List</button>"+ document.getElementsByClassName("agenda")[0].innerHTML;
  document.getElementsByClassName("agenda")[0].innerHTML += "<script>" + "this.effect=" + effect.toString() + ";\nthis.points=" + points.toString()+ ";\nthis.score=" + score.toString() +"document.getElementById(\"get_list\").addEventListener(\"onclick\", list_effect());" + "</script>"
}

Я попытался использовать это. Однако это не работает

Answer 1

1. <script> не будет запускаться при добавлении через innerHTML, вы должны добавить его, используя appendChild
2. , обычно вам не нужно добавлять элемент <script> ввсе, просто используйте createElement и прикрепите слушателей напрямую

var button = document.createElement('button');
button.id = 'get_list';
button.onclick = function (e) {
  // use your variables here directly  
};
// clear the previous contents
document.querySelector('.agenda').textContent = '';
// add the button
document.querySelector('.agenda').appendChild(button);