如何使我的 chrome 扩展程序正常工作？

Question

I am making a Chrome extension so you can download images when clicking on them. The problem is that it is a bit buggy, so any help would be awesome. Here is the Javascript:

var myImg = document.querySelector('img');
myImg.addEventListener("click", () => {
  var a = document.createElement('a');
  a.href = myImg.src;
  a.download = myImg.src;
  document.body.appendChild(a);
  a.click();
});

I would assume that maybe you should add an id to the image that the user clicks on, then download the value of the id. But I am not sure how to do that.

Answer 1

If you want to click on any img , you will want to use querySelectorAll to capture ALL images on the page, querySelector just grabs one.

var myImgs = document.querySelectorAll('img');
myImgs.forEach(function(img) {
  img.addEventListener("click", (el) => {
    var a = document.createElement('a');
    a.href = el.target.src;
    a.download = el.target.src;
    document.body.appendChild(a);
    a.click();
  });
});