landocss Ответов: 2

Как сделать расширение chrome таким, чтобы оно работало правильно?

Я делаю расширение chrome, чтобы вы могли загружать изображения, нажимая на них. Проблема в том, что он немного глючит, так что любая помощь была бы потрясающей. Вот вам и 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();
});

Проблема в том, что он не всегда работает на веб-сайтах, и он работает только в том случае, если есть одно изображение, как я могу это изменить? Есть ли способ сделать так, чтобы он загружал только то изображение, на которое вы нажимаете, а не все из них?

Что я уже пробовал:

Я бы предположил, что, возможно, вам следует добавить идентификатор к изображению, на которое нажимает пользователь, а затем загрузить значение этого идентификатора. Но я не знаю, как это сделать. Большое вам спасибо за любую помощь, которую вы могли бы оказать. Хорошего вам дня!

2 Ответов

Рейтинг:
2

Nasira Mohamed Noufal 




        $(документ).готово(функция () {

            $("img").click(функция () {

                var t = document.createElement('a');

                Т.с href = этот.ФОК;

                t.download = this.src;

                документ.тела.метода appendChild(Т);

                Т.нажмите();

                документ.тела.метода removechild(Т);

            });

        });





пожалуйста, попробуйте этот код.


                                

                            

                                                    

                                            

                            
Рейтинг:
 1


                            

                                

                                    Sandeep Mewara
                                    
                                

                                

    Причина, по которой он работает для одного, а не для всех, заключается в том, что приведенный выше код должен применяться ко всем элементам.

Вы используете: селектор запросов



Цитата[^]:
Метод querySelector() возвращает первый элемент, соответствующий указанному CSS-селектору(селекторам) в документе.




Вам нужно найти все img теги и добавить обработчик кликов ко всем:
// Pure JS:
document.addEventListener('DOMContentLoaded', function() {
    
    var imgElements = document.body.getElementsByTagName("img");  // gets all the iamges of webpage
    Array.prototype.forEach.call( imgElements, function ( el ) {  // loops through all the images
        el.addEventListener("click", () => {.                     // attaches click handler one by one
            var a = document.createElement('a');
            a.href = el.src;
            a.download = el.src;
            document.body.appendChild(a);
            a.click();
       });
    }



Возьмите пример отсюда: Как создать расширение Chrome | Глава 6: Как заменить изображения на веб-сайте своими собственными изображениями | Heptagon[^] 


PS: приведенный выше код больше из моей памяти и, возможно, нуждается в некоторых изменениях. Намерение состоит в том, чтобы поделиться тем, что можно было бы сделать и где находится разрыв. Попробуйте.