Question

我正在尝试开发一个Chrome扩展程序，可以将网页上的图像显示给用户，让他们剪辑它们，类似于Pinterest的Pin It扩展功能。

问题是，当我在动态加载图像的页面上使用扩展名时，例如页面滚动时的Pinterest，内容脚本似乎找不到这些图像。事实上，每次运行它时并不总能找到相同的图像。

如何让Chrome扩展程序清除页面上的所有CURRENT元素，包括使用AJAX更新的元素？

以下代码专门用于从Pinterest电路板中抓取图像。

的manifest.json

{
  "name" : "clipper",
  "version" : "0.1",
  "description" : "Captures images from page.",
  "browser_action": {
     "default_icon": "icon.png",
     "default_popup": "popup.html"
  },
  "manifest_version": 2,
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": ["js/jquery-2.1.3.min.js", "js/content.js"]
    }
  ]
}

Content.js

// content.js
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if( request.subject === "getImages" ) {
      var imgs = getAllImages();

      sendResponse(imgs);
    }
  }
);

function getAllImages() {
  var $imgs, imgs = [], imgCount = 0;;

  $imgs = $('.pinUiImage img')
  $imgs.each(function(ndx, el) {
    if (imgCount < 500) {
      var $el = $(el), img = {}, theImage = new Image();

      img.src = $el.prop('src');

      // in case location.href doesnt return a value in UIWebKit
      var source = window.location.href;
      if (source === undefined) {
        source = document.URL;
      }

      if (img.src !== undefined && source !== undefined) {
        theImage.src = img.src;

        img.dWidth = $el.width();
        img.dHeight = $el.height();
        img.width = theImage.width;
        img.height = theImage.height;
        img.source = source;
        img.name = $el.attr('title') || $el.attr('alt') || document.title;

        // if (img.dWidth >= 200 && img.dHeight >= 200) {
        //   if (img.src.indexOf('data:image') != 0) {
        //     // neat trick to standardize a url using jquery
        //     var a = $('<a>', { href:img.src } )[0];
        //     img.src = a.href;
        //   }
        //   imgs.push(img);
        //   imgCount++;
        // }

        imgs.push(img);
        imgCount++;
      } else {
        console.log('source undefined')
      }
    }
  });

  return imgs;  
}

Popup.js

function setImageDisplay (imgs) {
  console.log(imgs);

  var $imgs, $div;
  $imgs = $('#images')
  $div = $("<h1 class='count'>Images Found: "+imgs.length+"</h1>");
  $('body').prepend($div);


  $.each(imgs, function(ndx, img) {
    var $div = $("<div class='image'></div>"), 
      $img = $("<img/>");

    $img.attr('src', img.src);

    $div.append($img);
    $imgs.append($div);
  })
}

/* Once the DOM is ready... */
window.addEventListener('DOMContentLoaded', function() {
    /* ...query for the active tab... */
    chrome.tabs.query({
        active: true,
        currentWindow: true
    }, function(tabs) {
        /* ...and send a request for the DOM info... */
        chrome.tabs.sendMessage(
                tabs[0].id,
                {from: 'popup', subject: 'getImages'},
                /* ...also specifying a callback to be called 
                 *    from the receiving end (content script) */
                setImageDisplay);
    });
});

Popup.html

<!DOCTYPE html>
<html>
  <head>
    <title>Wecora</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/popup.js"></script>
  </head>
  <body>

    <div id="images"></div>

  </body>
</html>

Chrome扩展程序内容脚本未看到加载了AJAX的内容

0 个答案: