Chrome 扩展：注入按钮的 onclick 不起作用

Question

第一次使用 chrome 扩展。 现在我有一个按钮和一个从内容脚本注入到页面的模式。

添加按钮

var button1 = document.createElement("button");
button1.innerHTML = "Button";
button1.onclick = openModal;
document.querySelector('.myClass').appendChild(button1);

添加模态

var modal = document.createElement("div");
modal.classList.add('modal');
var button = document.createElement("button");
button.innerHTML = "Close";
button.onclick = closeModal;
modal.appendChild(button);
document.body.appendChild(modal);

我在 class 模态中定义了 styles，其中我将显示设置为“无”

在 openModal 里面

function openModal(){
    var modal = document.querySelector('.modal');
    modal.style.display = "block";
}

显示模态。

在closeModal里面

function closeModal(){
    var modal = document.querySelector('.modal');
    modal.style.display = "none";
}

关闭模式。

这是我正在创建的通用格式。 第一个按钮的 onclick 工作正常并打开模态，但关闭模态的第二个按钮不起作用。 关于这里有什么问题的任何线索？

Answer 1

好的，不确定这里发生了什么，但我添加了一些额外的代码，这些代码注入了新的 js 代码，这些代码采用了 window 点击事件并将该事件与模态的 class 进行比较以关闭它。 在以某种方式进行这些更改后，closeModal function 也开始触发。 不完全确定它是缓存错误还是什么，但它现在可以工作了。 因此，如果有人遇到类似问题，可能会尝试清除缓存并重试。