Google chrome extension 如何将事件绑定到chrome扩展弹出窗口中的元素

我搜索了很多次，没有一个答案是100%有效的

基本上，我希望弹出窗口显示一些按钮，然后用不同的参数调用相同的函数。概念：

<button onclick="foo(1,2);">Button 1</button>
<button onclick="foo(2,3);">Button 2</button>

以及

document.getElementById('btn1').addEventListener('click',doSomething(1,2));

此外，我还尝试在

文档中添加按钮addEventListener.addEventListener（'DOMContentLoaded'，function（）{……}）

奇怪的是，如果我的popup.js包含button.addEventListener，那么在单击浏览器操作时会触发第一个，然后什么都不起作用。无论单击事件listner是否在DOMContentLoaded侦听器中，都会发生这种情况

我觉得这是CSP的问题，但我似乎无法让它发挥作用

对于扫描问号的用户：
在popup.html/popup.js中，如何根据onclick事件调用具有不同参数的单个函数？
问题
我不确定复制到SO时是否只是通过您的缩写，但您给出的代码都不能“粘贴”工作：


按钮上没有id，因此绑定到id（我假设这只是因为它们在第一次粘贴中不相关！）
第二次粘贴使用jQuery库，因此需要确保包含并允许jQuery：
在第三次粘贴中，addEventListener的第二个参数应该是一个函数，它接受事件作为第一个也是唯一的参数（如果需要）。（继续读）

解决方案
在您描述的场景中，绑定事件的最常见方法如下：

document.getElementById('btn1').addEventListener('click', function (){
    foo(1, 2);
}, false);


但是，如果有很多（或数量可变）按钮，我可能会这样做：

popup.html：

<div id="buttons">
  <button data-param1="1" data-param2="2">Button 1</button>
  <button data-param1="2" data-param2="3">Button 2</button>
</div>


按钮1
按钮2

popup.js：

var els = document.querySelectorAll('#buttons button'),
    i, total, param1, param2;

for (i = 0, total = els.length; i < total; i++) {
  el = els[i];

  param1 = parseInt(el.getAttribute('data-param1'));
  param2 = parseInt(el.getAttribute('data-param2'));

  el.addEventListener('click', function (){ foo(param1, param2) }, false);
}

var els=document.querySelectorAll（“#按钮”），
i、 总计，参数1，参数2；
对于（i=0，total=els.length；i
你能发布你所有的javascript和html以及它们各自包含哪些文件吗？谢谢，我明天会尝试获取一些代码。是的，上面的代码只是一个概念。在这段代码中，它总是得到调用函数的最后一个参数
var els = document.querySelectorAll('#buttons button'),
    i, total, param1, param2;

for (i = 0, total = els.length; i < total; i++) {
  el = els[i];

  param1 = parseInt(el.getAttribute('data-param1'));
  param2 = parseInt(el.getAttribute('data-param2'));

  el.addEventListener('click', function (){ foo(param1, param2) }, false);
}