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 也開始觸發。 不完全確定它是緩存錯誤還是什么，但它現在可以工作了。 因此，如果有人遇到類似問題，可能會嘗試清除緩存並重試。