javascript - Chrome 扩展开发 Instagram 加载事件

Question

为了好玩，我最近开始开发一些小型 Chrome 扩展。我目前正在为 Instagram 开发一个“立即下载”扩展程序，让您只需单击下载按钮即可下载 Instagram 图像，并将值“获取”放置在帖子标题中。

正如您在下面的屏幕截图中看到的，按钮按预期显示。

但是当我向下滚动到加载新帖子的位置时，该按钮不会出现。

我现在的问题是，如何预测加载事件，以便按钮出现在正在加载的帖子上？

到目前为止，我的 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 方法添加条件来避免这种情况。