CODEWITHSUNDEEP
javascriptjquerygoogle-chromeinstagram
Jens Kvist
Jens Kvist

Reputation: 559

Chrome Extension Development Instagram Loading Event

I recently started developing some minor Chrome Extensions for fun. I am currently working on a "Download Now" extension for Instagram that lets you download an Instagram image with a single click on a download button with the value "Get" placed in the post header.

As you can see in the screenshot below the button appears as expected.

enter image description here

But when I scroll down the point where it loads new posts, the button does not appear.

enter image description here

My question for now is, how can I predict the loading event so the button is gonna appear on the posts that are loading?

My jQuery looks like this so far,

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);
         });
     });
});

If you need more information about the extension just let me know, I think I got the most important written. I am sorry for the bad language. I'm not a native speaker.

Thanks in advance.

Upvotes: 1

Views: 240

Answers (1)

Wes Foster
Wes Foster

Reputation: 8900

Since there isn't an event for you to try and tie into, you need to create your own "event." In this case, it would be for when images loaded.

Take into consideration what happens when a new set of images are loaded on the page. One thing that happens is the document's height will change. When new content is dynamically loaded, the height of the document will increase. Still with me?

Knowing this, we can create a function that checks the height of the document every interval. I'm not going to write the full script for you, but this below is an example of what you can do.

// 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
});

Note, that this will also append buttons onto existing images that have a button on them. You'll want to avoid this by adding a condition to the appendButton method.

Upvotes: 1

Related Questions