为什么我的按钮点击侦听器在 chrome 扩展程序中不起作用？

Question

我正在尝试创建一个 chrome 扩展，我的问题是当我尝试为 class 中的每个按钮放置一个事件侦听器时，只有第一个按钮有一个，并且其余的没有事件侦听器。

function copyButtonInitialise(){
    var copyButtons = document.getElementsByClassName("copyPassword");
    console.log("length = ", copyButtons.length);
    for (var i = 0; i < copyButtons.length; i++){
        console.log(copyButtons[i] + " element number " + i + "= button");
        copyButtons[i].addEventListener("click", copyButtonClick);
    } 
}

如果单击带有 class“复制密码”的任何按钮，应调用此函数。（只是想确保它被单击，但没有）

 function copyButtonClick(){
        console.log("Hello There");
    }

这是加载密码的函数，在向按钮添加事件侦听器之前调用它。

async function loadPasswords(){
    document.getElementById("passwordTable").innerHTML = "";
    console.log("This is the loadpasswords function");
    chrome.storage.sync.get(null, function(items) {
        var allKeys = Object.keys(items);
        
        var passwordTable = document.getElementById("passwordTable");
        var header = passwordTable.createTHead();
        var passwordRow = header.insertRow(0);
        
        for(var i = 0; i < allKeys.length; i++){
            let passwordKey = allKeys[i];
            chrome.storage.sync.get([allKeys[i]], function(value){
                var passwordName = Object.keys(value);
                passwordName = passwordName[0];
                var table = document.getElementById("passwordTable");
                var header = table.createTHead();
                var passwordRow = header.insertRow(0);
                var cellTwo = passwordRow.insertCell(0);
                var cell = passwordRow.insertCell(1);
                cellTwo.innerHTML = "<p1 id=passwordNameCol>" + passwordName + "</p1>";
                cell.innerHTML = "<button class=copyPassword> Copy " + '"'+ passwordName + '"'+ "</button>";
                
            });
        }
    });
}

密码清楚地载入。

当我单击按钮时，没有任何内容发送到控制台，期待“你好”（如上所示）

Answer 1

试试这些：

外chrome.storage.sync.get(null returns所有存储的键+值对。为什么在“for”语句中第二次使用 chrome.storage.sync.get？没必要。
不要使用 table 的插入方法，而是尝试使用 createElement 和 appendChild。首先创建一个 THEAD（或 TBODY）元素，然后将每一行放在上面。完成后，您只需将 THEAD\TBODY 添加为 table.
尝试使用 createElement 创建按钮（正如我对任何其他 table 元素的建议），并在其创建后将事件侦听器放在它上面（在“for”内）。
如果您想要为其他不同的行重用相同的 table，请记住先销毁 THEAD，否则刚刚创建的事件侦听器将保持孤立状态。使用 element.remove() 而不是 innerHTML = "".

为什么我的按钮点击侦听器在 chrome 扩展程序中不起作用？

Why does my button click listener not work in chrome extension?

javascript

google-chrome-extension

async-await