Chrome 扩展程序向页面上的每个图像添加按钮

Question

我正在尝试使用 Chrome 扩展程序为网页上的每个图像添加一个按钮 append。 我的内容脚本中有以下代码：

var imagesArray = document.getElementsByTagName("img");
console.log(imagesArray);

for (const img of imagesArray) {
    var button = document.createElement("button");
    button.innerHTML = "button";
    button.onclick = function() {
        console.log("clicked");
    }
    
    img.append(button);

}

我能够获取所有图像并且我知道我可以 append 按钮，我只是不知道如何将 append 按钮放到图像上。 任何帮助表示赞赏

Answer 1

使用这一行document.body.appendChild(button); <-- use this line document.body.appendChild(button); <-- use this line在这个img.append(button)下方使用这一行

Answer 2

您可以在 css 中使用类似的内容。如果您能够添加任何 css。谢谢

 button { display: none; } img:hover + button { display:block; }

 <img src="https://picsum.photos/id/237/200/300" /> <button>My Button</button>