有沒有辦法制作一個 function 可以稍后在谷歌瀏覽器擴展中訪問？

Question

我正在嘗試制作一個擴展，該擴展創建一個按鈕，然后執行 function，但是，因為擴展在頁面加載后執行 javascript 文件。 但是，當我創建按鈕時，我想運行 function。 有沒有辦法可以存儲 function 和以后可以通過按鈕運行和訪問的變量？

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