Getting thumbnails of images in extension

Question

There's a site with 10 or more images, lets say

<div class="container"><img src="some_URL"></div>

I want to generate thumbnails to them to save images into extension's storage, so that I can view them without offline or without heavy traffic. That site does not allow cross-origin use of images, so atm I'm trying to use the next "algorithm":

Include a following script (include2page.js) to the page.
Start cycle from 0 to number of images on the page.
Get the visible position and size of an image.
Scroll page to it, send coordinates via chrome.runtime.sendMessage() to extension's background script (background.js).
Use chrome.tabs.captureVisibleTab() to get a picture in background script.
Copy it to canvas, shrinking and cropping to desired thumbnail size.
Save thumbnail into chrome.storage.local as base64.

include2page.js:

var list = document.getElementsByClassName('container');
for (var i = 0; i < list.length; i++) {
    var img = list[i].getElementsByTagName('img')[0];
    chrome.runtime.sendMessage(null, {
        'type': 'imgData',
        'data': {
            x: img.x,
            y: img.y,
            w: img.width,
            h: img.height
        }
    });
}

background.js (output to console for simplicity):

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.type == "imgData") {
        var imgData = request.data;
        chrome.tabs.executeScript(null, {code: "window.scrollTo(0, "+imgData.y+");"});
        chrome.tabs.captureVisibleTab(null, {format: 'png', quality: 100}, function(src) {
            var canvas = document.createElement("canvas");
                canvas.width = 96;
                canvas.height = 96;
            var ctx = canvas.getContext('2d');
            var image = new Image();
                image.src = src;
                image.onload = function(){
                ctx.drawImage(image, imgData.x, imgData.y, imgData.w, imgData.h, 0, 0, 96, 96);
        console.log(canvas.toDataURL("image/png", ""));
                }
        });

});

But there's a problem: due to asynchronous nature of extension's functions it doesn't work that well in a continuous cycle, I can get 2-3 thumbnails assign to all of the images, i.e. different images generate are getting one thumbnail.

Maybe there's some simpler solution? Or, if there isn't, how can I replace a cycle?

Please show us your code. From your text I assume that the problem is a "closure in a loop" problem, but without the code you'll never know — devnull69, Jun 17 '14 at 06:14
Ouch. `captureVisibleTab` is hunting squirrel with a howitzer. If the images are hosted on a specific set of servers, you can add those to your permissions and not suffer from cross-origin woes. — Xan, Jun 17 '14 at 08:25
@Xan, I don't have any access to the servers. Can it be done on client side? — user1249568, Jun 17 '14 at 08:33
@user1249568 Certainly - I mean, if the images are not from all around the internet but servers in one domain, you can circumvent same-origin policy in Chrome Extensions by setting permissions. — Xan, Jun 17 '14 at 08:34
@Xan, yeah, from one server. Or, at least, a finite number of servers. Is it done in chrome://flags, or some peculiar permission in extension's manifest? — user1249568, Jun 17 '14 at 08:40

score 0 · Answer 1 · edited May 23 '17 at 11:57

Note: I'm not sure this answer will work. If it doesn't, I'd be happy to delete it.

Instead of using a heavy-handed approach with captureVisibleTab, you can try to circumvent cross-origin permissions.

Suppose the images are served from cdn.images.com. You need to add that (or a corresponding match pattern if there are many servers) to your manifest:

"permissions" : [
   "*://cdn.images.com/*",
   ...
]

This enables cross-origin XHR's from the extension's background page.

Then you should be able to get the image as a blob with XHR; since this would clear its origin, you can now use it to generate your thumbnail.

This question deals with how to do it.

Getting thumbnails of images in extension

1 Answers1