Какой обработчик событий я должен использовать для манипулирования DOM на ленивой загрузке сайта React, такого как Instagram? - PullRequest
Новая
       10

Какой обработчик событий я должен использовать для манипулирования DOM на ленивой загрузке сайта React, такого как Instagram?

0 голосов
/ 01 октября 2018

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

В моем скрипте контента, какой обработчик событий должен быть размещен в моей логике, чтобы я мог добавить кнопки?

Я попробовал window.onload, но, как и ожидалось, он выбирает только первые 12 изображений. 

// manifest.json:
{
  "name": "Instagram to Imgur",
  "version": "0.0.1",
  "description": "Easily upload instagram pics to Imgur",
  "manifest_version": 2,
  "icons": {
    "16": "icons/icon_16.png",
    "32": "icons/icon_32.png",
    "48": "icons/icon_48.png",
    "128": "icons/icon_128.png"
  },
  "content_scripts": [
    {
      "matches": ["https://www.instagram.com/*"],
      "js": ["scripts/content/domInject.js"],
      "run_at": "document_end"
    }
  ]
}

// domInject.js:
window.onload = function() {
    const imgs = document.getElementsByClassName('FFVAD');

    console.log(imgs.length);

    for (let i = 0; i < imgs.length; i++) {
        console.log(imgs[i].srcset);
        // addButton(imgs[i]);
    }
};

1 Ответ

0 голосов
/ 02 октября 2018

Вы можете использовать Mutation Observers для реализации этого: 

window.onload = function() {
    // Select the node that will be observed for mutations
    // Just used the class name i observed as of now. Feel free to replace with a proper tag
    var targetNode = document.getElementsByClassName('cGcGK')[0];

    // Options for the observer (which mutations to observe)
    var config = { attributes: true, childList: true, subtree: true };

    // Callback function to execute when mutations are observed
    var callback = function(mutationsList, observer) {
        for(var mutation of mutationsList) {
            if (mutation.type == 'childList' && mutation.addedNodes.length>0 ) {
                Array.prototype.forEach.call(mutation.addedNodes, function (node) {
                  if(node.tagName == "img" && node.attr("class") == "FFVAD")
                  {
                    // Add button to node code
                    console.log(node)
                  }
                });
            }
        }
    };

    // Create an observer instance linked to the callback function
    var observer = new MutationObserver(callback);

    // Start observing the target node for configured mutations
    observer.observe(targetNode, config);
}

Вы также можете использовать События мутации DOMNODEInserted на данный момент, ноони устарели, поэтому не очень рекомендуется.Кроме того, они влияют на производительность дальнейших изменений DOM. 

$(document).on('DOMNodeInserted', function(e) {
    img = $(e.target).find("img.FFVAD")
    if(img.length){
      //Add button code
      console.log(img)
    }
});

Я испробовал оба этих подхода в Content js, и они, похоже, работают.

...