捕获（非屏幕截图）的屏幕截图

Question

Would like to capture image of possibly inactive tab.

Problem is that when using the approach displayed here the tab often does not get time to load before capture is done, resulting in failure.

The chrome.tabs.update() call-back is executed before the tab can be captured.

I have also tried to add listeners to events like tabs.onActivated and tabs.onHighlighted and doing the capture when those are fired, but the result is the same. And, as a given by that, I have also tried highlighted instead of active on chrome.tabs.update() – and combination of both; with listeners and call-backs.

The only way to make it work partially better is by using setTimeout() , but that is very hackish, not reliable and ugly. The fact one have to activate a tab before capture is somewhat noisy – but if one have to add delays the issue becomes somewhat worse.

This is more like a convenience feature for my extension, but would be nice to make it work.

/* Not the real code, but the same logic. */

var request_tab = 25,
    request_win = 123
    old_tab;

/* Check which tab is active in requested window. */
chrome.tabs.query({
    active   : true,
    windowId : request_win
}, function (re) {

    old_tab = re[0].id;

    if (old_tab !== request_tab) {
        /* Requested tab is inactive. */
        /* Activate requested tab.    */
        chrome.tabs.update(request_tab, {
            active: true
        }, function () {     
            /* Request capture */                          /* CB TOO SOON! */
            chrome.tabs.captureVisibleTab(request_window, {
                format : 'png'
            }, function (data) {
                /* ... data ...  */

                /* Put back old tab */
                chrome.tabs.update(old_tab, {
                    active: true
                });
            })
        });
    } else {
        /* Requested tab is active. */
        /* Request capture. */
        chrome.tabs.captureVisibleTab(request_window, {
            format : 'png'
        }, function (data) {
            /* ... data ...  */
        })
    }
});

Answer 1

Since that you are updating the tab using the chrome.tabs.update() method, the callback will be called as soon as the tab properties are changed, but, obviously, before the page is loaded . To work around this you should remember that the tab isn't yet ready and, using the chrome.tabs.onUpdated event, check when it's ready and you can use chrome.tabs.captureVisibleTab() .

Here is the solution:

var request_tab = 25,
    request_win = 123,
    waiting = false,
    // ^^^ Variable used to check if tab has loaded
    old_tab;

// Check which tab is active in requested window.
chrome.tabs.query({
    active   : true,
    windowId : request_win
}, function (re) {

    old_tab = re[0].id;

    if (old_tab !== request_tab) {
        // Requested tab is inactive
        // Activate requested tab
        chrome.tabs.update(request_tab, { active: true });    

        // Tab isn't ready, you can't capture yet
        // Set waiting = true and wait...
        waiting = true;

    } else {
        // Requested tab is active
        // Request capture
        chrome.tabs.captureVisibleTab(request_window, {
            format : 'png'
        }, function (data) {
            // Elaborate data...
        })
    }
});

chrome.tabs.onUpdated.addListener(function(tabID, info, tab) {

    // If the tab wasn't ready (waiting is true)
    // Then check if it's now ready and, if so, capture
    if (waiting && tab.status == "complete" && tab.id == request_tab) {

        // Now you can capture the tab
        chrome.tabs.captureVisibleTab(request_window, {
            format : 'png'
        }, function (data) {

            // Elaborate data...

            // Put back old tab
            // And set waiting back to false
            chrome.tabs.update(old_tab, { active: true });
            waiting = false;
        });
    }
});