Инфраструктура разработки Chrome Extension Loading Event

Question

Недавно я начал разрабатывать некоторые небольшие расширения Chrome для удовольствия. В настоящее время я работаю над расширением «Загрузить сейчас» для Instagram, которое позволяет загружать изображение Instagram одним щелчком мыши по кнопке загрузки со значением «Get», размещенным в заголовке сообщения.

Как вы можете видеть на скриншоте ниже, кнопка появляется, как ожидалось.

Но когда я прокручиваю вниз точку, где она загружает новые сообщения, кнопка не появляется.

Моим вопрос теперь в том, как я могу предсказать событие загрузки, так что кнопка собирается появиться на столбах, которые загружаются?

Мой JQuery выглядит это так далеко,

jQuery(document).ready(function() { 
    jQuery(window).load(function() { 
     var location = jQuery('._s6yvg'); 
     jQuery(location).each(function() { 
      var image = jQuery(this).parent().find('div > div > div > div > img').attr('src'); 
      jQuery('<a class="get-button" href="' + image + '">Get</a>').appendTo(this); 
     }); 
    }); 
}); 

Если Вам необходима дополнительная информация о расширении просто дайте мне знать, я думаю, что я получил самое важное написано. Прошу прощения за плохой язык. Я не носитель языка.

Заранее спасибо.

Answer 1

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

Учитывайте, что происходит, когда на страницу загружен новый набор изображений. Одно дело, что высота документа изменится. Когда новый контент динамически загружается, высота документа увеличивается. Все еще со мной?

Зная это, мы можем создать функцию, которая проверяет высоту документа за каждый интервал. Я не буду писать полный скрипт для вас, но это ниже - пример того, что вы можете сделать.

// Your "append" method 
function appendButton() 
{ 
    var location = jQuery('._s6yvg'); 
    jQuery(location).each(function() { 
    var image = jQuery(this).parent().find('div > div > div > div > img').attr('src'); 
    jQuery('<a class="get-button" href="' + image + '">Get</a>').appendTo(this); 
    }); 
} 

// This will monitor the document's height. 
// When new images are loaded (thus making the document height increase), 
// we will call the `appendButton` method again. 
function monitorDocumentHeight() 
{ 
    // Get the current $(document).height() 

    // Compare the current height to the most recent height variable 

    // If there is a difference in current_height and last_height: 
    // > then the height has changed and we should 
    // > call the `appendButton` method and store this height value. 

    // Set an interval to run this method again and check the height (200ms) 
} 

jQuery(document).ready(function() { 
    appendButton();    // The initial call 
    monitorDocumentHeight(); // Start the interval 
}); 

Обратите внимание, что это также добавит кнопки на существующие изображения, на которых есть кнопка. Вы хотите избежать этого, добавив условие к методу appendButton.